CSS3 Pushing the Limits

Chapter 3

New Tools for Backgrounds and Borders

Thanks to CSS3, you can now take advantage of a much more advanced spectrum when it comes to control over your backgrounds. Moreover, in a considerable percentage of situations now, the background image has even been rendered redundant thanks to new CSS features such as rounded corners, drop shadows, and gradients, to name but a few.

If you've only recently broken into the industry, you may be understandably naïve to the pain once suffered by many a web developer who was tasked with implementing shadows, rounded corners, and fancy borders from a design into code. However, I feel most of you will be all too familiar with an age when image slices were the only real option, and I expect you let out a cold shudder as the memories of inefficiency and inconvenience resurfaced!

CSS3 has transformed what was often a tediously drawn-out process into the typing of one or two lines of code. This solution obviously means a more efficient process, a more maintainable layout, fewer HTTP requests, and better performance. Great stuff.

In this chapter I go from the more basic capabilities of CSS3 background and border properties to the cutting-edge features for the future, and finish by getting creative and experimental, truly pushing the limits of backgrounds in CSS.

More Control with CSS3 Backgrounds

To begin, I start the discussion with a few related properties that allow you to control the way your backgrounds are displayed in terms of scale ...