Archive | CSS Tricks RSS feed for this section

How to Stretch Background Image in CSS

21 July 2013

0 Comments

Sometimes, we set the background image but the background image doesn’t fit in the box. We need to stretch the background image. In CSS, the size of the background image is controlled by property “background-size”.

To stretch a background image in CSS, add the following code in the style of the box or body:

background-size: cover;

I hope this will work for you.

If It Doesn’t Work:

If there is no any change by adding this code, try using below code instead of above:

background-size: cover !important;

If It Doesn’t Look Better:

If the above codes make a background image ugly, try using one of the following codes:

background-size: 100%;
background-size: contain;

(You can add “!important” property if needed).

Continue reading...

How to Make Image Large on Mouseover

19 June 2013

0 Comments

Enlarge Image with CSS3

You might have seen somewhere that when you bring your mouse pointer on the image, it becomes large. It is a good technique to focus on it. This is made with the help of CSS3. Mouseover event is applied by using “:hover” which makes an image to be large on mouseover. Below is the code and example.

HTML:

<img scr=”image_url” width=”128″ height=”128″>

 

CSS:

img {
transition: transform 1s;
-webkit-transition: transform 1s;
}
img:hover {
transform:scale(1.5,1.5);
-webkit-transform:scale(1.5,1.5);
}

 

Example:

Mouseover Me
Continue reading...

How to Make Circle in CSS

16 June 2013

0 Comments

If you want to make a round box (a div element) like a circle in your website or page, you can do this with CSS “border-radius” property.

How to Create Round Box Using CSS:

You can draw a circle by using the following CSS code.

#element {

/*Setting Width and Height*/
width: 100px;
height: 100px;

/*Making Box Round*/
border-radius: 100px;

/*Border-Radius should must be equal to width and height*/

}

Example CSS Circle:

This Is A Round Box
Continue reading...

How to Make Font Bold in CSS

12 June 2013

2 Comments

Making some words bold in a large article is very nice to make article attractive and easily readable or to make the word prominent in the article. If you want to make font bold using CSS, see the below code.

How to Make Font Bold in CSS:

Insert the following code in the style of the element you want to make bold.

 

font-weight: bold;

 

The element will become bold.

Enjoy…!

Continue reading...

How to Change Text Color Smoothly on Mouseover

27 May 2013

1 Comment

Text Color Change Animation

If you want to make text color changing animation (change color smoothly) in your website. You can do this with CSS3 (latest version of CSS). There is a transition property that let us create animations for changing style on mouseover etc.

How to Create Text Color Changing Animation:

For changing color of any element on mouseover (:hover), below is the CSS code.

#element {
color:red; /*Initial Color*/
transition: color 1s;
-webkit-transition: color 1s;
}

#element:hover {
color:blue; /*Final Color*/
}

 

Result:

The above code will result as the following text

This is an Example Text

If you take mouse over this text, color of this text will smoothly change from red to blue.

Continue reading...

How to Remove Underline from Link

21 May 2013

0 Comments

A link is underlined by default to identify that it’s a hyperlink. But, if you want to remove underline and make it look like a simple word, you should see the following code.

HTML:

<a href=”{your link url here}” id=”link”>Sample Text</a>

 

CSS:

#link {
text-decoration: none;
}

 

If the above CSS code doesn’t work the add the following CSS code:

#link {
text-decoration: none !important;
}

 

Then the underline will be removed from the link.

Continue reading...

How to Rotate Object on Mouseover

28 April 2013

0 Comments

Rotate Object Using CSS3

You might have seen somewhere that when you bring your mouse pointer on the object, it rotates. The question that arises in your mind that how this has been created. This is made with the help of CSS3. CSS has a new function of transform to move the object as you wish. Mouseover event is applied by using “:hover“. Below is an example for you to understand rotation of an object.

HTML:

<div id=”object”>This is a box.
Mouse Over It.</div>

 

CSS:

#object {
width: 100px;
height:100px;
background-color: aqua;
border: 1px solid black;
transition: all 2s;
-webkit-transition: all 2s;
}

#object:hover {
transform:rotate(360deg);
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}

 

Example:

This is a box.
Mouse Over It.
Continue reading...

How to Create Transparent Box in CSS

16 April 2013

1 Comment

Make a Box Transparent Using CSS

This is a trick that will tell you how to create a transparent box with CSS (Cascading Style Sheet). This is done by “Opacity”  property of CSS. If we set the value of opacity as 1, box will be shown as normal (non-transparent). And if we set the value of opacity as “0”, then it will disappear.

So, if we set the value of opacity property between 0 and 1. Then the box will be transparent.

Normally, value of opacity for transparency is “0.5”.

(The box will be less transparent if value is “0.8” and highly transparent when value is “0.2”).

Below is the example and code of a transparent box.

HTML:

<div id=”transparent”>This is a transparent box in which text is written.

In this box, there can be paragraphs, headings as well as images and other elements.</div>

CSS:

#transparent {
padding:20px;
width: 250px;
border:1px solid black;
border-radius:20px;
background-color: #26FF00;
opacity: 0.5;
}

Box:

This is a transparent box in which text is written.
In this box, there can be paragraphs, headings as well as images and other elements.
Continue reading...