HTML5 and CSS3, Second Edition

Shadows on Text

In addition to adding styles on elements, you can easily apply shadows to your text.

It works just like box-shadow.

h1{text-shadow:2px 2px 2px 0px #bbbbbb;}

You specify the x- and y-coordinate offsets, the amount of the blur, the spread, and

the color of the shadow.

This is the same approach we use to apply a drop shadow to an element. Shadows

on text create a neat effect, but they can make text harder to read if you make the

shadow too strong. Be sure your content is readable, above all else.

Rotating the Badge

We use CSS3 transformations to rotate, scale, and skew elements, much like

you can with vector-graphics programs such as Flash, Illustrator, or Inkscape.^4

This can help make elements stand out more and is another way to make a

web page not look so boxy. Let’s rotate the badge just a bit so it breaks out

of the straight edge of the banner. Again, we’re putting this within the #banner

selector:

css3_banner/stylesheets/style.css

-webkit-transform: rotate(-7.5deg);

-moz-transform: rotate(-7.5deg);

-ms-transform: rotate(-7.5deg);

-o-transform: rotate(-7.5deg);

transform: rotate(-7.5deg);

Rotation with CSS3 is pretty simple. If we provide the degree of rotation, the

rendering just works. All the elements contained within the element we rotate

are rotated as well. However, this time we can’t get away with the standard

rule. We have to apply all of the vendor prefixes to get this to work everywhere.

Rotating is just as easy as rounding corners, but don’t overuse it. The goal

of interface design is to make the interface usable. If you rotate elements that

hold a lot of content, ensure that your viewers can read the content without

turning their heads too far in one direction!

Precise Transformations with Matrix

Rotation is just one of the ways we can transform elements. We can scale,

skew, and even do 3D transformations. Even cooler, we can use the matrix()

function on transform to do more-controlled transformations of elements. To

4. http://www.w3.org/TR/css3-2d-transforms/#transform-property

report erratum • discuss

Working with Shadows, Gradients, and Transformations • 161

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