/ CSS3

Box-shadow, one of CSS3′s coolest features

Box shadow's are a new feature to CSS3.

The box-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/

 

 

 

 


Corey Snyder

Corey Snyder

Senior Front-End Engineer for Aver Inc.. I have independently developed & released multiple video-games. I play Ice Hockey, I race FPV Drones, and I love my Subaru WRX STI.

Read More