Designing a departures board with CSS3

Warning: Technical article ahead. Beware.

As I’ve written before, CSS3 is very good for designing things. Today we’re going to use it to do some fun pixel pushing. Behold our inspiration.

This article contains features and examples that do no work properly in the dashboard. Please follow to the version on my site.

Markup

Simple. Use any thing you like. We will be using a div called .board.

The basics

We’ll start with designing for Webkit for now. First the basic shape and color.

.board {
    padding:  5px 10px;
    display: inline-block;
    background: rgb(30, 30, 30);
    -webkit-border-radius: 3px;
    text-transform: uppercase;
    color: white;
}

yields:

Shadows

Now let’s make the dark shadow effects from the top and sides of the box. For this we’ll use multiple inset box shadow declarations:

-webkit-box-shadow:  
  inset 2px 0px 4px rgba(0,0,0,0.9), 
  inset -2px 0px 4px rgba(0,0,0,0.9);

Gives:

Spinner

These sort’s of displays use a spinner and thin boards to display different strings. When you go to a train station or airport (that still use this magnificently old tech) you can see the dividing line between the two halves. We’ll recreate that here.

How? Using a pseudo element with thin boarders.

.board:before {
    border-top: 1px solid rgba(0,0,0,0.4);
    /* this line will be barely visible, but that's how we want it */
    border-bottom: 1px solid rgba(255,255,255,0.08);
    height: 0px;
    position: relative;
    /* you might need to ajust these positions to your layout */
    width: 110%;
    left: -9px;
    top: 11px;
    content: " "; /* we have to set this, otherwise it won't be visible */
    display: block;
}

This is how it looks:

Border

To make the spinner look realistic we have to also pay attention to the bottom border. It has to have a 3D effect an look plastic enough. We’d also like to see the board bellow it. So we modify our shadows definition and add a border.

border-bottom: 1px solid rgba(0,0,0,0.7);
-webkit-box-shadow: 
  inset 0 -1px 0 rgba(50,50,50,0.7), 
  inset 0 -2px 0 rgba(0,0,0,0.7), 
  inset 2px 0px 4px rgba(0,0,0,0.9), 
  inset -2px 0px 4px rgba(0,0,0,0.9);

Lighting

Light’s and shadows are a crucial part of any visualization. So as a finishing touch we add a few light effects (with a subtle gradient and a few more shadows):

-webkit-box-shadow: 
  inset 0 -1px 0 rgba(50,50,50,0.7), 
  inset 0 -2px 0 rgba(0,0,0,0.7), 
  inset 2px 0px 4px rgba(0,0,0,0.9), 
  inset -2px 0px 4px rgba(0,0,0,0.9), 
  /* This one is new and adds a light edge on the bottom*/
  0 1px 0px rgba(255,255,255,0.2); 
background: -webkit-gradient(linear, center top, center bottom, 
  color-stop(0.0, rgba(0,0,0, 1)), 
  color-stop(0.05, rgba(30,30,30, 1)),  
  color-stop(1.0, rgba(50, 50, 60, 1)));

Which yields:

Conclusion

As you can see, CSS3 enables us to do with a few lines of code some incredible pixel-pushing. So here’s the complete code with syntax for other browsers and fallbacks for graceful degradation:

Let me know if you’d like more articles like this.

Edit: For an animated version see this project by Paul Cuthbertson.