The Style Master Blog

In this article we are going to make the toolbar below, using nothing but HTML and CSS. If it doesn’t look overly impressive, then you aren’t using Safari 4. I’ve not written this to show you something you can use in every browser today (though as we shall see it degrades gracefully in browsers that don’t support various CSS3 features), but to show what will soon be possible, and coming down the pipelines of CSS in real live browsers.

• Home
• Mac
• Store
• iPod

Recently Satoshi Kikuchi, at ActLink in Japan, with whom we organize Web Directions East, showed me an HTML and CSS version of the current Apple web site top level navigation, using CSS Transitions to give a smooth transition effect between different tabs. Immediately I wondered whether it could be done without the use of images at all – just 100% pure CSS.

Let’s start by taking a look at Apple’s version – I’m sure most readers will be familiar with it – it graces the top of every page at Apple.com

And, here’s the HTML from Apple’s version.

<div id="globalheader" class="home">
  <!--googleoff: all-->
  <ul id="globalnav">
    <li id="gn-apple"><a href="/">Apple</a></li>
    <li id="gn-store"><a href="http://store.apple.com">Store</a></li>
    <li id="gn-mac"><a href="/mac/">Mac</a></li>
    <li id="gn-ipoditunes"><a href="/itunes/">iPod + iTunes</a></li>
    <li id="gn-iphone"><a href="/iphone/">iPhone</a></li>
    <li id="gn-downloads"><a href="/downloads/">Downloads</a></li>
    <li id="gn-support"><a href="/support/">Support</a></li>
  </ul>
  <!--googleon: all-->
  <div id="globalsearch">
    <form action="..." method="post" class="search" id="g-search">
      <div>
        <input type="hidden" value="utf-8" name="oe" id="search-oe">
        <input type="hidden" value="p" name="access" id="search-access">
        <input type="hidden" value="us_only" name="site" id="search-site">
        <input type="hidden" value="lang_en" name="lr" id="search-lr">
        <label for="sp-searchtext"><span class="prettyplaceholder">Search</span
        ><input ...></label>
      </div>

While the HTML is quite clean and nice, the design’s heavy lifting is all done with CSS Sprites and images – with all the attendant challenges for developers and users around that too numerous to recount here.

Now, let’s turn to Satoshi’s version

You can see it in action here (if you use Safari 3+ )

In some ways, with its use of images, this is very similar to Apple’s version. But, it has that wonderful transition effect, which uses Apple’s experimental (but proposed CSS 3) transitions (and no Javascript!) It does however continue to suffer from being imaged based.

Image free Apple Navigation

Now, my challenge was to see whether we can reproduce the look of the Apple site navigation using only CSS and HTML – no images, no JavaScript. Let’s take an inventory of what we’ll need to do:

• The left and right edges of the navigation have rounded corners
• The navigation element has a drop shadow
• The text of each tab has drop shadows
• In both the normal and hover states, there’s not a solid color, but rather a gradient. And it’s not simply a gradient which linearly transitions from one color to another – it has a “stop” at about 60% down the background of the tab to give a subtle beveling effect.

Is it really possible to do all these with CSS (or experimental proposed CSS 3 extensions)? And to do so in such a way as older browsers won’t completely break when they try to render the navigation? We’ll, let’s see.

The basics

First we’ll create the basic layout – using the age-old technique of floating the list items inside the list that is our navigation (afterall, what is navigation but a list of links?). We make the list items block elements, float them either right or left, add a bit of padding, a height, width and so forth, and end of with something like this

Here’s the HTML

<ul>
  <li id="home">
    <a href="">Home</a></li>
  <li id="mac">
    <a href="">Mac</a></li>
  <li id="store">
    <a href="">Store</a></li>
  <li id="ipod">
    <a href="">iPod</a></li>
  <li id="iphone">
    <a href="">iPhone</a></li>
  <li id="download">
    <a href="">Download</a>  </li>
  <li id="support">
    <a href="">Support</a></li>
</ul>

and the CSS

ul#navigation li {
  list-style-type: none;
  display: block;
  width: 8em;
  float: left;
  text-align: center;
  font-family: "Lucida Grande", sans-serif;
  height: 3em;
}

Next, we’ll style the links inside these list items like so

ul#navigation li a {
  display: block;
  padding: .8em .5em .5em .5em;
  text-decoration: none;
}

