WebCodeBench
PHP, CSS, HTML and other web code stuff

CSS3 How To: Use Box-Shadow Property

CSS3 How To Use Box-Shadow Property

The box-shadow property works in a similar way to text-shadow, except you can use it to apply shadows to whole areas, such as images, side panels or feature-boxes. Previously, a web developer would have to resort to using carefully edited background images for drop-shadows, and when it came to putting shadows on resizeable elements such as sidepanels, it could result in a whole lot of extra markup, (such as the use of multiple nested DIV tags), not to mention the extra bandwidth used by the image files. Now we can even cast shadows onto whatever arbitrary background falls beneath drop-down navigation menus, and other dynamic elements, which would previously have been just about impossible.

Box-Shadow Syntax

Here is the basic syntax:

.box-shadow {
    box-shadow: 1px 1px 2px #404040;
}

In order, the parameter values are:

  • position – (not shown above, so takes the default value): either ‘outset’ (default) or ‘inset’
  • horizontal offset – positive values offset to the right
  • vertical offset – positive values offset downwards
  • blur amount – zero = no blur
  • shadow colour

Box-Shadow Compatibility

Internet Explorer

The box-shadow property is supported by IE9. For earlier versions, there is an alternative filter syntax which can be used, shown in the full solution below.

Firefox

The standard notation is supported by Firefox 4.0. For earlier versions, the -moz prefix should be used (which uses the normal syntax).

Box-Shadow Complete Solution

Here is the full code needed, for maximum compatibility:

.box-shadow {
    -webkit-box-shadow: 1px 1px 2px #404040;
    -moz-box-shadow: 1px 1px 2px #404040;
    box-shadow: 1px 1px 2px #404040;
    /* IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#404040')";
    /* IE5.5 - IE7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#404040');
}
This entry was posted in CSS, CSS3. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  • Hello

    My name is Vin. I'm a coder who is interested in discovering the best ways to do things on the web. With a little bit of thought, we can do lots of interesting things, and it often isn't nearly as hard as one might think.

    This site is my chance to share with you what I've learned.