Chapter 10. Borders and backgrounds with CSS3

 

This chapter covers

  • Adding drop shadows and rounded corners
  • New ways to apply and use background images
  • Creating gradients with CSS

CSS3 makes the traditional background image approaches more flexible and provides declarative options for drop shadows, rounded corners, and gradients. Solutions that have involved images, JavaScript, and extra markup can be replaced with simple HTML and CSS.

Drop shadows with CSS3

The pseudo-3D effect provided by drop shadows is a popular design approach. In the past, designers have gone to great lengths to add this visual effect, but CSS3 saves a lot of time and resources by having the functionality built in.

CSS3 defines two types of shadow: box and text. They use a similar syntax:

text-shadow: rgb(0,0,0) 3px 3px 3px;
box-shadow: rgb(0,0,0) 3px 3px 3px;

A basic shadow, in either case, is defined by four values:

<color> <offset-x> <offset-y> <blur-radius>

Box shadows

Browser support quick check: box-shadow
 

Standard

Prefixed
10.0 5.0
4.0 3.5
9.0 -
10.5 -
5.0 3.0
Simple Box Shadows

Without the optional blur-radius, a box shadow isn’t much different from a border. Here’s an example that only sets an offset-x:

box-shadow:
 rgb(0,0,0) 12px 0px;

And here’s a plain offset-y:

box-shadow:
 rgb(0,0,0) 0px 12px;

Adding a blur-radius by itself creates a more shadow-like effect, even without any offsets:

Easy rounded corners

sitemap