Again, we’ve made them block elements, to help with the layout, and added padding for the same reason, then stopped the browsers default underlining of links.

And here’s what our list will look like

• Home
• Mac
• Store
• iPod

(so that the bar will fit into the narrow confines of this page’s container, I’ve trimmed the number of elements).

Now comes the fun part.

Rounded corners

First up, can we add rounded corners to the left and right edges of the navigation? What we’ll actually do is add rounded corners to the left edge of the first list item, and to the right of the last list item (because the list items inside the list are all floated, the list itself has no height). But we’ll do it without using any specific class or id value on the list items in HTML using the CSS 3 selectors, last-child and first-child.

These selectors select an element when it is the first or last child of its parent element, not the first or last child of an element. Here’s how it works

ul#navigation li:first-child selects any elements with matches ul#navigation li, that is also the first child element of its parent.

Similarly, ul#navigation li:last-child selects any elements with matches ul#navigation li, that is also the last child element of its parent.

So, we’ll create these two rules

ul#navigation li:first-child {
}
ul#navigation li:last-child {
}

Now, we’ll add the border-radius for the relevant edges. Border radius is a CSS 3 property. First we’ll just add the standard property, then we’ll add the browser specific properties as well – at present, while Firefox 3 and Safari 3 support border-radius they do so with the experimental prefixes -webkit- and -moz-, but not the standard property name border-radius.

ul#navigation li:first-child {
  border-top-left-radius: .5em;
  border-bottom-left-radius: .5em;
}

Now, typically the browser specific property name is identical to the standard property name, with the addition of the browser specific prefix. But in this one instance, Firefox’s property name is different – so here are the properties for Safari and Firefox as well as the standard properties we just added.

ul#navigation li:first-child {
  -webkit-border-top-left-radius: .5em;
  -moz-border-radius-topleft: .5em;
  border-top-left-radius: .5em;
  -webkit-border-bottom-left-radius: .5em;
  -moz-border-radius-bottomleft: .5em;
  border-bottom-left-radius: .5em;
}

And similarly for the last child list item

ul#navigation li:last-child {
  -webkit-border-top-right-radius: .5em;
  -moz-border-radius-topright: .5em;
  border-top-left-radius: .5em;
  -webkit-border-bottom-right-radius: .5em;
  -moz-border-radius-bottomright: .5em;
  border-bottom-right-radius: .5em;
}

We won’t be able to see the rounded corners just yet, as the list doesn’t actually have a border yet – but we’ll get to that in a moment.

Shadows

Next, we’ll add a drop shadow to the navigation element, by adding a drop shadow to each list item. By now most developers are probably aware of text-shadow, which was part of CSS 2, removed from CSS 2.1, has returned to CSS 3 and which is now supported by Opera 9.5 and Firefox 3.5 as well as Safari. The box-shadow property is very similar, but adds a drop shadow to the whole box of an element. Shadows in CSS take 4 values – 3 length values which specify respectively the horizontal offset (how far to the left or right of the element the shadow should fall), vertical offset (how far above or below the element the shadow should fall), and a blur value (how sharp or diffuse the shadow should be – the higher the number, the more blurred a shadow is.) The fourth value is the color of the shadow.

ul#navigation li {
  list-style-type: none;
  display: block;
  width: 8em;
  float: left;
  text-align: center;
  font-family: "Lucida Grande", sans-serif;
  height: 3em;
  border-right: 1px #818181 solid;
  -webkit-box-shadow: 1px 1px 1px #bbb;
  box-shadow: 1px 1px 1px #bbb;
}

While we are on shadows, we’ll add the text shadows to our list item text.

ul#navigation li a {
  display: block;
  padding: .8em .5em .5em .5em;
  text-decoration: none;
  color: #292929;
  text-shadow: 1px 1px 0px #cccccc;
}

In addition to the text shadow you’ll notice we’ve also given the text some color.

And here’s what our list looks like with shadows and rounded corners (provided of course you are using a browser which supports these – Safari 3+ and Firefox 3.5+)

• Home
• Mac
• Store
• iPod

So far so good

OK, so far so good – but most developers won’t be too surprised by what we’ve done. But let’s get to the tricky cool stuff. How do we get the gradient effect on the background of the list items? Well, the classic approach is to use a background image. But do we need them? Well, in Safari 4, we don’t. We use an experimental (but proposed standard) value in Safari, -webkit-gradient

