This is part 4 in a series of posts about CSS3 and the advances it will make to our browsing experience. My last post discussed multi-column layouts. In this post I’ll be discussing box shadows.
Have you ever wanted to add a drop shadow to a div and had to add background images just to get that nice effect? With box shadows, there is no need and it’s so easy to adjust. Below you will see an example of a div with a 2px drop shadow on it.
The code for the above picture:
#content {
padding: 8px;
color: #fff;
-webkit-box-shadow: 1px 2px 2px #333;
-moz-box-shadow: 1px 2px 2px #333;
background: rgba(0, 0, 0, .50);
}
This property is great because it can have multiple values: horizontal offset, vertical offset, blur radius and shadow color. Let’s break down the code.
padding: 8px;
Padding around the text.
color: #fff;
Color of the text.
-webkit-box-shadow: 1px 2px 2px #333;
Tells webkit browsers to apply the box-shadow style with horizontal offset of 1px, vertical offset of 2px, blur radius of 2px, and shadow color of #333.
-moz-box-shadow: 1px 2px 2px #333;
Tells mozilla browsers to apply the box-shadow style with horizontal offset of 1px, vertical offset of 2px, blur radius of 2px, and shadow color of #333.
background: rgba(0,0,0, .50);
Give the background its color with some transparency. For more information about RGBA, read my other entry.
Below is another example.
The code for the above is as follows:
-moz-box-shadow: -10px -10px 0px #000;
-webkit-box-shadow: -10px -10px 0px #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 5px 5px 5px 15px;
background-color: #ccc;
Browser support: box-shadow is currently supported only by Webkit-based and Mozilla-based browsers.
As you can see, the box-shadow property will really come in handy. In my next posting I will discuss the usage of the @font-face attribute, allowing for designers to use their custom fonts on any Web site.
Tags: cascading style sheets, css3, drop shadow, structured markup, website design
