9 eye-popping images created purely in CSS3

TARDIS/Police Box
Doctor Who fanatic John Galantini has built this experimental TARDIS using CSS3 HTML5. It’s now possible to create icons, logos and graphics entirely in CSS3 markup, as these inspirational experiments show. 08. Classic train
Taufik Nurrohman has developed this old-time pure stream train as a CSS3 image. Vasiliy Zubach’s interactive pure CSS iPhone 4 behaves as you would expect, complete with sound effects and features icons of its own to boot! By the looks of these takes on Darth Vader and a Stormtrooper, we reckon he’s done a pretty fine job! Inspiring stuff! Believe it or not, this CSS3 image has been made entirely using markup and an SVG. Internet Explorer logo
Inspired by David Desandro’s Opera CSS logo and Zander Martineau’s pure CSS icons, Andreas Jacob recreated the logo of the world’s biggest browser as a CSS3 image. iPhone 4
If you were impressed by the iOS icons above, you ain’t seen nothing yet. He’s paid close attention to its many meticulous details, particularly where the wheels are concerned. Back to the Future logo
We love a bit of Back to the Future at Creative Bloq, and we were stoked to learn there was a Back to the Future font, which Lucas Garron used to recreate the Back to the Future logo using markup. Let us know about it in the comments! It’s currently a work in progress and while it’s a still image at the moment, there are plans to take it further by introducing interactive elements and animation. Also, Windows users may see rough fonts when vewing this site with Google Chrome. Breaking Bad Title Card
Tim Pietrusky’s ‘tribute to the best series in the world’, is, let’s face it, a pretty spectacular recreation of the show’s title card. The days when you needed an image editor such as Photoshop or Fireworks to create visuals to use on your web page are drawing to a close. Made by: Vasiliy Zubach
NOTE: This CSS3 image is viewed best with the latest versions of Safari and Chrome in Mac OS X. Made by: Taufik Nurrohman
04. iOS icons
Louis Harboe has amazed developers with these astounding replica iOS icons. Made by: Lucas Garron
NOTE: This CSS3 image is currently only designed to work in Safari, but “works okay in Chrome”. Hard as it is to believe, he only used markup to create these bright, colourful and detailed CSS3 images. Made by: John Galantini
03. Made by: Upperdog
09. 07. Made by: Kris Triplett

Updated: 07.12.2014 — 19:56