-webkit-gradient is a kind of function (there are a number of others functions like attr() in CSS used to add the value of a named attribute as generated content). In programming speak, functions take arguments (or parameters) – in this case, we have the following parameters that the function takes

-webkit-gradient(type of gradient, start position, end position, start color, end color, one or more stop points).

Which all sounds complicated, but as the example below shows, it’s easy enough to understand and experiment with

Here’s our gradient

-webkit-gradient(linear, left top, left bottom, from(#333333), to(#4c4c4c), color-stop(0.6, #474747));

(if you’d like to play round with gradients, try this online tool I put together to explore them.)

Which should for the most part make sense – the color stop might need a little explanation though.

If you look at our navigation element, you’ll notice that at about 60% down the element, the color reaches its darkest, and then gets lighter again. The color stop specifies this, using a value for 0 to 1 to specify where on the gradient the stop should be, and then a color value for that position. Gradients can have multiple stops by the way.

Now, note that this is not a property – it’s a function. In effect, we are generating an image, which can be used anywhere images are – in this case, as a background image (but gradients can also be used as list style images, border images, in generated content, and elsewhere images can be used.) So, we’ll go ahead and add it as the background image for the li elements inside our navigation element.

#navigation li {
  background-color: #c9c9c9;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c9c9c9), to(#848484), color-stop(0.6, #a1a1a1));
}

We’ve also added a solid background color, for those browsers which don’t support this property (which in early 2009 is all but Safari).

To achieve the rollover effect, we simply add a different gradient to li elements in the hover state.

#navigation li:hover {
  background-color: #333333;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#4c4c4c), color-stop(0.6, #474747));
  }

And here’s what this looks like.

• Home
• Mac
• Store
• iPod

Yep, there are truly no images, no JavaScript, nothing but HTML and CSS. Go ahead and rollover it as well.

Now, we are getting places. And better yet, we’ve not touched our HTML to add extraneous elements, even class and id values for rounded corners or the sliding doors technique, and used no images at all. So, what’s left? Not a lot really. We’ll just add a different text shadow for the text of the li elements in the hover state, and we are more or less done. Well, apart from the issue of transitions.

#navigation li:hover a {
  color: #e8e8e8;
  text-shadow: 1px 1px 0px #353535;
}

CSS Transitions

So, here’s an irony – what started this quest was Satoshi implementing a CSS Transition based effect for fading into and out of the individual tabs when rolling over them – but there’s a bug in Safari – it won’t do transitions with gradients. We’ll look at the code for adding the transition anyway – but if you want to see it in effect, you need to remove the gradients, and you’ll see the transitions on the solid background color.

CSS Transitions, an as yet webkit only CSS property (proposed by Apple as a part of CSS3) provide an animation effect when a specified property or properties change, either due to a user action (like mouse hovering), or due to a script. It makes many of the kinds of effects that JavaScript libraries implement trivial to add to a web page even with no JavaScript knowledge, and no linking to external JavaScript libraries. In its simplest form (which will largely be enough for most developers), you simply specify the property you want to have a transition effect for, and the time the effect should last for.

Here’s a simple example. Let’s give a table row a different background color when it is hovered over (a commonly used technique, to aid readability of tabular data).

tr {
  background-color #fff
  }
tr:hover {
  background-color #a1a1a1
  }

Now, we simply add the -webkit-transition property, specifying that it is background-color which it should apply to, and that we want it to take half a second

tr {
  background-color #fff;
  -webkit-transition: background-color .5s
  }

(seconds are valid CSS 3 units by the way).

Now if we look at this in Safari 3.1 or later, we’ll see that as we hover, the transition from white to grey when hovering (and back again) fades, rather than abruptly changing.

To be or not to be, that is the question	whether ’tis nobler in the mind to suffer
the slings and arrows of outrageous fortune	Or to take arms against a sea of troubles,
And by opposing end them? To die: to sleep;	No more; and by a sleep to say we end
The heart-ache and the thousand natural shocks	That flesh is heir to

In our navigation bar example, it’s the li elements we’ll be applying transitions to, because it’s those elements which have the properties applied to them which we want to transition (the background and text color). We saw earlier, the property requires two values – the name of the property to which a transition should apply (or “all” to apply it to every property which changes), and the time the transition should take. In our case, it will look something like this

