14 March, 2011

Written by Harry Roberts on CSS Wizardry.

I absolutely love coding up the more semantic aspects of a build. Usually forms and tables, it’s these massively semantic (read; lots of elements with very specific jobs) that I really love coming up against. They’re not all that challenging, but they’re very fun (to me at least–is that sad?!)

After Séan shared the Financial Times’ timeline I got to wondering how I’d code my own (albeit massively more simple) timeline.

This is what I came up with: HTML/CSS timeline.

The markup

The markup is amazingly simple. Semantically I used an

. This was quite an obvious choice as this is an ordered list of events. I used one id="" and some supporting datetime attributes where known (some exact dates are unknown, therefore not included (hopefully you’ll know your exact dates!)), and then that’s it:

  

    July 1990
    
Born
  

  

    September 1994
    
Started first school
  

  

    September 1999
    
Started middle school
  

  

    September 2003
    
Started high school
  

  

    September 2006
    
Started 6th Form
  

  

    November 2007
    
Registered csswizardry.com
  

  

    July 2008
    
Joined Sense Internet as Web Developer
  

  

    March 2009
    
Joined Twitter
  

  

    January 2010
    
Joined Venturelab as Web Developer
  

  

    January 2011
    
Became a member of the Smashing Magazine Experts Panel
  

  

    March 2011
    
Joined Sky as Senior UI Developer
  

I was initially marking the dates up as s but as Mark pointed out I could use the new HTML5 element.

The CSS

As far as basic styling goes, I won’t insult your intelligence; I merely set some type styles and background colours on the list items.

The really interesting bits are the odd/even styling, the ‘spine’, the dot and arrow ‘images’ and the branches off the centre of the timeline. I put images in quotes because they’re not actually images at all, they’re :before and :after pseudo-elements.

The spine

The spine running down the timeline is actually an image and is applied as a background using the fantastic Dummy Image:

#timeline{
    background:url(http://dummyimage.com/1x1/f43059/f43059.gif) top center repeat-y;
    width:820px;
    padding:50px 0;
    margin:0 auto 50px auto;
    overflow:hidden;
    list-style:none;
    position:relative;
}

The arrow and dot

The arrow and dot, as mentioned above, are actually pseudo-elements. Their CSS is:

#timeline:before, 
#timeline:after{ 
    content:" ";
    width:10px;
    height:10px;
    display:block;
    background:#f43059;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-5px;
    
    -webkit-border-radius:20px;
        -moz-border-radius:20px;
            border-radius:20px;
}
#timeline:after{
    margin-left:-7px;
    background:none;
    border:7px solid transparent;
    border-top-color:#f43059;
    width:0;
    height:0;
    top:auto;
    bottom:-7px;
    
    -webkit-border-radius:0;
        -moz-border-radius:0;
            border-radius:0;
}

Here we’ve created two empty pseudo-elements that are shaped like an arrow and a dot and then absolutely position them at the top and bottom of the ordered list. They sit over the top of the spine, giving the illusion of all being connected.

It’s worth saying that I’m not actually a fan of the border-arrow behaviour, but this is an experimental piece.

The branches

The branches that span between the list items and the spine are, again, pseudo elements. They are 70px wide and 1px high and have a gradient background which transitions from the colour of the spine to the colour of the list items. The CSS powering those is:

#timeline li:before,
#timeline li:after{
  content:" ";
  width:70px;
  height:1px;
  background:#f43059;
  position:absolute;
  left:100%;
  top:50%;
  background:-moz-linear-gradient(0,#d8d566,#f43059);
  background:-webkit-gradient(linear,left top,right top,from(#d8d566),to(#f43059));
}

So by now we’ve added start and end points, a spine and branches to our timeline with no extra markup whatsoever. Lean!

Odd/even styling

The odd/even styling of each list item is achieved, as you might expect, using nth-of-type() selectors. What we do is move every even list item over the right of the

and move its branch to attach to the spine accordingly:

#timeline