CHAPTER 8
Eye Candy
As web developers, we’re always interested in making our user interfaces a
little more eye-catching, and CSS3 provides quite a few ways for us to do that.
We can use our own custom fonts on our pages. We can create elements with
rounded corners and drop shadows. We can use gradients as backgrounds,
and we can even rotate elements so things don’t look so blocky and boring
all the time. We can do all of these things without resorting to Photoshop or
other graphics programs, and this chapter will show you how. We’ll start off
by softening up a form’s appearance by rounding some corners. Then we’ll
construct a prototype banner for an upcoming trade show, and add shadows,
rotations, gradients, and opacity. Then we’ll talk about how to use CSS3’s
@font-face feature so we can use nicer fonts on the company blog. We’ll wrap
up with learning how to use CSS to do some animations.Specifically, we’ll explore the following CSS3 features in this chapter:
border-radius [border-radius:10px;]
Rounds corners of elements. [C4, F3, S3.2, IE9, O10.5]RGBa support [background-color:rgba(255,0,0,0.5);]
Uses RGB color instead of hex codes, along with transparency. [C4, F3.5,
S3.2, IE9, O10.1]box-shadow [box-shadow:10px 10px 5px #333;]
Creates drop shadows on elements. [C3, F3.5, S3.2, IE9, O10.5]Rotation [transform:rotate(7.5deg);]
Rotates any element. [C3, F3.5, S3.2, IE9, O10.5]Gradients [linear-gradient(top,#fff, #efefef);]
Creates gradients for use as images. [C4, F3.5, S4]Download from Wow! eBook <www.wowebook.com> report erratum • discuss