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 ...

Get CSS3 Pushing the Limits now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.