Explanation: This CSS declaration (box-shadow) allows you to apply shadows to boxes/ objects on a page without relying on images. Can add nice effects. More eye candy than user interface enhancement.
Example CSS code:
For this particular class, we specify the x offset (10px), the y offset (9px), the strength of the blur (8px), and the color (#000 or black). Note both -webkit and -moz prefixes should be employed at the time of this writing. there is an optional inset value if you want the shadow within the object.
.shadow {
-webkit-box-shadow:10px 9px 8px #000;
-moz-box-shadow:10px 9px 8px #000;
//-webkit-box-shadow:inset 10px 10px #000;
//-moz-box-shadow:inset 10px 10px #000;
box-shadow: 10px 9px 8px #000;
}
Example page (view the source code): http://learning-html5.info/CSS3/CSS_Shadows.html (will work in most modern browsers). Various shadow examples are provided on the page.
References:
Loading ...