O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required