Make a CSS TARDIS

This article first appeared in issue 234 of .net magazine – the world's best-selling magazine for web designers and developers.

A few weeks ago, I was enjoying the first ever episode of Doctor Who, titled ‘An Unearthly Child’. Aside from the title character (who needs no introduction), the programme – 50 in November – is notable for introducing the TARDIS: a machine that can travel anywhere in time and space, is bigger inside than out and can blend in with its surroundings! It appears as a London police box, common in 1963 when the series first aired.

As I watched I thought of recreating the TARDIS in the browser using CSS3. I found myself re-imagining the police box’s key components as HTML5 elements, then considering how they might be styled. Realising that this was all seeming quite plausible, I grabbed my MacBook and began putting my theory to the test.

Stage 1: The left door

I thought it would be wise to initially focus on an individual section and chose the left door, which features slightly more detail than its sibling. It was my intention to style both doors using a single generic class of door. The divided window comprises an unordered-list containing six list-items, one for each glass pane. Finally, three door panels were added, the first of which contains an instruction notice.

I’ve tried to keep markup to an absolute minimum. Via :nth-child you can target specific elements based on their order; this enabled me to darken certain window panes without the need for an additional CSS class. For the door panels, I applied an inset box-shadow, which gives them a realistic sense of depth – although they still seemed unfinished. I then realised what I was missing; a defined edge, for which I used a light border along the bottom.

.panel { width: 100%; height: 1.38em; display: block; box-shadow: 0 0 0.02em 0 #000; padding-left: 0; box-sizing: border-box; margin-bottom: 0.25em; box-shadow: inset 0 0.020em 0.20em #000; border-bottom: 0.010em solid #1066A8;}

The highlight and shadow methods were then placed on everything, really bringing the door to life. I now had a pretty convincing police box door.

Stage 2: Framing the doors

For the second door I simply replicated the first, then wrapped both in a parent container. Instead of an instructions notice, this new door would eventually feature a St John Ambulance badge, so the class of notice was replaced and the duplicated instructions were stripped out. The door’s inset box-shadow was offset-flipped to the right-hand side.

Two tall posts were then placed either side of the doors using the pseudo selectors ::before and ::after, reducing the need for extra markup. Both posts have thick borders where they meet the doors, making an illusion of perspective.

##doors::before,#doors::after { content: ''; width: 0.50em; display: block; height: 7.74em; float: left; background: #145788; border: 0.010em solid #1066A8; border-left: 0.010em solid #1066A8; border-right: 0.050em solid #0C2D4C; border-bottom: none; margin-top: -0.96em; border-radius: 0.050em 0.050em 0 0; position: relative; z-index: 1;}

Stage 3: Signs, base and top

The ‘Police Public Call Box’ sign comprises a heading inside a container. Its text-alignment is justified to keep ‘Police’ and ‘Box’ far apart. Between sits the ‘Public Call’ subtext, wrapped in a small so it can be styled. The other two signs, seen from the side and offset to the left and right are inserted, as you may have guessed, via :before and :after. A base for the box was slotted under the doors.

#sign h2 { background: #091A45; color: #fff; font-size: 0.29em; font-weight: 100; text-transform: uppercase; padding: 0.30em; border: 0.040em solid #1066A8; box-shadow: inset 0 0 0.50em 0 #000; letter-spacing: 0.10em; overflow: hidden; height: 1em; text-align: center; width: 10em; margin: 0 auto;}

The top of the police box consists of three sections inside a parent container: the lamp, the slanted roof and the skirting beneath it. The roof is effectively a wide CSS triangle, made from borders. A generous amount of white box-shadow produces the lamp’s glow, which appears to partially illuminate the roof beneath.

.roof { content: ''; width: 0; height: 0; border-left: 2em solid rgba(255, 255, 255, 0); border-right: 2em solid rgba(255, 255, 255, 0); border-bottom: 0.30em solid #1066A8; margin-left: 0.32em; position: relative; margin-bottom: 0.14em;}

Stage 4: Finishing touches

To finish, a narrow strip is placed where the doors meet. The lock, door-handle and St John Ambulance badge are at this time Retina-optimised graphics, though it’s my intention to eventually replace these with pure CSS elements in the near future. And there you have it, a CSS TARDIS.

It’s my aim to gradually introduce interactivity and animation using CSS3 transitions. The TARDIS will soon be made to materialise and dematerialise at a click, accompanied most-likely by that authentic wheezing sound (HTML5 audio). To celebrate Doctor Who’s upcoming anniversary, I’m also introducing a timeline spanning the show’s 50-year history. Interacting with it will alter the police box’s appearance to correspond with the era you’ve chosen. In the meantime you can take a closer look at my TARDIS here.

Discover what's next for augmented reality at our sister site, Creative Bloq.