Adding drop shadows and inner shadows are some of the effects I first learned to apply by using Photoshop’s Blending options. But now, with the CSS box-shadow feature, you don’t need Adobe’s design tool anymore in order to add a drop shadow or an inner shadow to an element.
box-shadow property allows you to add multiple shadows, outer or inner, on rectangle elements. To do that you must specify values as horizontal and vertical offsets, blur radius, spread distance, inset and color.
A simple CSS
Rocket science? Not at all, here’s a quick example:
The above 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.
coloris the color of the cast shadow.
insetkeyword, missing in the image 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, then check out the full W3C specs.
Enough theory, let’s see how can you take advantage of this wonderful CSS
box-shadow feature. Below I’ll show you how to enhance your designs with the coolest CSS
Add depth to your body
Simple drop shadows with pseudo-elements
Use the RGBA color model
Try spicing up shadows with using the RGBA color model. The
box-shadow property can be used using 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 model.
Add multiple effects separated by commas
Also, you can use multiple shadow effects in one CSS declaration, as seen below:
box-shadow property that helps to display an inner or outer shadow effect to elements has great browser support that includes:
- Internet Explorer 9 and above
- Firefox 3.5 and above
- Safari & Chrome
- Opera 10.1 and above
- and more
Put me in, coach!