Demo

The demo features photos of me, taken on various mountains by Suze. Cheers to her for the content.

The fluidity

Making a carousel fluid is actually ridiculously simple. Let us assume you have five panels. Remember that number!

A carousel is made up of three basic components:

1. A viewport
2. A wrapper for the panes
3. A pane

Thus, our markup is:

<div class=carousel>

  <ul class=panes>

    <li>
      <h2>Pane 01 title</h2>
      <img src=pane-01.jpg alt="">
    </li>

    <li>
      <h2>Pane 02 title</h2>
      <img src=pane-02.jpg alt="">
    </li>

    <li>
      <h2>Pane 03 title</h2>
      <img src=pane-03.jpg alt="">
    </li>

    <li>
      <h2>Pane 04 title</h2>
      <img src=pane-04.jpg alt="">
    </li>

    <li>
      <h2>Pane 05 title</h2>
      <img src=pane-05.jpg alt="">
    </li>

  </ul>

</div>

Now, the viewport defines what we see, we slide our panes behind it and they poke through, like this:

The red denotes the viewport (and incidentally a single pane), the blue denotes the whole five panes behind the viewport.

We just slide these behind the viewport to show a certain amount at a time, et voilà; carousel. But, you all know how carousels work, right…?

To make this fluid is so simple. The viewport needs to fill its container, so this gets width:100%;. Easy.

One pane needs to fit nicely in the viewport, so this needs to occupy 100% of the viewport. With this in mind…

We have five panes, remember, so the ul needs a width of 500%. Five panes that are each the same width as the viewport gives us a width of 500%.

Now we know:

.carousel{
  width:100%;
}
.panes{
  width:500%;
}

So if .panes holds five panes, each pane should be 20% its width. This is where it might get a little confusing…

The viewport is 100% width, the wrapper is five times as big as that and each pane is one fifth the width of the wrapper.

Our code is left at:

/*------------------------------------*\
	$CAROUSEL
\*------------------------------------*/
.carousel{
    overflow:hidden;
    width:100%;
}
.panes{
    list-style:none;
    position:relative;
    width:500%; /* Number of panes * 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */

    -moz-animation:carousel 30s infinite;
    -webkit-animation:carousel 30s infinite;
    animation:carousel 30s infinite;
}
.panes > li{
    position:relative;
    float:left;
    width:20%; /* 100 / number of panes */
}
.carousel img{
    display:block;
    width:100%;
    max-width:100%;
}
.carousel h2{
    font-size:1em;
    padding:0.5em;
    position:absolute;
    right:10px;
    bottom:10px;
    left:10px;
    text-align:right;
    color:#fff;
    background-color:rgba(0,0,0,0.75);
}

The basic equation for making a carousel with any number of panes is:

.carousel{
  width:100%;
}
.panes{
  width:100 * number of panes%;
}
.panes > li{
  width:100 / number of panes%;
}

So, a four-pane carousel would be:

.carousel{
  width:100%;
}
.panes{
  width:400%;
}
.panes > li{
  width:25%;
}

It really is that simple. That’s all there is to making a fluid carousel.

CSS powered

Okay, in this carousel I decided I was going to power it with CSS. This is super unorthodox so if you’re yelling WTF at your screen please read on!

It was going to be (and actually is) used on my good friend Sam Penrose’s new design portfolio, so knowing we had free reign and a little chance to experiment I decided to opt for a pure CSS solution.

This is simple in theory but the maths gets so tricky.

All we do is animate .panels from right to left then back again. We animate for a bit, we pause, we animate again, pause again and so on until it’s done. Then we loop it infinitely.

The CSS is:

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

The numbers are so tricky to work with and if anyone can come up with a decent equation to describe it I would be so happy. I’ve got Nick on the job, but I’ve not worked it out yet; I can’t quite grasp the relation between five panes and the numbers above in a way that I could do some quick maths to work out the animations for a four-pane carousel.

The problem is that you have to know how many full moves and pauses are needed for a full iteration of the carousel (before it starts on its infinite loop), and then how to evenly space these numbers between 0 and 100%. My animations last for 1.5% and pause for 11%, these numbers are perfect for adding up to 100%.

Update

Massive thanks to Clay who’s worked out that the number of steps is 4n-3 and that the total time between start of one animation and the next is 100 / 2(n-1) (where n is the number of panes). See his full comment.

But, the code above will sort you out a perfect animation for a five panes so feel free to nab it! I’ll update if and when I crack some maths!

Wait, CSS?!

Using CSS for this is really, really unorthodox so comes with some massive caveats.

Do not use CSS to animate this carousel if:

1. You require the contents of every pane to be visually accessible to the user.
2. You require full browser support.
3. You do not require interactions (like stopping the animation or clicking between panes).

If you are going to use this CSS-only method then ensure that:

1. The user can still use the site fully without the contents of the panes.
2. You are okay with older browsers not animating and just displaying the first pane.
3. You do not want or require users to be able to interact with the carousel.

If you can’t use CSS then combine the fluidity above with plain ol’ trusty JS.

I will happily say that the fluidity is the most important, useful and impressive thing about this technique. Until I, or anyone, can get you a decent equation to substitute your numbers into, the CSS animations are too cumbersome and restrictive to be of large-scale use to most people.

N.B. This article isn’t a response to Jonathan’s, nor am I calling him out, he just happened to have laid some nice foundations with his article that allow me to use it as a base. It is worth noting further that Jonathan a) uses px to declare font-sizes anyway and b) does start with the base he intends to use. This article isn’t a response to his.

Jonathan uses the example:

body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p  { font-size: 1.4em; } /* =14px */
li { font-size: 1.4em; } /* =14px? */
li li, li p /* etc */ { font-size: 1em; }

Here he sets his base font-size to 10px then creates a h1 size of 24px, <p>s and <li>s of 14px and then children of <p>s and <li>s at 1em, also 14px.

Here is a problem that developers continuously cause themselves. It’s clear here that, although he sets a body font-size of 10px, the actual base font-size is 14px. Therein lies the problem.

Creating a base font-size that you don’t actually need means you have to redefine nigh on every element to take on the size you do want—you’re creating a rule that you don’t even want and it’s causing you work…

If you want your base font-size to be 14px then set your <html> at 0.875em and you’re done. If you want a 24px <h1> then your CSS is simply h1{ font-size:1.714em; }.

The problem with 62.5%

