|
---
Standard Shadow
.standard-shadow { box-shadow: 1px 1px 1px rgba(0,0,0,0.5); }
The above code would generate a shadow like this:
You have your first 2 values which give the horizontal and vertical
offsets of the shadow, a third value which sets the amount of blur you
want to apply and lastly a color (in which case we use an rgba() value for a half opacity black). Box-shadow is supported
on every modern browser, but if you are so incredibly inclined, a
-webkit and -moz prefix would come in handy for full support of those
older browsers. Now, you may think "Oh, well that's nice. Now I can make
a shadow, woohoo" but things aren't over just yet!
Glow
.glow-shadow { box-shadow: 0 0 5px 1px #09F; }
Look at that! We adjust the offset so that the "shadow" is basically
centered on the element. We expanded the blur radius to 5px, added a new
value to 1 px, that value being "spread". This gives a sort of extra
"thickness" to the shadow.
Another Border
.border-shadow { box-shadow: 0 0 0 2px #F00; }
Keeping the 0 x and y offset, but lowering the blur to 0 will
basically use the spread value as the thickness for an extra border!
This can come in handy when an input has the wrong info, or you want to
add a border to an element without affecting it's size and position
(shadows, unlike borders, don't shift or add to an element's width).
Multiple Shadow
.multi-shadow { box-shadow: 0 0 5px 1px #09F, 0 0 0 2px #F00; }
Interestingly enough, one of the neat features of box-shadow is the
ability to stack them! By separating each set of values with a comma,
you can add multiple shadows to a single element. This technique has
been used to make some crazy things.
Inset Shadow
.inset-shadow { box-shadow: inset 1px 1px 4px #000; }
Last, but not least, by adding an "inset" value before all our other
values, we can have the shadow radiate from the inside (a la Photoshop's
inner shadow/glow) instead of out. This effect comes in handy for a
pressed button or to add an inner glow to an element.
And those are the basics of the box-shadow! There's still more you can do too; here are a few more fancy tricks you can do! In particular, there are extra examples of what that optional "spread" value can do.
|