As we mentioned back in Chapter 1, styling the new HTML5 elements in older versions of Internet Explorer requires a snippet of JavaScript called an HTML5 shiv. If you’re using the Modernizr library detailed in Appendix A (which includes a similar piece of code), you’ll be fine.

Even with this JavaScript in place, though, you’re not quite ready to roll. IE6 through 8 will now be aware of these new elements, but they’ll still lack any default styles. In fact, this will be the case for previous versions of other browsers as well; while they may allow arbitrary elements, they’ve no way of knowing, for example, that article should be block-level and mark should be inline. Because elements render as inline by default, it makes sense to tell these browsers which elements should be block-level.

This can be done with the following simple CSS rule:

article, aside, figure, footer, header, hgroup, nav, section { 
  display:block; 
}

With this CSS and the required JavaScript in place, all browsers will start off on an even footing when it comes to styling HTML5 elements.

Selectors are at the heart of CSS. Without selectors to target elements on the page, the only way to modify the CSS properties of an element would be to use the element’s style attribute and declare the styles inline. This, of course, is ugly, awkward, and unmaintainable. So we use selectors. Originally, CSS allowed the matching of elements by type, class, and/or id. This required adding class and id attributes to our markup to create hooks and differentiate between elements of the same type. CSS2.1 added pseudo-elements, pseudo-classes, and combinators. With CSS3, we can target almost any element on the page with a wide range of selectors.

In the descriptions that follow, we’ll be including the selectors provided to us in earlier versions of CSS. They are included because, while we can now start using CSS3 selectors, all the selectors from previous versions of CSS are still supported. Even for those selectors that have been around for quite some time, it’s worth going over them here, as browser support for many of them has only just reached the point of making them usable.

#main > div {
  float: left;
  overflow:hidden;
}

a[href^=http]:after {
  content: " (" attr(href) ")";
}

a[href$=pdf] {
  background: transparent url(pdficon.gif) 0 50% no-repeat;
  padding-left: 20px;
}
a[href$=pdf]:after {
  content: " (PDF)";
}

::-moz-selection{ 
  background: #484848;
  color:#fff;
} 
::selection { 
  background:#484848; 
  color:#fff; 
}

We know you’re probably chomping at the bit to put the really cool stuff from CSS3 into practice, but before we do there’s one more detour we need to take. CSS3 brings with it support for some new ways of describing colors on the page. Since we’ll be using these in examples over the next few chapters, it’s important we cover them now.