The 62.5% trick is a common one, and does have its uses in two circumstances:

1. You want simpler maths, for example if you are building an elastic layout (width:30em; == width:300px;)
2. You actually want a base font-size of 10px

If you are doing neither of these then be kind to yourself and set the base you actually want.

The main reason people reset the font-size to 10px is point one; to make maths easier. If your quasi-base is 10px and you want an actual base of 12px it’s simply 1.2em. The maths is easier, we can work with units of ten more easily, but that comes at the cost of maintainability.

If you set your quasi-base at 10px and you want your body copy to be 12px, you have to style every single element that falls under ‘body copy’ individually. Hence Jonathan’s giving font-sizes to list items and paragraphs. This means you’re writing more code than you need and also leads to nasty inheritance problems; problems that rems are supposed to fix. A <p> in an <li> will be 1.2×12px, whereas it still only needs to be 12px.

If you were to just set your base at 12px in the first place (body{ font-size:0.75em; }) then:

1. You don’t need to define every element individually; you style the exceptions rather than rewriting the rule.
2. You don’t get crazy-annoying inheritance issues.

Being lazy is causing you more work

The main reason, I feel, behind using the 62.5% method is laziness, and that’s a good thing. Good developers are lazy. However that laziness is misguided; it’s actually causing you more work. You have to define font-sizes on all elements rather than just once and letting them inherit and you have to tackle those horrible inheritance issues when an explicitly sized element is placed inside another one.

When setting the base font-size correctly and only once the maths isn’t as nice, I’ll admit. With the 62.5% trick a font is an even ten times its em unit (2.4em = 24px, 5em = 50px and so on). With setting your base to what you actually want the chances are you will end up with a not-as-nice number. If you want your base to be 16px then 2.4em = 38.4px, 5em = 80px. It’s a little more work in your calculator app, but it’s a lot less work when it actually comes down to build.

CSS Wizardry has a base of 16px, so I just leave it at font-size:100%;. 16px is the rule, headings are the exception. As such I only need to redefine font-sizes on headings.

My maths is a little harder, my coding is a breeze…

So by all means start using rems, they seem pretty interesting, but it may just be solving a problem you don’t even have…

Here it is. Visit this on a desktop browser and in a smartphone (and then try rotating the device).

I was inspired after I saw Engage Interactive’s iPhone site in Paul Annett’s .net magazine article whilst on the train. I only had my iPhone with me which meant that, although in the ideal viewing medium, I wasn’t able to pick apart any source. As my mind so frequently does, I started coding up a ‘my version’ in my head.

After building mine I went and found that Engage’s iPhone site uses JavaScript and works solely on an iPhone (I imagine some for of browser sniffing is used to detect it). This gives them increased functionality as they have horizontal-left and horizontal-right; I only have horizontal but I wanted a device independent site that would work using only CSS.

Read on for the how-to…

The code

What we have here is a page with personal and contact information. We have three possible states: desktop, mobile-portrait and mobile-landscape.

The stacked paper effect is achieved by replicating the appearance of the page <div> in both a :before and :after pseudo-element, giving these a negative z-index and then rotating them. This effect is achieved with no extra markup or images.

<!-- Markup -->
<div id="page">

  <div id="about">

    [content]

  </div>

  <div id="contact">

    [content]

  </div>

</div>

/* CSS */
#page{
  position:relative;
  margin:0 auto;
  padding:20px 20px 0 20px;
  border:10px solid #f0f0f0;
  background:#fff;
  width:400px;

  -moz-box-shadow:0 0 10px rgba(0,0,0,0.25);
  -webkit-box-shadow:0 0 10px rgba(0,0,0,0.25);
  -o-box-shadow:0 0 10px rgba(0,0,0,0.25);
  box-shadow:0 0 10px rgba(0,0,0,0.25);
}
#page:before,
#page:after{
  content:" ";
  display:block;
  border:10px solid #f0f0f0;
  background:#fff;
  z-index:-1;
  position:absolute;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;

  -moz-box-shadow:0 0 10px rgba(0,0,0,0.25);
  -webkit-box-shadow:0 0 10px rgba(0,0,0,0.25);
  -o-box-shadow:0 0 10px rgba(0,0,0,0.25);
  box-shadow:0 0 10px rgba(0,0,0,0.25);
  -moz-transform:rotate(1deg);
  -webkit-transform:rotate(1deg);
  -o-transform:rotate(1deg);
  transform:rotate(1deg);
}
#page:after{
  z-index:-2;
  -moz-transform:rotate(-1.5deg);
  -webkit-transform:rotate(-1.5deg);
  -o-transform:rotate(-1.5deg);
  transform:rotate(-1.5deg);
}

Each type of content is wrapped in its own <div>. This may, at first, seem extraneous but these are the hooks used to toggle the content displayed on mobile devices in different orientations. If your browser is portrait then hide the contact <div>, if it is landscape them hide the about <div>.

I hide each <div> by absolutely positioning it way off to the left of the screen. This offers more accessibility than a simple display:none;:

@media (max-width: 480px) and (orientation: portrait){

#contact{
  position:absolute;
  left:-9999px;
}

}
@media (max-width: 480px) and (orientation: landscape){

#about{
  position:absolute;
  left:-9999px;
}

}

Further, when the page loads on a mobile device an overlay animates in and out with some Webkit animations, telling the user to ‘Try rotating your phone…’

<!-- Markup -->
<div id="mask"></div>

<p id="instructions">Try rotating your phone…</p>

