Box shadow's are a new feature to CSS3.
Thebox-shadow
property allows Front-Enders to easily implement multiple drop shadows (outer or inner) on box elements, specifying values for color, size, blur and offset.
The box-shadow
property can accept a comma-serparated list of shadows, each defined by 2-4 length values (specifying in order the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow), an optional color value and an optional ‘inset
‘ keyword (to create an inner shadow, rather than the default outer shadow).
Current Browser Support:
- Mozilla (Firefox)
- Webkit (Safari/Chrome/Konqueror)
- Opera and the IE9 Platform Preview
- although Mozilla and Webkit still require their respective
-moz-
and-webkit-
prefixes (note Mozilla Firefox 4.0+ no longer requires the-moz-
prefix).
Here are a few examples of implementations I'm using at FlyMuch.com
Code:-moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; box-shadow: 0 0 10px #000;Result:
Code:
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0; -moz-box-shadow: 1px 1px 2px #757575; box-shadow: 1px 1px 2px #757575;
Result:
Code:
-moz-box-shadow: 1px 1px 2px #757575 inset; box-shadow: 1px 1px 2px #757575 inset;
Result:
This one works great for input elements that you want to look like they are cut out of the page. It looks especially good when using with a matte background.
If you need more detail information check out: http://www.css3.info/preview/box-shadow/