This is a technique I discovered by accident when creating theDrupal Sunset theme.
The purpose of the box-shadow property is self-explanatory – it creates a shadow around an element.
I’ve used box-shadow quite a few times in the past and it is an impressive addition to the CSS stable. I’ve tried to find an alternative for IE – using either filters or JavaScript – but I haven’t found one that works properly yet.
Here’s an example of the code:
-webkit-box-shadow:5px 5px 5px #999999;
-moz-box-shadow: 5px 5px 5px #999999;
box-shadow:5px 5px 5px #999999;
The three measurements in order are the horizontal offset, the vertical offset and the blur radius.
Here’s how this would look in Firefox, Chrome or Safari – the only browsers to read this CSS3 feature so far:
It produces an attractive grey border.
Lets change the code:
-webkit-box-shadow:0 0 15px #ffffff;
-moz-box-shadow: 0 0 15px #ffffff;
box-shadow:0 0 15px #ffffff;
Reducing the horizontal and vertical offset to zero, increasing the blur radius and changing the shadow colour to white so that there is a more striking contrast between the foreground and background creates this:
As you can see it creates quite a pleasant glow and it degrades gracefully as the browsers that don’t recognise box-shadow merely see a border.