/* CSS */
/*------------------------------------*\
  INSTRUCTIONS
\*------------------------------------*/
#mask,
#instructions{
  display:block;
  -webkit-animation-duration:3s;
  -webkit-animation-iteration-count:1;
  -webkit-animation-timing-function:linear;
}
#mask{
  position:absolute;
  left:-9999px;
  background:rgba(0,0,0,0.75);
  z-index:2;
  -webkit-animation-name:mask;
}
@-webkit-keyframes mask{
0%{
  opacity:0;
}
10%{
  opacity:1;
  top:0;
  right:0;
  bottom:0;
}
90%{
  opacity:1;
  top:0;
  right:0;
  bottom:0;
}
99%{
  opacity:0;
  top:0;
  right:0;
  bottom:0;
}
100%{
  opacity:0;
}
}
#instructions{
  font-family:Calibri, sans-serif; /* Using a non-Typekit face to try and alleviate the delay in text-display */
  width:200px;
  position:absolute;
  top:-9999px;
  left:50%;
  background:rgba(0,0,0,0.75);
  z-index:3;
  padding:10px;
  background:#fef8c4;
  border:1px solid #d8d566;
  margin:-12px 0 0 -100px;
  font-weight:bold;
  text-align:center;

  -moz-box-shadow:0 0 10px rgba(0,0,0,0.75),0 1px #fff inset;
  -webkit-box-shadow:0 0 10px rgba(0,0,0,0.75),0 1px #fff inset;
  -o-box-shadow:0 0 10px rgba(0,0,0,0.75),0 1px #fff inset;
  box-shadow:0 0 10px rgba(0,0,0,0.75),0 1px #fff inset;
  -webkit-animation-name:message;
}
@-webkit-keyframes message{
0%{
  opacity:0;
}
10%{
  opacity:1;
  top:50%;
  left:50%;
}
90%{
  opacity:1;
  top:50%;
  left:50%;
}
99%{
  opacity:0;
  top:50%;
  left:50%;
}
100%{
  opacity:0;
}
}

}

Another thing to note; the image in the page is used as an inline image, the favicon and the iPhone homescreen icon. The same image has been reused three times, this isn’t anything amazing but it means only one request over a mobile connection.

Issues

Suze bought me Typekit recently which I thought I’d try out, however there is a little bug on mobile whereby Typekit prevents any text from displaying for a moment. The length of this ‘moment’ depends on the speed of your connection.

Furthermore, the overlay mentioned previously is displayed with CSS based on resolution. Ideally you’d use a more robust method of writing this to the view than saying ‘if the screen is really this small then use CSS to display the markup that is there anyway regardless of the device’. Resolution dependence isn’t explicit enough because a) no matter what device you are on, the ‘rotate you phone’ text is always present in the markup and b) a 27″ iMac will display the text to the user is they resize their browser down far enough; a user can actually see the phone related text on a desktop if they resize enough.

However, this was just a proof-of-concept idea just to see if I could do it—I’m pretty pleased with the results.

Demo

This article has been ported from the now-defunct Venturelab Devblog, where I had originally authored it.

Each page features a sub-navigation area, which links to all the other pages within that section of the website. This is great, and works perfectly, but in order to get to, say, the FAQs page from the home page, you’d first have to go to the about page, then on to the FAQs from there. This is by no means unacceptable, but we like to go that extra step at Venturelab…

I was looking at the main menu of the site when inspiration struck. Something as common and simple as a series of dropdown menus under each meta menu item would improve the navigability and usability of the site massively. Also, they are incredibly simple to create, and here’s where I teach you how…

The concept

What a dropdown menu provides is a hierarchical overview of the subsections contained within the menu item that spawned it. Basically, it lists all the subsections within a section of a site when you hover your mouse cursor over it.

They are extremely useful in showing what a section of a site contains, and allowing you to access it from anyway else in that site, whether that be the parent page of that subsection, or a page in a different section altogether.

The markup

A lot of dropdown menus rely on bulky, extraneous markup and Javascript to work, ours will use only the cleanest HTML and some lean CSS, with some lovely progressive CSS3 for good measure.

<ul id="nav">
	<li>
		<a href="#">Home</a>
	</li>

	<li>
		<a href="#">About</a>
		<ul>
			<li><a href="#">The product</a></li>

			<li><a href="#">Meet the team</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Services</a>

		<ul>
			<li><a href="#">Sevice one</a></li>
			<li><a href="#">Sevice two</a></li>

			<li><a href="#">Sevice three</a></li>
			<li><a href="#">Sevice four</a></li>
		</ul>

	</li>
	<li>
		<a href="#">Product</a>
		<ul>
			<li><a href="#">Small product (one)</a></li>

			<li><a href="#">Small product (two)</a></li>
			<li><a href="#">Small product (three)</a></li>
			<li><a href="#">Small product (four)</a></li>

			<li><a href="#">Big product (five)</a></li>
			<li><a href="#">Big product (six)</a></li>
			<li><a href="#">Big product (seven)</a></li>

			<li><a href="#">Big product (eight)</a></li>
			<li><a href="#">Enourmous product (nine)</a></li>
			<li><a href="#">Enourmous product (ten)</a></li>

			<li><a href="#">Enourmous product (eleven)</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Contact</a>

		<ul>
			<li><a href="#">Out-of-hours</a></li>
			<li><a href="#">Directions</a></li>

		</ul>
	</li>
</ul>

As you can see here the markup is simply a series of nested <ul>s. No verbose IDs/classes, no <div>s, just rich, semantic code.

The #nav <ul> contains a series of <li>s, and any that require a dropdown then contain another <ul>. Notice the dropdown <ul>s have no classes on them—this is because we use the cascade to style these, keeping our markup even cleaner.

The CSS

This is where the magic happens—we use CSS to transform a series of nested <ul>s into a smooth, easy to use, neat and self-contained dropdown menu.

