This chapter is from the book

This chapter is from the book

One of the overriding general problems that CSS3 works toward solving is reducing the number of images (and the inflexibility of those images) you are called upon to use to prettify your websites. This chapter groups together all such CSS3 features (like box shadows, gradients, and border images) that have strong browser support under the moniker “bling boxes.”

In this chapter you’ll learn new ways to (tastefully) add graphical effects to your sites programmatically without having to use millions of background images. You’ll start by looking at some basic isolated examples and then advance to more involved implementations. So put on your sequined disco clothes, jangle your change, and prepare to strut your funky stuff.

A Bright Future with CSS3 Bling

Most of you will have a good idea of the kinds of CSS3 features I’m referring to by bling boxes: Drop shadows, rounded corners, linear and radial gradients, and alpha transparency are exemplary examples. Also, a number of properties still require the use of images but allow you to use them in a more flexible way!

The advantages of such features should be obvious, but just in case, let’s briefly review them before moving on:

Less downloading. Programmatically creating bling effects allows you to decrease the number of images you need for your designs and therefore the number of HTTP requests and download sizes involved.

Easier maintenance of graphical effects. You can now vary colors, dimensions, and so on by just changing some CSS syntax rather than having to open Photoshop and manually alter image files.

Less spaghetti code. Back in the day, so-called “bulletproof CSS” solutions typically involved multiple images and multiple nested <div>s—a double disappointment of extra complexity of design time and unsemantic cruft code. If you wanted to create bulletproof rounded corners on a content box to allow it to flex horizontally and vertically, you’d need three extra nested <div>s for holding all the necessary images. If you had only one container available, you’d have to settle for an inflexible, one-size box, which was usually rendered useless when content changed. CSS3 features, such as rounded corners and multiple background images, change all this.

Fewer Photoshop ninja skills required. Creating such bling effects in code is a lot easier and more intuitive for non-Photoshop experts.

Of course, the main disadvantages at this time are that some of these CSS3 features are not supported in older browsers (usually meaning Internet Explorer 6–8), and they are often used with vendor prefixes. Table 4.1 gives you an at-a-glance reference of browser support for the properties covered in this chapter.