With most modern browsers starting to support CSS3 standards, designers and developers now have access to some pretty cool styling tools that were once limited to Photoshop. Commonly used design elements such as shadows, rounded corners, and gradients can now be rendered in the browser without need for custom images. There are still some cross-browser issues that have to be taken into account, but the overall implementation is still very simple.

Box Shadows

Box Shadows are an easy way to add depth to your design but up until now they’ve required the use of images, extra <div>s, and the z-index property. Now you can add your own shadows to any block element with just a few lines of CSS.

#anyBlock {
	/* Box shadow */
	-moz-box-shadow: 2px 2px 3px 1px #AAA;
	-webkit-box-shadow: 2px 2px 3px 1px #AAA;
	box-shadow: 2px 2px 3px 1px #AAA;
}

The pixel values represent horizontal offeset (positive values move shadow right), vertical offset (positive values move shadow down), blur radius, and spread distance. The blur radius and spread distance values can be omitted if so desired. The final value dictates the color of the shadow in either hexadecimal #AAAAAA format or rgb(170,170,170) format. Some browsers also support the rgba(170,170,170,0.5) format which adds an opacity value. Our example box looks like this so far:

Rounded Corners

Another design element that has become very popular in the “Web 2.0” design generation is rounding the corners on block elements to give a smoother, cooler feel. This can be done with CSS3 using the border-radius attribute either to individual corners or all at once.

#anyBlock {
	/* All corners */
	-moz-border-radius: 15%;
	border-radius: 15%;
}

#anyBlock {
	/* Top left corner */
	-moz-border-radius-topleft: 50px 100px;
	border-top-left-radius: 50px 100px;
	/* Top right corner */
	-moz-border-radius-topright: 100px 50px;
	border-top-right-radius: 100px 50px;
	/* Bottom right corner */
	-moz-border-radius-bottomright: 50px 100px;
	border-bottom-right-radius: 50px 100px;
	/* Bottom left corner */
	-moz-border-radius-bottomleft: 100px;
	border-bottom-left-radius: 50px;
}

Notice that you still have to account for the Mozilla prefix -moz-, but for the most part it is still very simple. The pixel and percentage values determine how far away from the corner the rounding will begin. When two values are given, the first represents horizontal offset and the second represents vertical offset. The is also a shorthand method for specifying all four corners at once:

#anyBlock {
	/* Shorthand for all corners */
	border-radius: 50px 100px 50px 100px / 100px 50px 100px 50px;
}

The first four values describe the horizontal offset for the top-left, top-right, bottom-right, and bottom-left corners. The four values after the / describe the vertical offset. By varying the horizontal and vertical offsets on each corner you can come up with some really unique shapes like this:

Gradients

One last design element that is already being implemented in modern browsers is the color gradient. It is another option that allows you to add depth and detail to your websites without creating inflexible background images. Once again, Webkit browsers (Chrome & Safari) and Mozilla browsers (Firefox) both support CSS3 gradients but unfortunately not under the same standards.

#anyBlock {
	/* Non-CSS3 browsers */
	background: #EEEEEE;
	/* Chrome/Safari */
	background: -webkit-gradient(linear, 0 0, 0 100%,
                             from(#EEEEEE), to(#AAAAAA));
	/* Firefox */
	background: -moz-linear-gradient(top, #EEEEEE, #AAAAAA);
}

With the Webkit gradient we are defining five parameters: type of gradient (linear), coordinates (x, y) of starting position, coordinates (x, y) of ending position, starting color, and ending color. The Mozilla gradient defines the type of gradient -linear- within the vendor extension, then requires a starting position (top, bottom, or -Xdeg), a starting color, and an ending color. You can add multiple colors by using color-stops:

#anyBlock {
	/* Non-CSS3 browsers */
	background: #EEEEEE;
	/* Chrome/Safari */
	background: -webkit-gradient(linear, 0 0, 0 100%,
        from(#EEEEEE), color-stop(#CCCCCC), color-stop(#AAAAAA));
	/* Firefox */
	background: -moz-linear-gradient(top, #EEEEEE,
        #CCCCCC 50%, #DDDDDD 75%, #EEEEEE 100%);
}

Finished Product

So let’s take a look at one final example to see how everything works together.

#anyBlock {
	/* Box shadow */
	-moz-box-shadow: 2px 2px 3px 1px #AAA;
	-webkit-box-shadow: 2px 2px 3px 1px #AAA;
	box-shadow: 2px 2px 3px 1px #AAA;
	/* Rounded corners */
	-moz-border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
	border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
	/* Background gradient */
	background: #FFFFFF;
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#FF0000), to(#AA0000));
	background: -moz-linear-gradient(top, #FF0000, #AA0000);
}

Which gives us a pretty snazzy looking box that uses nothing but CSS3!