/* BE SURE TO INCLUDE THE CSS RESET FOUND IN THE DEMO PAGE'S CSS */
/*------------------------------------*\
	NAV
\*------------------------------------*/
#nav{
	list-style:none;
	font-weight:bold;
	margin-bottom:10px;
	/* Clear floats */
	float:left;
	width:100%;
	/* Bring the nav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
}
#nav li{
	float:left;
	margin-right:10px;
	position:relative;
}
#nav a{
	display:block;
	padding:5px;
	color:#fff;
	background:#333;
	text-decoration:none;
}
#nav a:hover{
	color:#fff;
	background:#6b0c36;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
#nav ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#6b0c36;
	text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#333;
}

Just a regular horizontal navigation menu…

Right, let’s now break that down… The first section is fairly self explanatory—here we are just setting up a regular horizontal navigation menu, the same as any other. However, notice that selectors such as #nav li and #nav li a will select all list items and links in the dropdowns too. Here we’re using the cascade sensibly.

One thing of note however is applying position:relative; to the list items, this allows us to use position:absolute; on the nested <ul>s later on.

The nested lists

#nav ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}

Here we have the CSS that controls the <ul>s nested within the top level list items. Obviously we need to remove bullets with list-style:none;, then position:absolute; to position the dropdown above the list item that holds it.

A better, more accessible solution than display:none;…

The next line however is a point of interest. Usually, most people would use display:none; to hide the dropdown while it’s not being used, but due to a lot of screenreaders ignoring anything with display:none; applied, this is very inaccessible. What we do instead is take advantage of the fact the <ul> is absolutely positioned and just position it -9999px off screen when not in use.

Next up we declare opacity:0; for the hidden <ul> and then a Webkit only declaration which will smoothly fade the <ul> in from fully transparent when hovered.

#nav ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#nav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}

Above: The 1px gap achieved by the padding-top:1px; applied to the list-item

Here we set up the default list item and link styles. Notice the padding-top:1px; on the <li>. As all the colours etc are applied to the <a>, putting a 1px padding on the <li> in effect pushes the <a>—and therefore the colour—away from the edge of the list item, giving it the illusion that they are all separated. Interestingly, IE will not recognise the layout of the <li> when hovered, closing the dropdown again. To get round this, I added a 1×1px transparent gif image as a background. Also here we remove the floats applied earlier.

Next, on #nav ul a, we apply white-space:nowrap; to prevent items wrapping onto two lines, ensuring a consistent display.

And this is where the magic happens…

The final bit of code is the bit that actually makes the dropdown appear when the list item that contains it is hovered. Now, as the :hover pseudo-class only works on the <a> element in IE6, the dropdowns won’t work in that browser. That can be alleviated by using a variety of fixes. However, as dropdowns are progressive, then we’re okay with them not working. If you do however want to get this working in IE6 then my favoured solutions is by using behaviours.

#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#6b0c36;
	text-decoration:underline;
}

This gets tricky, but it should make sense.

This block of code here is where the hover styles come in, there’s a bit of nifty code in there which controls what we’ll call ‘persisting hover states’ on the top level item even when the user is hovering the dropdown items…

#nav li:hover a is what allows you to give the top level link a persisting hover state when hovering its ‘children’. This works by styling every link inside a list-item when that list-item is hovered. This bit gets a bit tricky but bear with me:

• The dropdown <ul> sits inside an <li>.
• If you are hovering over a link (<a>) in a dropdown (<ul>) then you are also, at the same time, still hovering the top level list-item (<li>) as you are hovering content inside it.
• Because you are technically still hovering the top level list-item, the #nav li:hover a remains true, leaving a persisting hover style on the top level list-item’s <a> so…
• …by hovering a dropdown item you are still hovering the top level list-item which means the cascade still styles all links in that list-item. Phew!

#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}

Here we override certain aspects of the persisting hover state so that the dropdowns differ from the top level link. In this case we merely decide not to underline them.

We also add a touch of Webkit goodness, telling the links to transform. -webkit-transition:-webkit-transform 0.075s linear; tells Webkit to animate the -webkit-transform we apply later on in the code over 0.075 seconds with no fade-in/out. Look out for the initiation of this in the next (and final) block of CSS.

#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#333;
}

Final word

View demo…

So, there you have it. A simple concept pulled off with some very lean markup and some clever CSS and progressive enhancement. It’s totally accessible, the markup is semantic and sensible and it relies on no weighty Javascript libraries to work.

Hopefully my write-up makes sense. but if anything is unclear leave a comment and one of us in the dev team will try and set you right. Or, you could just copy/paste the code and hack it apart for yourselves.

Demo

This article has been ported from the now-defunct Venturelab Devblog, where I had originally authored it.

Horizontal accordion

Let’s start with the markup for the horizontal accordion, it’s really nothing special, just some good ol’ semantic HTML:

<ul class="accordion">

  <li class="slide-01">

    <div>

      <h2>Slide one</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

    </div>

  </li>

  <li class="slide-02">

    <div>

      <h2>Slide two</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

    </div>

  </li>

  <li class="slide-03">

    <div>

      <h2>Slide three</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

    </div>

  </li>

  <li class="slide-04">

    <div>

      <h2>Slide four</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

    </div>

  </li>

  <li class="slide-05">

    <div>

      <h2>Slide five</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>

    </div>

  </li>

</ul>

Here we have a simple unordered list containing a series of class-named list items and some content. Simple. The CSS is where it gets nifty:

/*------------------------------------*\
  ACCORDION
\*------------------------------------*/
.accordion{
  width:940px;
  overflow:hidden;
  list-style:none;
  margin-bottom:10px;
  text-shadow:1px 1px 1px rgba(0,0,0,0.25);
  background:blue;

  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -o-border-radius:10px;
  border-radius:10px;
}
.accordion li{
  float:left;
  width:20%;
  overflow:hidden;
  height:250px;
  -moz-transition:width 0.2s ease-out;
  -webkit-transition:width 0.2s ease-out;
  -o-transition:width 0.2s ease-out;
  transition:width 0.2s ease-out;
  -moz-transition-delay:0.15s;
  -webkit-transition-delay:0.15s;
  -o-transition-delay:0.15s;
  transition-delay:0.15s;
}
.accordion li:first-of-type{
  -moz-border-radius:10px 0 0 10px;
  -webkit-border-radius:10px 0 0 10px;
  -o-border-radius:10px 0 0 10px;
  border-radius:10px 0 0 10px;
}
.accordion li:last-of-type{
  -moz-border-radius:0 10px 10px 0;
  -webkit-border-radius:0 10px 10px 0;
  -o-border-radius:0 10px 10px 0;
  border-radius:0 10px 10px 0;
}
.accordion div{
  padding:10px;
}
.accordion:hover li{
  width:10%;
}
.accordion li:hover{
  width:60%;
}
.slide-01  { background:red; color:white; }
.slide-02  { background:orange; color:white; }
.slide-03  { background:yellow; color:#333; text-shadow:none; }
.slide-04  { background:green; color:white; }
.slide-05  { background:blue; color:white; }

It’s all fairly self-explanatory; first we have the .accordion class for the <ul> where we define a width and overflow hidden (to clear floats) and some other bits and pieces.

Next we float the list items left so they all stack up, give them a width of 20% (100% ÷ 5 = 20%) and give them overflow:hidden; so that no content breaks out of them. We also apply a fixed height that will nicely house all the content once the list items expand.

Now here’s a progressive bit, we tell the list items to transition their widths over a period of 0.2 seconds, easing out the animation.

Then after this we use the very handy :first- and :last-of-type selectors to round the top- and bottom-left and top- and bottom-right corners of the first and last list items respectively.

After this, we have a <div> to which we apply 10px padding. You could argue that this <div> is extraneous and that we can simply add the padding to the <li>s, and you’d be right, however this would make the percentage numbers for the width less nice to work with if you have to factor in paddings on the list items too.

Now we reach the bit that makes the accordion functional:

.accordion:hover li{
  width:10%;
}

What we do here is say as soon as I hover the <ul> make all the <li>s 10% in width.

This gives us 5 × 10% = 50%. 5 lots of 10% width list items in the list. We have a spare 50% of extra space in the list that we’d like to fill with whatever list item we are currently hovering.

10% list item + 50% dead space to fill = 60%

So what we do now is say make the list item that I am actually hovering 60% width.

.accordion li:hover{
  width:60%;
}

The whole functionality says when I hover the list make every list item 10% the width of the <ul> but make the one <li> that my cursor is over 60% of the width.

10% + 10% + 10% + 10% + 60% = 100%

The final block simply gives the list items some colour (colours of the rainbow, did you notice?).

When it’s all tied together you get a series of list items that alter their widths when hovered (but always totalling 100%). Then we use some CSS3 to round the corners in supportive browsers, and some transitions for the even more supportive browsers. This leaves us with an sliding accordion of rich HTML content that uses no JS and works even in IE7.

Vertical accordion

Just for an optional extra I decided to make the accordion work in a vertical orientation. We use exactly the same markup save for adding an ID to the <ul>, thus:

<ul class="accordion" id="vertical">

Now we stack the list items on top of one another by giving them a 100% width and this time applying the same 10% / 60% logic to the heights instead. The following code is all very self-explanatory so I’ll just leave you with it:

/*------------------------------------*\
  VERTICAL
\*------------------------------------*/
#vertical{
  height:300px;
}
#vertical li{
  float:none;
  height:20%;
  width:100%;
  -moz-transition:height 0.2s ease-out;
  -webkit-transition:height 0.2s ease-out;
  -o-transition:height 0.2s ease-out;
  transition:height 0.2s ease-out;
}
#vertical li:first-of-type{
  -moz-border-radius:10px 10px 0 0;
  -webkit-border-radius:10px 10px 0 0;
  -o-border-radius:10px 10px 0 0;
  border-radius:10px 10px 0 0;
}
#vertical li:last-of-type{
  -moz-border-radius:0 0 10px 10px;
  -webkit-border-radius:0 0 10px 10px;
  -o-border-radius:0 0 10px 10px;
  border-radius:0 0 10px 10px;
}
#vertical:hover li{
  height:10%;
  width:100%;
}
#vertical li:hover{
  height:60%;
  width:100%;
}