Prior to CSS3, we almost always declared colors using the hexadecimal format (#FFF, or #FFFFFF for white). It was also possible to declare colors using the rgb() notation, providing either integers (0–255) or percentages. For example, white is rgb(255,255,255) or rgb(100%,100%,100%). In addition, we had access to a few named colors, like purple, lime, aqua, red, and the like. While the color keyword list has been extended in the CSS3 color module to include 147 additional keyword colors (that are generally well supported), CSS3 also provides us with a number of other options: HSL, HSLA, and RGBA. The most notable change with these new color types is the ability to declare semitransparent colors.

form {
  …
  background: rgba(0,0,0,0.2) url(../images/bg-form.png) no-repeat 
↵bottom center;
}

div.halfopaque {
  background-color: rgb(0, 0, 0);
  opacity: 0.5;
  color: #000000;
}

div.halfalpha{
  background-color: rgba(0, 0, 0, 0.5);
  color: #000000;
}

Now that we’ve been through all the available CSS selectors and new color types, we’re ready to really start styling.

For the rest of the chapter, we’ll style a small section of The HTML5 Herald front page; this will demonstrate how to add rounded corners, text shadow, and box shadow.

In the right-hand sidebar of The HTML5 Herald’s front page are a series of whimsical advertisements—we marked them up as article elements within an aside way back in Chapter 2. The first of these is an old “Wanted” poster-style ad, advising readers to be on the look out for the armed and dangerous HTML5 and CSS3. The ad’s final appearance is depicted in Figure 6.1.

Figure 6.1. Our “Wanted” ad

You’ll notice that the dark gray box in the center of the ad has a double border with rounded corners, as well as a three-dimensional “pop” to it. The text that reads “<HTML5> & {CSS3}” also has a shadow that offsets it from the background. Thanks to CSS3, all these effects can be achieved with some simple code, and with no reliance on images or JavaScript. Let’s learn how it’s done.

The markup for the box is simply <a href="…">&lt;HTML5&gt; &amp; {CSS3}</a>. Other than the HTML entities, it’s as straightforward as it gets!

Before we can apply any styles to it, we need to select it. Of course, we could just add a class attribute to the markup, but where’s the fun in that? We’re here to learn CSS3, so we should try and use some fancy new selectors instead.

Our box isn’t the only a element on the page, but it might be the only a immediately following a paragraph in the sidebar. In this case, that’s good enough to single out the box. We also know how to add some pre-CSS3 styling for the basics, so let’s do that:

aside p + a {
  display: block;
  text-decoration: none;
  border: 5px double;
  color: #ffffff; 
  background-color: #484848; 
  text-align: center;
  font-size: 28px;
  margin: 5px 5px 9px 5px;
  padding: 15px 0;
  position: relative;
}

Not bad! As Figure 6.2 shows, we’re well on our way to the desired appearance. This will also be the appearance shown to IE8 and below except for the font styling, which we’ll be adding in Chapter 9.

Figure 6.2. The basic appearance of our ad link, which will be seen by older browsers

Remember that IE6 lacks support for the adjacent sibling selector—so if you need to provide support to that browser, you can use a more common id or class selector.

This presentation is fine, and should be acceptable—no need for web pages to look identical in all browsers. Users with older versions of Internet Explorer will be unaware that they’re missing anything. But we can still provide treats to better browsers. Let’s go ahead and add a bit of polish.

The border-radius property lets you create rounded corners without the need for images or additional markup. To add rounded corners to our box, we simply add:

-moz-border-radius: 25px;
border-radius: 25px;

Safari, Chrome, Opera, IE9, and Firefox 4 support rounded corners without a vendor prefix (just border-radius). We still need to include the vendor-prefixed -moz-border-radius for Firefox 3.6 and earlier, though by the time you read this those versions may have dwindled enough for it to be no longer necessary.

Figure 6.3 shows what our link looks like with the addition of these properties.

Figure 6.3.  Adding rounded corners to our link

The border-radius property is actually a shorthand. For our a element, the corners are all the same size and symmetrical. If we had wanted different-sized corners, we could declare up to four unique values—border-radius: 5px 10px 15px 20px;, for example. Just like padding, margin, and border, you can adjust each value individually:

border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 40px;

The -moz- prefixed form for older versions of Firefox uses a slightly different syntax:

-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 40px;

The resulting off-kilter box is shown in Figure 6.4.

Figure 6.4.  It’s possible to set the radius of each corner independently

When using the shorthand border-radius, the order of the corners is top-left, top-right, bottom-right, and bottom-left. You can also declare only two values, in which case the first is for top-left and bottom-right, and the second is for top-right and bottom-left. If you declare three values, the first refers to top-left, the second sets both the top-right and bottom-left, and the third is bottom-right.

We recommend using the shorthand—because it’s much shorter, and because until old versions of Firefox no longer require support, it avoids the need to use two different syntaxes.

You can also create asymmetrical corners with a different radius on each side. Rather than being circular, these will appear elliptical. If two values are supplied to any of the four longhand values, you’ll be defining the horizontal and vertical radii of a quarter ellipse respectively. For example, border-bottom-left-radius: 20px 10px; will create an elliptical bottom-left corner.

When using the shorthand for elliptical corners, separate the value of the horizontal and vertical radii with a slash. border-radius: 20px / 10px; will create four equal, elliptical corners, and border-radius: 5px 10px 15px 20px / 10px 20px 30px 40px; will create four unequal, elliptical corners. That last example will create corners seen in Figure 6.5. Interesting? Yes. Aesthetically pleasing? Not so much.

Figure 6.5. Four interesting, unequal, elliptical corners

There’s only one other element on The HTML5 Herald that uses rounded corners: the registration form’s submit button. Let’s round those corners now:

input[type=submit] {
  -moz-border-radius: 10%;
  border-radius: 10%;
}

You’ll note two things about the above CSS: we’ve used an attribute selector to target the submit input type, and we’ve used percentages instead of pixel values for the rounded corners. This will come in handy if we need to add more forms to the site later; other submit buttons might be smaller than the one on the registration page, and by using percentages, rounded corners will scale in proportion to the size of the button.

The border-radius property can be applied to all elements, except the table element when the border-collapse property is set to collapse.

CSS3 provides the ability to add drop shadows to elements using the box-shadow property. This property lets you specify the color, height, width, blur, and offset of one or multiple inner and/or outer drop shadows on your elements.

We usually think of drop shadows as an effect that makes an element look like it’s “hovering” over the page and leaving a shadow; however, with such fine-grained control over all those variables, you can be quite creative. For our advertisement link, we can use a box-shadow with no blur to create the appearance of a 3D box.

The box-shadow property takes a comma-separated list of shadows as its value. Each shadow is defined by two to four size values, a color, and the key term inset for inset—or internal—shadows. If you fail to specify inset, the default is for the shadow to be drawn outside of the element:

Let’s look at the shadow we’re using on our element, so that we can break down what each value is doing:

-webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
-moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

The first value is the horizontal offset. A positive value will create a shadow to the right of the element, a negative value to the left. In our case, our shadow is two pixels to the right of the a.

The second value is the vertical offset. A positive value pushes the shadow down, creating a shadow on the bottom of the element. A negative value pushes the shadow up. In our case, the shadow is five pixels below the a.

The third value, if included, is the blur distance of the shadow. The greater the value, the more the shadow is blurred. Only positive values are allowed. Our shadow is not blurred, so we can either include a value of zero (0), or omit the value altogether.

The fourth value determines the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions. A negative value contracts the shadow. Our shadow has no spread, so again we can either include a value of zero (0), or omit the value altogether.

The fifth value above is the color. You will generally want to declare the color of the shadow. If it’s omitted, the spec states that it should default to the same as the color property of the element. Opera and Firefox support this default behavior, but WebKit doesn’t, so be sure to include the color. In the example above, we used an RGBA color. In this particular design, the shadow is a solid color, so we could just have used the hex value. Most of the time, though, shadows will be partially transparent, so you’ll be using RGBA or HSLA, usually.

The drop shadow created by these declarations is shown in Figure 6.6.

Figure 6.6. Adding a drop shadow to our box gives it the illusion of depth

By default, the shadow is a drop shadow—occurring on the outside of the box. You can create an inset shadow by adding the word inset to the start of your shadow declaration.

Opera, Firefox 4, and IE9 support the nonprefixed syntax. We’re still including the -moz- prefix for Firefox 3.6 and earlier, and the -webkit- prefix for Safari and Chrome. However, current development versions of WebKit support the unprefixed version, and Firefox 4 will soon supplant the older versions, so the need for prefixing should wane.

filter: shadow(color=#484848, direction=220, Strength=8);
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, 
↵OffY=5, Color='#484848', Positive='true'),

To include more than one box shadow on an element, define a comma-separated list of shadows. When more than one shadow is specified, the shadows are layered front to back, as if the browser drew the last shadow first, and the previous shadow on top of that.

Like an element’s outline, box shadows are supposed to be invisible in terms of the box model. In other words, they should have no impact on the layout of a page —they’ll overlap other boxes and their shadows if necessary. We say “supposed to,” because there are bugs in some browsers, though these are few, and will likely be fixed fairly quickly.

form {
 -webkit-box-shadow: 
   inset 1px 1px 84px rgba(0,0,0,0.24), 
   inset -1px -1px 84px rgba(0,0,0,0.24);
 -moz-box-shadow: 
   inset 1px 1px 84px rgba(0,0,0,0.24), 
   inset -1px -1px 84px rgba(0,0,0,0.24);
 box-shadow: 
   inset 1px 1px 84px rgba(0,0,0,0.24), 
   inset -1px -1px 84px rgba(0,0,0,0.24);
}

Where box-shadow lets us add shadows to boxes, text-shadow adds shadows to individual characters in text nodes. Added in CSS2, text-shadow has been supported in Safari since version 1, and is now supported in all current browser releases except IE9.

The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multiple shadows; the exceptions are that there’s no spread, and inset shadows aren’t permitted:

/* single shadow */
text-shadow: topOffset leftOffset blurRadius color;

/* multiple shadows */
text-shadow: topOffset1 leftOffset1 blurRadius1 color1, 
             topOffset2 leftOffset2 blurRadius2 color2, 
             topOffset3 leftOffset3 blurRadius3 color3;

Like box-shadow, when multiple shadows are declared, they’re painted from front to back with the first shadow being the topmost. Text shadows appear behind the text itself. If a shadow is so large that it touches another letter, it will continue behind that character.

Our text has a semi-opaque shadow to the bottom right:

text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);