#navigation li {
  -webkit-transition: all 0.5s;
}

Here’s an example with just a solid background color – roll over it to see the transition in effect in Safari.

• Home
• Mac
• Store
• iPod

As soon as the bug mentioned above is fixed you’ll see a thrilling fade effect when you roll over any of the list elements in the navigation. For now, you’ll need to make the choice as to whether users see the transition effect and a solid background color, or the gradient background, but an abrupt transition on roll over.

Enhancement

The properties we’ve looked at today are a mixture of experimental (though documented, and proposed as standards), and current CSS 3 properties. By and large, they are only supported by Safari at this stage (but some are supported in Opera, some in Firefox 3, and some more will be supported in Firefox 3.5, and Opera 10). Some designers and developers consider this lack of exact consistency between browsers a problem, or even a deal breaker. But, if you are of the view that it’s not the point of web design to make your pages look identical in every browser, but rather to adapt to the browser environment they are viewed in, so that more advanced browsers will deliver a richer experience, while older browsers will still render the pages in such a way as the information and services they offer are available, then there’s no problem with this fact at all.

In fact, this example demonstrates the concept of “progressive enhancement” very clearly.

To begin with, here’s how the page renders in result in IE8 for Windows

Here’s the user’s experience in Opera 9.5

Here it is in Firefox 3

Here it is in Firefox 3.1

and here it is in Safari 3

Opera and IE show no rounded corners, or drop shadows, or gradients, but an otherwise quite acceptable design. Firefox 3 has rounded corners, but no shadows, and no gradients, while Firefox 3.5 has a box-shadow and text shadow. Safari displays all these things, but no transitions.

The really exciting thing is, as Opera, IE, Firefox and Safari add these features and fix their bugs, your pages won’t need updating and refreshing – they will silently just get better.

One last thing to point out – go to Apple’s site and zoom the text – nothing happens. But our design in all of these browsers scales up and down as the user increases and decreases their font size. You can find the text in the navigation using the browsers built in find command (users very commonly search for key words like contact or search on your home page in this way – so if your text is actually an image, then you’ll be driving visitors away.)

The design is far more maintainable – typos and changes to the text are easily fixed without re-rendering a complex design, and uploading the image to a server, performance increases (Satoshi’s original design, which is of course a proof of concept, but for comparison sake uses 15 images, and comes in as close to half a megabyte. Apple’s sprite based image is about 30K, while our CSS based design is 1 CSS file, which is 1.7KB! 300 times smaller than Satoshi’s solution, and 20 times smaller than Apple’s). In addition, accessibility guidelines are easier to adhere to, without the need to resort to image replacement hacks and the like. And it’s one sweet looking design. What’s not to love.

The Wrap

CSS 3, and even experimental CSS can be safely used right now, to create sophisticated lightweight designs, that progressively enhance or fallback according to a browser’s capabilities. Here we’ve merely reproduced what one of the world’s great design companies does on their front page as one of their most significant page elements, using under 2KB of data, a measly 10 statements in total, and not a single image. Now it’s time for you to let loose with some of the new capabilities in CSS, and today’s browsers. Let’s see what you can come up!

Want to learn more?

Creating gradients can be a little tricky, so I’ve put together a little online toy that helps you explore and create them.

Our Wiki now features a complete guide to CSS, including detailed browser support information, for all major current browsers (back to IE5.5). It’s creative commons licensed so you can contribute to it, and reuse it as well.

Style Master 5 (beta version for Mac OS X out now) supports many CSS 3 and experimental CSS features like text and box shadow, border-radius, and more, right now.

CSS 3.info is a great place to keep track of where CSS is headed.

Surfin’ Safari is all about Webkit (the heart of Safari), and its development, and keeps you up to date with the latest in that browser

The Opera blog tracks developments at Opera, whose browser is featured in many many mobile phones, the Wii, the Nintendo DS, televisions and elsewhere. As the web moves away from laptops and PCs, Opera’s browser will become increasingly prominent.

Planet Mozilla brings together Firefox and Mozilla focussed blogs from around the web.

The IE blog is the official blog from the Internet Explorer team. IE8, due out in the first half of 2009, while not implementing many of these new features, is a very important step forward in the standards foundations of the web. Keep track of IE 8 developments there.

Our Web Directions conferences and workshops in Australia, North America and Japan always feature CSS focussed sessions. Keep an eye out for an event near you.