As we are inheriting the code from the horizontal version we do have to override the :hover state’s widths by explicitly setting them to 100%, but aside from that pretty much all we’ve done is applied the above theory to heights as opposed to widths. Magic!

Okay, so I can’t re-publish or copy sections of the article but you can either buy .net and read it, or look at the tiny images on the latest issue page. It simply creates what is in the screenshot—a ribbon-like effect that sits outside and then ‘behind’ its content.

I’m not bashing the author’s work at all. It works and is—as far as I can see—pretty robust. However, it certainly doesn’t need five elements and definitely no empty ones. His code was roughly:

<body>

  <wrapper>
    <wrapper>
      <wrapper>
        <h2></h2>
      </wrapper>
      <empty></empty>
    </wrapper>
  </wrapper>

</body>

Mine is:

<body>

  <h2></h2>

</body>

And it does exactly the same thing. The CSS that powers the original makes use of manipulating the CSS borders-arrow behaviour. I opted for a good old fashioned image. There’s nothing wrong with the border-arrow method but I’m orthodox, and manipulating borders to create what is essentially an image just feels really wrong to me. Use whichever you prefer, but remember that images still count!

The full code for my CSS powered ribbon is simply:

<!-- MARKUP -->
<body>
  <h2></h2>
</body>

/* CSS */

/*------------------------------------*\
	MAIN
\*------------------------------------*/
html{
	font-family:Cambria, Georgia, "Times New Roman", Times, serif;
	background:#e4e3d5;
	color:#666;
	height:101%;
}
body{
	width:940px;
	padding:75px 10px;
	margin:0 auto;
	background:#fff;
}

/*------------------------------------*\
	TYPE
\*------------------------------------*/
h2{
	position:relative;
	color:#fff;
	background:#f43059;
	font-size:1.5em;
	float:left;
	clear:both;
	padding:10px 10px 10px 20px;
	margin-left:-20px;
	margin-bottom:20px;
	text-shadow:0 -1px #d0284b, 0 1px #f96080;

	-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	-o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
	box-shadow:2px 2px 0 rgba(0,0,0,0.1);
}
h2:before{
	content:" ";
	background:url(../img/css/ribbon.png);
	display:block;
	width:10px;
	height:10px;
	position:absolute;
	bottom:0;
	left:0;
	margin-bottom:-10px;
	z-index:-1;
}

There we have it in four less elements. His five (discounting the <body>) to my one <h2>. 80% less code.

What this does is creates a white <h2> with a pink background, pulls the <h2> out of the content area with a negative margin and then places the image absolutely left-bottom of the <h2> in a :before pseudo-element. Job done.

Demo

I made a demo, also, which shows how this can be extended using some alternating nth-of-type styles. Feel free to pick it apart and see what does what. If any of the examples above seems out of context then view the demo’s stylesheet and source for the comprehensive code.

Final word

This works in IE 7 (without the :before and :after pseudo-elements), IE8, Firefox and Chrome, all with varying degrees of progressively enhanced niceties. Your code should never suffer for the sake of such tiny design elements. Keep it lean and use an aggressive approach to progressive enhancement in order to keep your markup at its best.

Final final word

This isn’t a dig at the author of the article or .net mag. This is simply an illustration of how progressive enhancement and some sensibility can solve the same problem in a far nicer, cleaner and more sensible fashion.

Furthermore, do feel free to use either the border ‘hack’ or the image method. There’s more than one way to skin a cat…

Demo

I won’t write everything up because a view of the source and CSS should explain everything.

Luke did not commission this work, so please don’t reuse the icons or copy this without permission from the respective people. I allow full use of my code (with attribution) but please don’t copy Luke’s format for social icons—the code is mine but its implementation on social icons is Luke’s.

In short, you can have my code but it was Luke’s idea.

Demo

We also have a daytime version!

First off, look at the demo in IE8 or Firefox, then in Chrome or Safari (i.e. non-Webkit, then Webkit).

