CSS3 box-shadow property
This post outlines the new CSS3 box-shadow property and what you can do with it in your designs.
Table Of Contents
Description
The box-shadow property allows drop shadows (as well as inner shadows) on block elements.
It is important to note that using box-shadow alone is not supported in any browser yet because CSS3 is not finalized is not even in the CSS3 specification anymore. Currently to get it working in WebKit browsers (Safari, Chrome) you need to use -webkit-box-shadow and for Mozilla browsers like Firefox you must use -moz-box-shadow.
Examples
Box with a normal drop shadow
box-shadow: 3px 3px 3px #666; -moz-box-shadow: 3px 3px 3px #666; -webkit-box-shadow: 3px 3px 3px #666;
This box should have a 3px drop shadow.
Box with an equidistant drop shadow
box-shadow: 0 0 6px #666; -moz-box-shadow: 0 0 6px #666; -webkit-box-shadow: 0 0 6px #666;
This box should have a drop shadow on all sides.
Box with an inset shadow
box-shadow: inset 3px 3px 3px #666; -moz-box-shadow: inset 3px 3px 3px #666; -webkit-box-shadow: inset 3px 3px 3px #666;
This box should have a 3px inner shadow.
Box with a solid 2px drop shadow
box-shadow: 2px 2px 0 2px #666; -moz-box-shadow: 2px 2px 0 2px #666; -webkit-box-shadow: 2px 2px 0 2px #666;
This box should have a 2px offset drop shadow that is solid.
Box with a reverse 3px drop shadow
box-shadow: -3px -3px 3px #666; -moz-box-shadow: -3px -3px 3px #666; -webkit-box-shadow: -3px -3px 3px #666;
This box has a reverse 3px offset drop shadow.
Possible Values:
| Name | Description |
|---|---|
inset |
If assigned, the outer shadow becomes a inner shadow. |
| horizontal offset | The distance to offset the shadow horizontally, can be positive or negative. |
| vertical offset | The distance to offset the shadow vertically, can be positive or negative. |
| blur radius | The distance to blur the shadow. |
| spread radius | The distance the radius is pushed away from the box. |
| shadow color | The color code to use for the shadow (e.g. “#fff”, or “white”, or “rgb(255,255,255), or even “rgba(255,255,255,.6)”). |
Browser Support
Supported Browsers
- Firefox (since version 3.5)
- Safari (since version 3.1)
- Chrome (since first version).
Unsupported Browsers
- Internet Explorer
- Opera (rumored to be supported in version 10)
Conclusion
I hope the above information was useful. If you want to see more examples of this property, want to see other tutorials, or have a question or comment please leave a message below.
Cheers!
