/Main_Page

::You must have ninja focus to complete your mission::NinjaFocus::

CSS Drop Shadows

Views:


CSS drop shadows aren't quite with us yet, Safari has them and Firefox 3.1 will but the rest don't.

After spending many painful hours making drop shadows from sliced up images, PNGs, Active X, Javascript, tons of div tags and a lot of painful CSS I've finally settled on a few simple bits of CSS that are almost perfect.

Apart from Internet Explorer, the expectation here is that visitors will be using the most up to date version of their browser. Like the BBC and Yahoo have said, there's no point trying to support old versions of browsers unless there are a lot of people using them.

Safari

Safari has implemented support for the CSS 3 drop shadow properties, even though CSS 3 isn't finished yet. They have a "-webkit-" prefix on the property name.

.shadow {
    -webkit-box-shadow: 0.1em 0.1em 0.5em #948e93;
}

Firefox

This works in Firefox 3.0 (might work in 2.x - not tested ;). It's almost perfect, just enough to get you by.

Firefox has some properties that let you create multi-coloured borders. You can specify the colour of each one pixel line running in parallel, which make up the border. So, if you have a 6 pixel wide border you can specify 6 different colours to use. This way you can create a nice gradient that looks like a shadow. You can set different values for each side of the border, so you can simulate the light source coming from different directions.

It's not perfect and will probably need a little tweaking to get it looking reasonable. Adding a little rounding to the corners helps out a bit.

.shadow {
    /* start with a 6 pixel border in white (or whatever your background colour for the
       containing element is) */
    border:6px solid white;
    /* Now set the colours for each side of the border, working from the outside to the
       inside */
    -moz-border-top-colors: transparent transparent #eee #ddd #ccc #948e93;
    -moz-border-right-colors: #eee #ddd #ccc #bbb #aaa #948e93;
    -moz-border-bottom-colors: #eee #ddd #ccc #bbb #aaa #948e93;
    -moz-border-left-colors: transparent transparent #eee #ddd #ccc #948e93;
    /* add a little rounding */
    -moz-border-radius:8px;
}

Here's an example of the above css applied to an image (also with some padding set on the image)

image:ff-borders-as-dropshadow-demo.jpg

Internet Explorer

Internet Explorers 6, 7, and 8 have no support for CSS drop shadows and there aren't any tricks to pull it off with fancy borders. There are some DirectX transformations that can be applied though. Unfortunately you can't get any blur at the edges, or soft corners, but it does the job nicely enough. Designers will have to pay in beer if they want shadows in IE to look exactly like their PSD :-P.

These can be a little slow on older computers, so use sparingly.

.pre {
    background-color:white;
    /* For Internet Explorer 6 and 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#948e93', Direction=135, Strength=5)
            progid:DXImageTransform.Microsoft.Shadow(color='#948e93', Direction=225, Strength=3)
    ;
    /* For Internet Explorer 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#948e93', Direction=135, Strength=5)
                progid:DXImageTransform.Microsoft.Shadow(color='#948e93', Direction=225, Strength=3)"
    ;
}

Main Menu

Personal tools

Toolbox