In Firefox you should see a series of snowflakes randomly sized and placed across the screen. In Webkit, you should see these snowflakes falling, all at different speeds. We also have a repeat-x background image of some snow running across the bottom of the browser window.

The code

We use a lot of PHP to create the random effects applied to the snowflakes, and also automate a lot of the legwork needed to create 65 unique classes, it’s commented as shown and should make total sense.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Let it snow</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <style type="text/css">

    <?php //If the day parameter is set, use a different background ?>
    <?php if(isset($_GET['time']) && $_GET['time'] == 'day') { ?>
    html{
      background:url(img/css/snow.png) bottom left repeat-x fixed #b4c8cc;
    }
    <?php } ?>

    <?php //Number of snowflakes -- you decide! ?>
    <?php $snowflakeCount = 65;  ?>

    <?php //Create a unique class for each of the snowflakes and assign each one a random size and animation duration ?>
    <?php  for($i = 1; $i <= $snowflakeCount; $i++) { ?>
      .snowflake-<?php echo $i ?>{
        <?php //Create a random decimal number between 1 and 10: ?>
        -webkit-animation-duration:<?php echo (rand(10,100) / 10); ?>s;
        <?php //Create a random decimal number between 0.1 and 2: ?>
        font-size:<?php echo (rand(1,20) / 10); ?>em;
      }
    <?php } ?>
  </style>
</head>

<body>

  <div id="wrapper">
    <h1>Let it snow!</h1>
    <p><a href="/2010/12/let-it-snow/">Return to article.</a></p>
  </div>

  <div id="snow">
    <?php //Loop through your chosen amount of snowflakes and make that many empty spans (with associated class) and randomly place them on-screen ?>
    <?php for($i = 1; $i <= $snowflakeCount; $i++) { ?>
      <span class="snowflake snowflake-<?php echo $i; ?>" style="top:<?php echo rand(1,98); ?>%; left:<?php echo rand(1,98); ?>%"></span>
    <?php  } ?>
  </div>

</body>
</html>

Basically we use PHP to create 65 empty <span>s which are then randomly placed and sized on the page. We also give each one a random -webkit-animation-duration so as to ensure they fall at different speeds. Two points worth noting:

<?php //Create a random decimal number between 1 and 10: ?>
-webkit-animation-duration:<?php echo (rand(10,100) / 10); ?>s;
<?php //Create a random decimal number between 0.1 and 2: ?>
font-size:<?php echo (rand(1,20) / 10); ?>em;

Thanks to Dan Bentley for his PHP input here-and-there—mine is a tad rusty.

Here we use rand(10,100) to create a random whole number between ten and one hundred (let’s say 75). We then divide this by ten to get a decimal (i.e. 7.5) to use as the duration in seconds.
We then use rand(1,20) to create a random number between one and twenty (say, 5) which we then divide by ten to get a decimal (i.e. 0.5) for the font-size in ems.

The CSS

/*------------------------------------*\
  MAIN
\*------------------------------------*/
html{
  font-family:Calibri, Arial, Verdana, sans-serif;
  background:url(../img/css/snow.png) bottom left repeat-x fixed #222;
  color:#fff;
  text-shadow:1px 1px 1px rgba(0,0,0,0.5);
  height:101%;
}
body{
  width:940px;
  padding:10px;
  margin:0 auto;
}
#wrapper{
  position:relative;
  z-index:5; /* Bring the content over the snowflakes */
}
h1{
  font-weight:bold;
  font-size:1.5em;
  margin-bottom:20px;
}
a{
  color:#fff;
}

/*------------------------------------*\
  SNOWFLAKES
\*------------------------------------*/
/* Set up a blank canvas in which to house the snowflakes */
#snow{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow:hidden;
}
.snowflake{
  text-shadow:none;
  position:absolute;
  top:0;
  /* Set up the animation */
  -webkit-animation-name:snowflake-animation;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:linear;
}
/* Fill the empty span with a snowflake-like asterisk */
.snowflake:before{
  content:"*";
}
@-webkit-keyframes snowflake-animation{
  /* Start at the top */
  from{
    top:0%;
    -webkit-transform:rotate(0deg);
  }
  /* Rotate by 360 degrees up until the half way point */
  50%{
    -webkit-transform:rotate(360deg);
  }
  /* Animate to the bottom whilst rotating back to zero */
  to{
    top:100%;
    -webkit-transform:rotate(0deg);
  }
}

The CSS, again, is extremely straightforward and self-explanatory. Use content:""; to keep our code a little cleaner, and animate all the snowflakes top-to-bottom whilst rotating them. Simple!

So there we’ve put a new-age spin on a very dated (and still pretty garish) technique.

Addendum

Following this Twitter conversation between Danny Banks and myself the #snow <div> was introduced. Cheers for the heads-up, Danny!

The only technical downside I can see here is the necessity for that class. Using a simple attribute selector we can ditch that and basically say ‘if any element has a title, put that title after it in CSS’. By simply using [title] over .tooltip we can automate the process and trim some bytes, thus:

<a href="http://twitter.com/jackosborne" title="Follow Jack Osborne on Twitter">Jack Osborne</a>

[title]{
	position:relative;
}
[title]:after{
	content:attr(title);
	color:#fff;
	background:#333;
	background:rgba(51,51,51,0.75);
	padding:5px;
	position:absolute;
	left:-9999px;
	opacity:0;
	bottom:100%;
	white-space:nowrap;
	-webkit-transition:0.25s linear opacity;
}
[title]:hover:after{
	left:5px;
	opacity:1;
}

And in doing so we will cover:

• Design and build a semantic, accessible and sensible progress bar.
• Utilise the much underused method of styling page-specific elements based on their IDs.
• Style the numbers in an ordered list!
• Progressively enhance it with some CSS3.
• Optimise it for mobile.

N.B. This article isn’t so much about a progress bar, but more an illustration that best practices and more advanced techniques can be applied to even the most insignificant aspects of a build to create something awesome!

Design and build

Let us assume the brief is this:

We require a numbered progress bar to indicate user location (past, current and future) during a checkout path on the OurService™ website. It must:

• Be fully accessible.
• Provide a section title with supporting information.
• Highlight the user’s current location in the process.
• Be navigable.
• Work on mobile devices.

The design, let’s assume, is predefined. It looks as above, purely because it has to. The design is not the major focus of this article, the code and techniques are.

