Sunday, 29 July 2012

Multiple Shadows in CSS3

You don’t have to limit yourself to a single shadow—text-shadow’s syntax supports adding multiple shadows to a text node. Just supply extra values to the property, using commas to separate them, like so:
E { text-shadow: value, value, value; }
The CSS for these examples is shown here. The first example has a class of one, and the second has a class of two. Note that I’ve indented them for clarity.
.one {
    0 -2px 3px #FFF,
    0 -4px 3px #AAA,
    0 -6px 6px #666,
    0 -8px 9px #000;
.two {
    color: #FFF;
    0 2px rgba(0,0,0,0.4),
    0 4px rgba(0,0,0,0.4),
    0 6px rgba(0,0,0,0.4),
    0 8px 0 rgba(0,0,0,0.4);
I’ve kept the x-offset at 0 while increasing the y-offset’s negative value from –2px to –8px. The blur-radius increases from 3px to 9px, and the color gets gradually darker, creating a ghostly pale outline behind the characters, which becomes a darker shadow as it gets further from the characters. In the second example, the x-offset also remains consistent, but this time the y-offset increases its value positively. Because the blur-radius isn’t specified, it stays at zero. Here I’ve used the rgba() color function so the color stays the same but is partially transparent, creating an overlapping effect. Although the value changes are fairly small, the visual difference between the two elements is quite profound.