Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Enhancing Boxes with CSS3 Bling

  • Print
  • + Share This
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.

Table 4.1 Browser Support Matrix for CSS3 “Bling Box” Features

Browser

RGBA/HSLA

Border-radius

Box-shadow

Multiple backgrounds

Gradients

Background-size

Border-image

Background-clip

Box-decoration-break

Opera

version 10.5

version 10.5

version 10.5

version 10.5

11.6 with -o-

version 10.5

11 with -o-

version 10.5

version 10.5

Firefox

version 3

3 with -moz-, 4 prefixless

3.5 with -moz-, 4 prefixless

version 3.6

3.6 with -moz-

version 4

3.5 with -moz-

version 4

Exact details unknown

Safari

version 3.1

3.1 with -webkit-, 5 prefixless

3.1 with -webkit-, 5 prefixless

version 3.1

5.1 with -webkit-

version 5

3.1 with -webkit-

version 5

Exact details unknown

Chrome

version 4

4 with -webkit-, 5 prefixless

4 with -webkit-, 10 prefixless

version 4

10 with -webkit-

version 4

15 with -webkit-

version 4

Exact details unknown

Internet Explorer

version 9

version 9

version 9

version 9

10 with -ms- *

version 9

10 with -ms-

version 9

Exact details unknown

iOS

version 3.2

version 4

3.2 with -webkit-, 5 prefixless

version 3.2

5.0 with -webkit-

version 5

3.2 with -webkit-

version 5

Exact details unknown

Android

version 2.1

2.1 with -webkit-, 2.2 prefixless

2.1 with -webkit-

version 2.1

4 with -webkit-

version 2.1

2.3 with -webkit-

version 2.1

Exact details unknown

Opera Mobile

version 10

version 11

version 11

version 10

11.5 with -o-

version 10

11 with -o-

version 10

Exact details unknown

Opera Mini

version 5

no

no

version 5

no

version 5.0

no

version 5

Exact details unknown

*IE10 platform preview 6 saw support without the prefix

  • + Share This
  • 🔖 Save To Your Account