While rounded corners get a lot of attention, that’s just the beginning
of what we can do with CSS3. We can add drop shadows to elements to
make them stand out from the rest of the content, we can use gradients
to make backgrounds look more defined, and we can use transformations
to rotate elements. Let’s put several of these techniques together
to mock up a banner for the upcoming AwesomeConf, a trade show and
conference that AwesomeCo puts on each year. The graphic designer
has sent over a PSD that looks like Figure 8.3, on the next page. We
can do the badge, shadow, and even the transparency all in CSS. The
only thing we’ll need from the graphic designer is the background image
of the people.
The Basic Structure
Let’s start by marking up the basic structure of the page in HTML.
<div id=”conference”>
<section id=”badge”>
<h3>Hi, My Name Is</h3>
<h2>Barney</h2>
</section>
<section id=”info”>
</section>
</div>
We can style the basics with this:
# c o n f e r e n c e {
b a c k g r o u n d – c o l o r : #000;
w i d t h : 960px;
f l o a t : l e f t ;
background-image: u r l ( ‘ i m a g e s / a w e s o m e c o n f . j p g ‘ );
b a c k g r o u n d – p o s i t i o n : c e n t e r;
h e i g h t : 240px;
}
#badge{
t e x t – a l i g n : c e n t e r ;
w i d t h : 200px;
b o r d e r : 2px s o l i d b l u e ;
}
# i n f o {
m a r g i n : 20px;
p a d d i n g : 20px;
w i d t h : 660px;
h e i g h t : 160px;
}
#badge, # i n f o {
f l o a t : l e f t ;
b a c k g r o u n d – c o l o r : #fff;
}
#badge h2{
m a r g i n : 0;
c o l o r : red;
f o n t – s i z e : 40px;
}
#badge h3{
m a r g i n : 0;
b a c k g r o u n d – c o l o r : blue;
c o l o r : #fff;
}
Once we apply that style sheet to our page, we have our badge and
content region displayed side-by-side, as shown in Figure 8.4, on the
following page, so let’s start styling the badge.
Adding a Gradient
We can add definition to the badge by changing the white background
to a subtle gradient that goes from white to light gray. This gradient
will work in Firefox, Safari, and Chrome, but the implementation is
different for Firefox. Chrome and Safari use WebKit’s syntax, which
was the original proposal, whereas Firefox uses a syntax that’s close to
the W3C proposal. Once again, we’re using browser prefixes
#badge{
b a c k g r o u n d – i m a g e : – m o z – 1 i n e a r – g r a d i e n t (
t o p , # f f f , # e f e f e f
);
b a c k g r o u n d – i m a g e : – w e b k i t – g r a d i e n t (
l i n e a r , l e f t t o p , l e f t b o t t o m ,
c o l o r – s t o p C O , # f f f ) ,
c o l o r – s t o p C l , # e f e f e f )
);
b a c k g r o u n d – i m a g e : 1i n e a r – g r a d i e n t (
t o p , # f f f , # e f e f e f
);
Firefox uses the -moz-linear-gradient method, in which we specify the
starting point of the gradient, followed by the starting color, and, finally,
the ending color.
WebKit-based browsers let us set color stops. In our example, we only
need to go from white to gray, but if we needed to add colors, we’d just
need to add an additional color stop in the definition.
Adding a Shadow to the Badge
We can easily make the badge appear to be sitting above the banner by
adding a drop shadow. Traditionally, we’d do this shadow in Photoshop
by adding it to the image or by inserting it as a background image.
However, the CSS3 box-shadow property lets us quickly define a shadow
on our elements.
We’ll apply this rule to our style sheet to give the badge a shadow:
#badge{
-moz-box-shadow: 5px 5px 5px #333;
– w e b k i t – b o x – s h a d o w : 5px 5px 5px #333;
– o – b o x – s h a d o w : 5px 5px 5px #333;
box-shadow: 5px 5px 5px #333;
}
The box-shadow property has four parameters. The first is the horizontal
offset. A positive number means the shadow will fall to the right of the
object; a negative number means it falls to the left. The second parameter
is the vertical offset. With the vertical offset, positive numbers make
the shadow appear below the box, whereas negative values make the
shadow appear above the element.
The third parameter is the blur radius. A value of 0 gives a very sharp
value, and a higher value makes the shadow blurrier. The final parameter
defines the color of the shadow.
You should experiment with these values to get a feel for how they work
and to find values that look appropriate to you. When working with
shadows, you should take a moment to investigate how shadows work
in the physical world. Grab a flashlight and shine it on objects, or go
outside and observe how the sun casts shadows on objects. This use
of perspective is important, because creating inconsistent shadows can
make your interface more confusing, especially if you apply shadows to
multiple elements incorrectly. The easiest approach you can take is to
use the same settings for each shadow you create.
Rotating the Badge
You can use CSS3 transformations to rotate, scale, and skew elements
much like you can with vector graphics programs such as Flash, Illustrator,
or Inkscape.6 This can help make elements stand out a bit 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.
#badge{
– m o z – t r a n s f o r m : r o t a t e ( – 7 . 5 d e g ) ;
– o – t r a n s f o r m : r o t a t e ( – 7 . 5 d e g ) ;
– w e b k i t – t r a n s f o r m : r o t a t e ( – 7 . 5 d e g ) ;
– m s – t r a n s f o r m : r o t a t e ( – 7 . 5 d e g ) ;
t r a n s f o r m : r o t a t e ( – 7 . 5deg) ;
}
Rotation with CSS3 Is pretty simple. All we have to do Is provide the
degree of rotation, and the rendering just works. All the elements contained
within the element we rotate are rotated as well.
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 containing a lot of content, ensure that your viewers can read
the content without turning their heads too far In one direction!
Transparent Backgrounds
Graphic designers have used semitransparent layers behind text for
quite some time, and that process usually involves either making a
complete image in Photoshop or layering a transparent PNG on top of
another element with CSS. CSS3 lets us define background colors with
a new syntax that supports transparency.
When you first learn about web development, you learn to define your
colors using hexadecimal color codes. You define the amount of red,
green, and blue using pairs of numbers. 00 is “all off’ or “none,” and FF
is “all on.” So, the color red would be FF0000 or “all on for red, all off for
blue, and all off for green.”
CSS3 introduces the rgb and rgba functions. The rgb function works
like the hexadecimal counterpart, but you use values from 0 to 255 for
each color. You’d define the color red as rgb(255,0,0).
The rgba function works the same way as the rgb function, but it takes
a fourth parameter to define the amount of opacity, from 0 to 1. If you
use 0, you’ll see no color at all, because it’s completely transparent. To
make the white box semitransparent, we’ll add this style rule:
# i n f o {
b a c k g r o u n d – c o l o r : r g b a ( 2 5 5 , 2 5 5 , 2 5 5 , 0 . 9 5 ) ;
}
When working with transparency values like this, your users’ contrast
settings can sometimes impact the resulting appearance, so be sure to
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 a bit.
# i n f o {
m o z – b o r d e r – r a d i u s : 12px;
w e b k i t – b o r d e r – r a d i u s : 12px;
o – b o r d e r – r a d i u s : 12px;
b o r d e r – r a d i u s : 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 used in this section work fine in IE 9, but they’re
all possible with Internet Explorer 6, 7, and 8 too! We just have to use
Microsoft’s DirectX filters to pull them off. That means we’ll want to
rely on a conditional comment to load a specific IE-only style sheet.
We’ll also need to use JavaScript to create the section element so we
can style it with CSS since these versions of IE don’t recognize that
element natively.
<! — [ i f l t e IE 8]>
<script>
document.createElement(“section”) ;
</script>
<link rel=”stylesheet” href=”ie.css” type=”text/css” media=”screen”>
< ! [ e n d i f ] – – >
</head>
<body>
<div id=”conference”>
<section id=”badge”>
<h3>Hi, My Name Is</h3>
<h2>Barney</h2>
</section>
<section id=”info”>
</section>
</div>
</body>
</html>
The DirectX filters work in IE 6, 7, and 8, but in IE 8 the filters are
invoked differently, so you’ll be declaring each of these filters twice.
Let’s start by looking at how we rotate elements.
Rotation
We can rotate elements using these filters, but it’s not as easy as just
specifying a degree of rotation. To get the effect we want, we need to
use the Matrix filter and specify cosines and sines of the angle we want.
Specifically, we need to pass the cosine, the negative value of sine, the
sine, and the cosine again,7 like this:
f i l t e r : p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . M a t r i x(
s i z i n g M e t h o d = ‘ a u t o expand’,
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619222005157,
M22=0.9914448613738104
);
– m s – f i l t e r : ” p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . M a t r i x(
s i z i n g M e t h o d = ‘ a u t o expand’,
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619222005157,
M22=0.9914448613738104
) ” ;
Complicated? Yes, and more so when you look at the previous example
more closely. Remember that our original angle was negative 7.5
degrees. So, for our negative sine, we need a positive value, and our
sine gets a negative value.
Math is hard. Let’s make gradients instead.
Gradients
IE’s Gradient filter works just like the one in the standard, except that
you have to type a lot more characters. You provide the starting color
and the ending color, and the gradient just shows up.
f i I t e r : progi d:DXImageTransform.Mi c r o s o f t . g r a d i e n t (
s t a r t C o l o r S t r = # F F F F F F , endColorStr=#EFEFEF
);
– m s – f i l t e r : ” p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . g r a d i e n t(
s t a r t C o l o r S t r = # F F F F F F , endColorStr=#EFEFEF
Unlike the other browsers, you’re applying the gradient directly to the
element, rather than to the background-image property.
Let’s use this filter again to define the transparent background for our
info section.
Transparency
The Gradient filter can take extended hexadecimal values for the start
and end colors, using the first two digits to define the amount of transparency.
We can get very close to the effect we want with this code:
background: none;
f i l t e r :
p r o g i d:DXImageTransform.Mi c r o s o f t . g r a d i e n t (
s t a r t C o l o r S t r = # B B F F F F F F , endColorStr=#BBFFFFFF
– m s – f i l t e r : ” p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . g r a d i e n t(
s t a r t C o l o r S t r = ‘ # B B F F F F F F ‘ , EndColorStr=’#BBFFFFFF’
These eight-digit hex codes work very much like the rgba function,
except that the transparency value comes first rather than last. So,
we’re really looking at alpha, red, green, and blue.
We have to remove the background properties on that element to make
this work in IE 7. Now, if you’ve been following along trying to build this
style sheet up, you’ve noticed that it doesn’t actually work yet, but we
can fix that.
Putting It All Together
One of the more difficult problems with these IE filters is that we can’t
define them in pieces. To apply multiple filters to a single element, we
have to define the filters as a comma-separated list. Here’s what the
actual IE style sheet looks like:
# i n f o {
background: none;
f i l t e r :
p r o g i d:DXImageTransform.Mi c r o s o f t . g r a d i e n t (
s t a r t C o l o r S t r = # B B F F F F F F , endColorStr=#BBFFFFFF
);
– m s – f i l t e r : ” p r o g i d ¡ D X I m a g e T r a n s f o r m . M i c r o s o f t . g r a d i e n t(
s t a r t C o l o r S t r = ‘ # B B F F F F F F ‘ , EndColorStr=’#BBFFFFFF’
) ” ;#badge{
f i l t e r :
p r o g i d : D X I m a g e T r a n s f o r m . M i c r o s o f t . M a t r i x C
s i z i n g M e t h o d = ‘ a u t o expand’,
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619222005157,
M22=0.9914448613738104
),
p r o g i d:DXImageTransform.Mi c r o s o f t . g r a d i e n t (
s t a r t C o l o r S t r = # F F F F F F , endColorStr=#EFEFEF ),
progid:DXImageTransform.Mi c r o s o f t . S h a d o wC
c o l o r = # 3 3 3 3 3 3 , D i r e c t i o n = 1 3 5 , Strength=3
);
– m s – f i l t e r : ” p r o g i d ¡ D X I m a g e T r a n s f o r m . M i c r o s o f t . M a t r i xC
s i z i n g M e t h o d = ‘ a u t o expand’,
M11=0.9914448613738104,
M12=0.13052619222005157,
M21=-0.13052619222005157,
M22=0.9914448613738104
),
p r o g i d:DXImageTransform.Mi c r o s o f t . g r a d i e n t (
s t a r t C o l o r S t r = # F F F F F F , endColorStr=#EFEFEF ),
progid:DXImageTransform.Mi c r o s o f t . S h a d o wC
c o l o r = # 3 3 3 3 3 3 , D i r e c t i o n = 1 3 5 , Strength=3
) ” ;
That’s a lot of code to get the desired result, but it shows that it is
possible to use these features. If you look at Figure 8.5, you’ll see we
got pretty close. All we have to do now is round the corners on the infosection, and you can refer to Rounding Rough Edges, on page 146 to
see how to do that.
Although these filters are clunky and a little bit quirky, you should still
investigate them further in your own projects because you’ll be able to
provide a similar user experience to your IE users.
Remember that the effects we explored in this section are all 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 page in a readable
manner.