HTML5 and CSS3, Second Edition

css3_banner/stylesheets/style.css

#info{

background-color:rgba(255,255,255,0.95);

}

When working with transparency values like this, your users’ contrast settings

can sometimes impact the resulting appearance, so experiment with the value

and check on multiple displays to ensure you get a consistent result.

While we’re working with the info section of our banner, let’s round the

corners.

css3_banner/stylesheets/style.css

#info{

background-color:rgba(255,255,255,0.95);

➤ border-radius:12px;

}

With that, our banner looks pretty good in Safari, Firefox, and Chrome. Now

let’s implement a style sheet for Internet Explorer.

Falling Back

The techniques we’ve used in this section work fine in Internet Explorer 10

and other modern browsers, but they’re not going to work in Internet

Explorer 8 and 9. We can emulate them somewhat with Microsoft’s DirectX

filters, but the filters tend to be CPU intensive, interfere with other function-

ality, and end up making for a horrible user interface. You’re better off not

using a fallback solution for this. Remember that the things we did in this

section are presentational. When we created the initial style sheet, we made

sure to apply background colors so that text would be readable. Browsers

that cannot understand the CSS3 syntax can still display the content in a

readable manner.

Of course, if you’re the curious sort and want to explore on your own, you

can look at the file css3_banner/stylesheets/ie.css in the book’s code download to

see an attempt to make things work in Internet Explorer 8 and earlier. But

be warned—it’s far from perfect, and the syntax for the fallback solutions is

quite complex. Worst of all, the end result is disappointing.

You could, instead, use a conditional style sheet to apply a PNG background

to the container element. But ask yourself if it’s worth the duplication of effort.

Transformations, gradients, and shadows are nice, but people come to web

pages to read the content. The right font can make all the difference, and

CSS3 gives us more control over the fonts we can use. Let’s see how.

report erratum • discuss

Working with Shadows, Gradients, and Transformations • 163

Download from Wow! eBook <www.wowebook.com>