This states that the shadow extends three pixels below the text, three pixels to the right of the text, is slightly blurred (one pixel), and has a base color of black at 50% opacity.

With that style in place, our ad link is nearly complete, as Figure 6.7 shows. The finishing touch—a custom font—will be added in Chapter 9.

Figure 6.7.  Our ad link is looking quite snazzy!

We now know how to create drop shadows on both block-level elements and text nodes. But so far, we’ve only styled a fraction of our page: only one link in one advertisement, in fact. Let’s do the rest of the shadows before moving on.

Looking back at the site design, we can see that all the h1 elements on the page are uppercase and have drop shadows. The text is dark gray with a very subtle, solid-white drop shadow on the bottom right, providing a bit of depth.^[9] The tagline in the site header also has a drop shadow, but is all lowercase. The taglines for the articles, meanwhile, have no drop shadow.

We know from the section called “ CSS3 Selectors” that we can target all these elements without using classes. Let’s target these elements without any additional markup:

h1, h2 {
  text-transform: uppercase;
  text-shadow: 1px 1px #FFFFFF;
}
:not(article) > header h2 {
  text-transform: lowercase;
  text-shadow: 1px 1px #FFFFFF;
}

The first declaration targets all the h1 elements and h2 elements on the page. The second targets all the h2 elements that are in a header, but only if that header is not nested in an article element.

Our text shadows are a solid white, so there’s no need to use alpha transparent colors, or a blur radius.

Now that we have shadows and rounded corners under our belt, it’s time to have some more fun with CSS3. In the next chapter, we’ll be looking at CSS3 gradients and multiple background images.