CSS TARDIS BETA by John Galantini

Police Public
Call Box

Police Telephone

Free for use of public

Advice & assistance obtainable immediately

Officer & cars
respond to all calls

Pull to open

Well, it's a Police Box. What on earth's it doing here? Feel it. Do you feel it? It's ALIVE!!!
A thing that looks like a police box, standing in a junkyard, can move anywhere in time and space?!!
Well, I made up the name TARDIS from the intials: Time And Relative Dimension In Space.
Have you ever thought what it's like to be wanderers in the fourth dimension? Have you? ...to be exiles?

This is a CSS replica of the TARDIS as it originally appeared during the earliest years of Doctor Who. Designed to blend into its surroundings, the ship had disguised itself as a Police Box, a common sight in 1960s London, although it has remained in this form ever since.

I conceived the idea of creating this whilst watching the pilot episode, An Unearthly Child. It has been achieved using HTML5 & CSS3. It's a work in progress. The end goal is to replace graphics with pure CSS elements and introduce animation. Please follow me for updates on the project.

An Introduction

Much like the Daleks and the programme's unmistakable theme music, Doctor Who's TARDIS has been firmly rooted in British culture for decades. Its now iconic Police Box form is instantly recognisable world-wide. Even the word TARDIS is now commonly used to describe anything that seems to be bigger on the inside, that on the outside.

Lets look back at our first glimpse inside its doors in this clip taken from the first episode, first broadcast in 1963.

Building the TARDIS

It occured to me that building the Police Box for the web would be relatively straight forward and could be be achieved almost entirely using pure CSS. It also presented a fair share of challenges.

It only took a few hours to get the basic police box assembled. I started with the doors; using inset box-shadow and border-color to give them a realistic sense of depth. I then worked outwards, constructing a frame around them, followed by a base, roof and sign.

Pseudo classes such as ::before and ::after helped keep my markup to a minimum and subtle differences in border colour give it's edges a realistic shine. Z-indexing also plays a big part in bringing the illusion to life and that's all it is - an illusion.

Browser Support

Having built the TARDIS I spent a few days testing it out in some of the most common browers and platforms. The TARDIS looks best when viewed in Safari for Mac and IOS devices.

Some of the CSS3 properties used in this project aren't supported by any version of Internet Explorer, oh and Windows users may see rough fonts when vewing this site with Chrome. That's how Chrome renders them I'm afraid.

Browser Mac Windows IOS
Safari 5 Yes - Yes
Chrome 20 Yes Yes N/A
FireFox 13 Yes No N/A
Internet Explorer 9 N/A Yes N/A
Internet Explorer 8 - - -
Internet Explorer 7 - - -