The infamous drop shadow. It has the potential to look really really good, or really really bad. No longer do we need to reluctantly change our text or boxes into images in order to get a drop shadow effect. Behold, the text-shadow and box-shadow properties.

Text shadow

This is a pretty simple property as long as you can remember which value is which.

			
			text-shadow: 2px 2px 2px #000;

			TEXT TEXT TEXT
			

The above example is text with a shadow 2px right, 2px down, 2px blurred, colored black.

			text-shadow: -3px -3px 0px blue;

			A second shadow
			

This text has a shadow 3px left, 3px up, 0px blurred, colored blue.

This property is currently supported on all browsers except Internet Explorer.

Box Shadow

This ones a little more complicated than the text shadow. We now account for the value of the spread of the shadow, the option for an inset shadow, the use of multiple shadows on the same box, a border-radius property and RGBa color.

Because this property isn't fully supported yet, it is best to add prefixes to support Mozilla and Webkit.

			
			#whatever{
				box-shadow:-5px -5px 3px 5px #333;
				-moz-box-shadow:-5px -5px 3px 5px #333;
				-webkit-box-shadow:-5px -5px 3px 5px #333;
			}
			
			

			

That is a box with a shadow offset to the left and top by 5 px, with a blur distance of 3 px, a spread distance of 5px, and a grey color.

To make a shadow inset, just add the word inset to the beginning.

				
			#whatever{
				box-shadow: inset 0 0 3px 5px blue;
				-moz-box-shadow: inset 0 0 3px 5px blue;
				-webkit-box-shadow: inset 0 0 3px 5px blue;
			}
			
			

			

That one is a box with a blue inset shadow with no offset, a 3px blur and a 5px spread.

Multiple shadows

If you want to put multiple shadows on a box, plug in your values like usual and separate them with commas. They will layer front to back, so keep this in mind.

Border Radius

If you have a box with rounded corner that was created using the border-radius property, any shadow you make will follow the curve.

			
				#box{
				border-radius:5px;
				box-shadow: 5px 5px #333;
			}
			
			

			

RGBa

Using RGBa color we can add opacity to a shadow.

			box-shadow:5px 5px rgba(0,0,0,0.5);
			

			

Black shadow with 50% opacity.

RGBa allows you to set the opacity of an element as part of the color value. The value is represented by decimals, 1 being opaque and 0 being completely transparent.

#div{
	background-color:rgba(0,0,255,0.6);
}

The first box has an opacity of 60%, the second box has 100%, or background-color:rgba(0,0,255,1);

Opacity does essentially the same thing

#div{
	background-color:rgb(0,0,255); opacity:0.6;
}

As you can see, RGBa and Opacity differ greatly in one area. RGBa sets the opacity only for the element you apply it to. Opacity sets the opacity for the element and all of its children(anything inside it). You can see clearly that the text in the Opacity box has been taken down to 60% opacity, while the text in the RGBa box remains opaque.

CSS3 transitions allow property changes on things like :hover or :focus to have a specific durations.

Here is the code for making a div change colors with a 4 second duration when you hover over it.

#div{
width:200px;
height:60px;
background-color:blue;
color: black;
-webkit-transition: background-color 2s;
-moz-transition: background-color 2s;
-o-transition: background-color 2s;
-ms-transition: background-color 2s;
transition: background-color 2s;
}

#div:hover {
background-color: white;
}

You can also do a transition from one size to the other. The value demonstrated below is a 3 second ease.

#div{
width: 100px;
height:30px;
color:white;
background-color: blue;
-webkit-transition: 3s ease;
-moz-transition: 3s ease;
-o-transition: 3s ease;
-ms-transition: 3s ease;
transition: 3s ease;
}
#div:hover{
width: 300px;
}

There are also linear, ease-in, ease-out, and ease-in-out values that can be applied. It's best to experiment with these and figure out which one works best for you.

Combining a color and size transition also makes for an interesting effect. Just add both transitions separated by a comma.

#trans3{
width:150px;
height:60px;
background-color: blue;
color: black;
-webkit-transition: background-color 4s, 3s ease;
-moz-transition: background-color 4s, 3s ease;
-o-transition: background-color 4s, 3s ease;
-ms-transition: background-color 4s, 3s ease;
transition: background-color 4s, 3s ease;
}

#trans3:hover {
background-color: white;
width:200px;
height:100px;
}

By using animations in CSS3, we can create useful animations using only CSS. It is very versatile, and can be used for countless things. For this tutorial, I'll just cover the basics by creating a box that changes color, rotates, and moves back and forth across the screen.

For any animation, you start by naming and adding the code to the element you want to animate, like animation:name, duration, timing, delay, iteration, direction;.

#animation{
position:relative;
width:100px;
height:100px;
background-color:#FF0000;
}

#animation:hover{
	-webkit-animation:spinserve 3s ease 1s 1 normal;
  -moz-animation:spinserve 3s ease 1s 1 normal;
  -o-animation:spinserve 3s ease 1s 1 normal;
  animation:spinserve 3s ease 1s 1 normal;
}

When you hover over the box, it will run for 3 seconds, with an ease, a 1 second delay, one repetition, in a normal direction. Next, is the fun part. Using the @keyframes rule, we specify at which points in time (represeted as percentanges) our element changes or animates.

@-webkit-keyframes spinserve{
	0% {top:0; left:0; background-color:red; }
	25% {top:0; left:300px; background-color:green; -webkit-transform:rotate(45deg);}
	50% {top:0; left:600px; background-color:blue; -webkit-transform:rotate(90deg);}
	75% {top:0; left:300px; background-color:yellow; -webkit-transform:rotate(45deg);}
	100% {top:0; left:0; background-color:red;}
}

*NOTE: To save space I only used the -webkit- prefix, but make sure and include the others when adding this code to your site.