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.

Designing with CSS3

Designing in an image editor

Designing compelling web pages can be a daunting task. Traditionally the method would start in an image editing application (although quite a lot of people have a pen & paper phase before that). The problem with this approach is the general lack of a proper tool for designing websites. Most designers today use Photoshop; either because they are used to it before they started with web design or because of it’s status as a industry standard. However the problem with Photoshop is that it was never designed as a tool for this kind of job. The tool that was designed for this type of job - Fireworks - seems somehow out of Adobe’s focus while feature creep slowly comes in to choke the program to a slow death (meaning that it’s been unusable since CS3 and frankly what we expect UI-wise has evolved since). There are many other tools out there, but few seem specifically designed for this type of job (with the notable exception of Opacity).

The reason this is important is that the web defines it’s own visual language by which designers either must or at least very often should abide to - things like links being different from other text or headers being of a larger type. However we also have to deal with flexibility - we typically need our design to be usable in various conditions like varying screen sizes, resolutions, quirks of CMSs etc. Another important aspect is the interactive part of web pages - unlike an image the web page changes when the user interacts with it (if only setting hover states for links). Some designers (typically beginners in web design) believe that the job is done at the moment they send the coder the finished PSD file. However that’s when the real design challenge begins.

Designing in the browser

So if not design in an image editor then where? How about the web browser? It supports a simple visual language out of the box, it can simulate perfectly effects such as flexible window sizes and it can be extremely interactive. Now a few years ago this proposition would seem quite insane. The browser didn’t support many of the visual elements and effects that form essential parts of almost any UI design out there - elements such as subtle shadows and lightning effects to give UI elements the appearance of real objects, gradients to blend colors smoothly and naturally and powerful transparency settings for objects to make the site appear appealing.

Browsers however evolve incredibly fast and with good ones (to make this clear: I’m speaking of Webkit browsers here) you can do this stuff a lot simpler then you can in Photoshop. Of course there is still a myriad of things you still can’t do with a web browser (my favorite being applying a simple Noise filter for a textured background), but it does cover the most needed visual elements uses in todays designs.

Plus of course the added benefit of having a reasonable stylesheet prepared that should require much less time to repare for production (the main job being preparing to work in not so good browsers).

I hope you consider this argument and maybe try this approach out at your next project (also check out this article for more info and an example).

A few tips

What I want to touch on however is that it might not be the best idea just to jump into TextEdit and hack away at your CSS. Since you are now going to spend much more time working with the language you might as well make it a bit easier. One of the things that has been around for some time are CSS abstraction languages which aim to provide a higher level language that then compiles into CSS (the best known is probably SASS). You may have heard about them or even tried one. However for me none of them really sticked when I was working the traditional way. However their better structuring and more extensive commenting facilities come in very handy when the CSS is not only an implementation of a design, but the design itself. The one I would generally recommend is named LESS and it’s main benefits include pretty much the same syntax as normal CSS. That means you don’t need to learn almost anything new. With that comes the very handy TextMate bundle that compiles LESS files on save. This works very nicely. I also would recommend using the LESS3 toolset (by yours truly) which abstracts a lot of the cutting edge quirks and makes your stylesheet automagically a lot more old browser friendly.

Next you should definitely make friends with the Webkit’s Web inspector. Just right-click anywhere on your page and select “Inspect element”. This is how to enable it in your browser. Explore and hack away.

I hope that this was inspiring to you and please if you indeed use some of these techniques, let me know about your experience.