“Code what you consume, not what you see.”

Design

The progress bar shall be a linear, left to right series of linked labels. Current location shall be indicated by a change in colour, progression onto the next step shall be indicated by an arrow.

Build

For the purposes of this tutorial we shall assume the current page is the payment page.

One school of though I find invaluable when it comes to sensible and semantic builds is code what you consume, not what you see. This is a very broad generalisation but works for the most part. Code content independently of (and before you consider) coding any styles. Web development basics, but fundamental to web standards and progressive enhancement.

So, what are we consuming? It’s an ordered list of steps which indicate location in a process.

Okay so first off we know we need an <ol> as this list has fixed and definite order. We also require titles and supporting copy for each item. As the titles and supporting copy require separation from one another we are going to wrap the titles in a <span>; a generic inline container. This leaves us with:

<body id="payment-page">

  <ol id="progress">

    <li class="details-step">
      <a href="#">
        <span>Your details</span>
        Name, email, address.
      </a>
    </li>

    <li class="account-step">
      <a href="#">
        <span>Create account</span>
        Username and custom URL.
      </a>
    </li>

    <li class="products-step">
      <a href="#">
        <span>Product options</span>
        Choose your package.
      </a>
    </li>

    <li class="payment-step">
      <a href="#">
        <strong>
          <span>Payment</span>
          PayPal, or credit card.
        </strong>
      </a>
    </li>

    <li class="go-step">
      <a href="#">
        <span>Go!</span>
        Start using OurService™
      </a>
    </li>

  </ol>

</body>

There are a few things in this code which I’ve not yet mentioned, one is the ID on the <body>, another being the class on each <li> and the last being the <strong> wrapped around the payment page’s text. I shall explain these next.

<body> ID and list item classes

A combination of an ID on the <body> and a class on a list item can allow you to know what the current page is. The CSS #payment-page .payment-step{} will target the payment section of the progress bar when it is on the payment page in the process. Similarly, #go-page .go-step{} will target the go item on the go page. I wrote a much more in-depth article on this over at Venturelab.

The <strong> around the payment step’s text

If you’re determining current page programatically, one could argue inserting a class="current" on the relevant item. This is doable, but avoiding such a class name is far nicer.

As stated earlier we are assuming the current page to be the payment page. Now, we can style the current step on any page using CSS, as outlined above, however how would a user with styles disabled be able to tell what the current page is? How can we highlight this for those users?

Well the solution would be to programatically wrap a <strong> around the text on that page, undo the bolding effects with CSS for browsers with styles enabled, and allow people viewing unstyled content to see that the bolded item is the current page. This gives us:

As you can see, users with styles disabled can clearly see the current link is the bolded one, this makes the progress bar that little bit more accessible to those who might need it.

So there we have it, the markup that powers the whole thing.

Styling

Now to style this thing up. First off we’ll look at the very basic CSS, and that alone:

/*------------------------------------*\
  MAIN
\*------------------------------------*/
html{
  height:101%;
}
body{
  font-family:Calibri, Arial, Verdana, sans-serif;
  background:#fff;
  color:#88979e;
  width:940px;
  padding:10px;
  margin:0 auto;
}

/*------------------------------------*\
  PROGRESS
\*------------------------------------*/
#progress{
  list-style:none; /* Remove the bullets */
  float:left; /* Make its width equal to the combined width of the items inside it */
  margin-bottom:20px;
}
#progress li{
  float:left; /* Stack them all up left */
  font-size:0.75em; /* Make the entire item smaller */
  font-style:italic; /* Make the entire item italic */
}
#progress a{
  display:block;
  text-decoration:none;
  padding:10px 25px 10px 10px; /* Padding to accomodate background image */
  background:#7b8d77;
  color:#fff;
}
#progress span{
  font-size:1.333em; /* Bring the size of the title only back up */
  font-weight:bold;
  display:block;
  font-style:normal; /* Undo the italics */
}
#progress strong{
  font-weight:normal; /* Remove the bolding for CSS enabled browsers */
}
#progress a:hover{
  text-decoration:none;
}
#progress a:hover span{
  text-decoration:underline; /* Underline the title on hover */
}
#details-page .details-step a,
#account-page .account-step a,
#products-page .products-step a,
#payment-page .payment-step a{
  background:url(../img/css/splitter.gif) right center no-repeat #a49d4d; /* Arrow image on the current step */
}
#go-page .go-step a{
  background:#a49d4d; /* Arrow image not needed on final step, colour only */
}

All of the above is very obvious, it is essentially just like creating a normal navigational menu, and gives us this:

Styling numbers in ordered lists

Next up we style the numbers in the ordered list by using the very very useful and much unknown CSS counter module. Because you have such limited control over the appearance of your bullets in (ordered) lists they can be a pain to style. This pain is alleviated somewhat when using an unordered list as you can simply use a background image. It is an altogether different story when you’re using an ordered list as the bullet needs to change with each list item.

What we do here is use CSS to do a very prog-like job; we get it to loop through each item in a parent container and then increment a user-defined value each time it encounters a specified child. Sounds Greek? Read this.

Once we have this number available to us we use the CSS :before pseudo-element and the content:; property to insert the number before each item. How cool is that?!

/*------------------------------------*\
  PROGRESS
\*------------------------------------*/
#progress{
  list-style:none;
  float:left;
  margin-bottom:20px;
  counter-reset:step; /* Set up name of increment on parent */
}
#progress li{
  float:left;
  font-size:0.75em;
  font-style:italic;
}
#progress a{
  display:block;
  text-decoration:none;
  padding:10px 25px 10px 30px; /* Padding changed to 30px to accomodate number */
  background:#7b8d77;
  color:#fff;
  position:relative; /* Relative position to allow absolute positioning later on */
}
#progress span{
  font-size:1.333em;
  font-weight:bold;
  display:block;
  font-style:normal;
}
#progress strong{
  font-weight:normal
}
#progress a:hover{
  text-decoration:none;
}
#progress a:hover span{
  text-decoration:underline;
}
#progress li a:before{
  counter-increment:step; /* Increment the step on each occurance of this (pesudo) element */
  content:counter(step); /* Write out value of the increment */
  text-align:center;
  font-weight:bold;
  position:absolute; /* Position number */
  top:50%;
  left:5px;
  margin-top:-8px;
}
#details-page .details-step a,
#account-page .account-step a,
#products-page .products-step a,
#payment-page .payment-step a{
  background:url(../img/css/splitter.gif) right center no-repeat #a49d4d;
}
#go-page .go-step a{
  background:#a49d4d;
}

