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.

In this clip, taken from the second episode, science Ian Chesterton refuses to believe that they have just travelled in time. After stepping outside, the Doctor makes a distrubing discovery.

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

-

-

-

I specialise in producing high-quality interfaces for HTML5 applications and responsive websites. As well as developing for the web, I also design for it. @johngalantini85