Drop shadows and inner shadows are some of the effects I learned to apply using Photoshop’s Blending options. But now, since CSS3 “hit the charts”, you don’t need Adobe’s design tool to add a drop shadow or an inner shadow to a box.
Nowadays, the cool thing is that you create beautiful CSS3 shadows without actually needing Photoshop anymore.
box-shadow property allows you to add multiple shadows (outer or inner) on box elements. To do that you must specify values as: color, size, blur and offset.
Not at all, here’s an quick example:
This CSS declaration will generate the following shadow:
A positive value for the horizontal offset draws a shadow that is offset to the right of the box, a negative length to the left.
The second length is the vertical offset. A positive value for the vertical offset basically offsets the shadow down, a negative one up.
You’re not allowed to use negative values for blur radius. The larger the value, the more the shadow’s edge is blurred, as it can be seen above.
Spread distance positive values cause the shadow shape to expand in all directions by the specified radius. Negative ones cause the shadow shape to contract.
The color is the color of the shadow.
insetkeyword (missing above), if present, changes the drop shadow from an outer shadow to an inner shadow
The above theory it’s just a small amount, if you want to read more, than be my guest and check the W3C specs.
Enough theory, let’s see some stuff!
Now let’s see how can you take advantage of this wonderful CSS3 feature. Below I’ll show you how to enhance your designs with the coolest box-shadow techniques!
Add depth to your body
Here are the articles that inspired me, and not only:
Try spicing up shadows with RGBa color. The box-shadow property can be used using CSS3 RGBa colors to create shadows with differing levels of opacity. If your browsers supports the
box-shadow property, then it will definitively support the RGBa color mode.
Use multiple shadows in one CSS declaration:
- Internet Explorer 9/10
- Firefox (from 3.5)
- Opera (from 10.5)
You should start using these techniques today and I mean it. Why’s that? Because you can, as
box-shadow will not break your layout on older browsers.
Put me in, coach!