Shadows

Adding shadows to elements and text is simple in CSS3. Use shadows to make certain elements really stand out and give a more natural look to your UI. There are many options for adding shadows, such as size, position, and color. Shadows don't always have to be behind elements and text; they can frame, highlight, and add effects to them too.

Box shadows

In addition to rounded corners, you can add shadows to elements using the new CSS3 box-shadow property. The box-shadow property takes a number of parameters that tells it how to draw the shadow:

box-shadow: h-offset v-offset blur-radius spread-radius color;

Here is an explanation of the parameters:

• h-offset: The horizontal offset of the shadow. Negative values put the shadow to the left of the element.

• v-offset: The vertical offset of the shadow. Negative values put the shadow above the element.

• blur-radius: Determines the blur amount; the higher the number, the more blur (optional).

• spread-radius: The size of the shadow. If zero, it's...