This then gives us this:

Progressively enhancing

Now for the CSS3 progressive bits:

/*------------------------------------*\
  PROGRESS
\*------------------------------------*/
#progress{
  background:#7b8d77; /* Give the ol a background to prevent white showing through behind the items' round corners (change value to #f00 to see what I mean) */
}
#progress{
  -moz-border-radius:5px;/* Round all corners of the progress bar */
  -webkit-border-radius:5px;
  border-radius:5px;
}
#progress a{
  text-shadow:1px 1px 1px rgba(0,0,0,0.25); /* A small text-shadow */
  -moz-border-radius:5px 0 0 5px; /* Round the top- and bottom-left corners */
  -webkit-border-radius:5px 0 0 5px;
  border-radius:5px 0 0 5px;
}
#details-page .details-step a,
#account-page .account-step a,
#products-page .products-step a,
#payment-page .payment-step a{
  background:url(../img/css/splitter.gif) right center no-repeat #a49d4d;
}
#progress .go-step a{
  -moz-border-radius:5px; /* Round all corners of the final step */
  -webkit-border-radius:5px;
  border-radius:5px;
}

The full, combined CSS for the progress bar so far is:

/*------------------------------------*\
  MAIN
\*------------------------------------*/
html{
  height:101%;
}
body{
  font-family:Calibri, Arial, Verdana, sans-serif;
  background:#fff;
  color:#88979e;
  width:940px;
  padding:10px;
  margin:0 auto;
}

/*------------------------------------*\
  PROGRESS
\*------------------------------------*/
#progress{
  list-style:none;
  background:#7b8d77;
  float:left;
  margin-bottom:20px;
  counter-reset:step;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}
#progress li{
  float:left;
  font-size:0.75em;
  font-style:italic;
}
#progress a{
  display:block;
  text-decoration:none;
  padding:10px 25px 10px 30px;
  background:#7b8d77;
  color:#fff;
  text-shadow:1px 1px 1px rgba(0,0,0,0.25);
  position:relative;
  -moz-border-radius:5px 0 0 5px;
  -webkit-border-radius:5px 0 0 5px;
  border-radius:5px 0 0 5px;
}
#progress span{
  font-size:1.333em;
  font-weight:bold;
  display:block;
  font-style:normal;
}
#progress strong{
  font-weight:normal
}
#progress a:hover{
  text-decoration:none;
}
#progress a:hover span{
  text-decoration:underline;
}

#progress li a:before{
  counter-increment:step;
  content:counter(step);
  text-align:center;
  font-weight:bold;
  position:absolute;
  top:50%;
  left:5px;
  margin-top:-8px;
  padding:2px 6px;
  background:rgba(0,0,0,0.25);

  -moz-border-radius:20px;
  -webkit-border-radius:20px;
  border-radius:20px;
}
#details-page .details-step a,
#account-page .account-step a,
#products-page .products-step a,
#payment-page .payment-step a{
  background:url(../img/css/splitter.gif) right center no-repeat #a49d4d;
}
#go-page .go-step a{
  background:#a49d4d;
}
#progress .go-step a{
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
}

Which, when coupled with the markup, gives this:

Recap

So, let’s cover what we’ve done so far. We’ve:

• Coded up a semantic progress bar (using an ordered list and correct generic elements).
• Made it accessible (addition of the strong around the content for non-CSS browsers).
• Styled it all up.
• Made use of the body ID trick to mark the current page.
• Used CSS counters to style the numbers of an ordered list
• Progressively enhanced it all to make it a little easier on the eyes.

Mobile optimisation

For more information on mobile/iPhone optimised sites please see my associated article.

Next up we need to optimise this thing for mobile. This couldn’t be simpler. The key to optimising sites for mobile is linearise. Linearise everything.

In your markup, add this line to the <head> section, thus:

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Progress</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
  <link rel="stylesheet" type="text/css" href="css/new-style.css" />
</head>

This tells the user agent that the viewport should be the same as the device’s own screen-size, that it should be initially set to a scale of 1 (i.e. no scale), its maximum scale is set to 1, and that users can’t scale themselves.

Now, add the following to the very end of your CSS file:

/*------------------------------------*\
	MOBILE
\*------------------------------------*/
@media (max-width: 480px){ /* In any browser narrower that 480px... */
body{
	width:auto; /* Give the body a fluid width... */
	padding:5px; /* And a slight padding */
}
#progress{
	width:auto; /* Give the list a fluid width */
	background:none; /* Remove the list's background... */
	float:none; /* ...and float */
}
#progress li{
	float:none; /* Remove list item float, causing them to stack */
	margin-bottom:1px; /* Space them slightly */
}
#progress a{
	margin:0 10px; /* Indent the left and right of each item by 10px */
	-moz-border-radius:5px; /* Round all corners */
	-webkit-border-radius:5px;
	border-radius:5px;
}
#details-page .details-step a,
#account-page .account-step a,
#products-page .products-step a,
#payment-page .payment-step a,
#go-page .go-step a{
	background:#a49d4d; /* Set the background of the current item */
	margin:0 auto; /* Remove the 10px indent to show that the step is current */
}
}

Now, if you want to test this and don’t have a smartphone, or haven’t got this hosted in a live environment, simply resize your browser window right down until you see the change. I tend to use the Firefox Web Developer Toolbar addon to resize the window to 480×800px.

On the iPhone this now looks like:

Demo

For the full working demo head to http://csswizardry.com/demos/progress-bar/. For the complete CSS (with reset) please see http://csswizardry.com/demos/progress-bar/css/style.css. Also, try using Firebug to change the <body>’s ID to go-page.

Final words

As I stated previously, this article isn’t so much about the progress bar itself. What I hope this article has shown is how something as small and trivial as a progress bar has a wealth of little nooks and crannies in which to immerse yourself. Semantics, accessibility, using <body> IDs to style current states without a class="current", how to use CSS counters to style the numbers in an ordered list, how to progressively enhance lean markup, and how to optimise things for mobile in a flash.

All of the above skills are easily and quickly transferable. It might be a progress bar today, but what could it be tomorrow? Skills like the ones covered here give you the potential to make something great, out of something very very simple.