The iPhone in Pure CSS

What can't you do with CSS? We're not sure anymore. The little web standard that could seems to be capable of doing just about anything these days, including rendering a life-like image of an iPhone.
Image may contain Cell Phone Electronics Mobile Phone Phone and Iphone
That's not an iPhone, just some fancy CSS. Image: Screenshot/Webmonkey

If the new Twitter bird logo can be rendered in pure CSS, why not trying making an iPhone out of nothing more than web standards like HTML and CSS?

The image above is a screenshot of an iPhone rendered in pure CSS. It's true there probably isn't much use for an iPhone rendered in pure CSS, but it's an impressive feat and testament to the power of CSS today.

The very well done iPhone in CSS demo is the work of developer Dylan Hudson, who's head of user experience over at AppStack (@dyln_hdsn on Twitter). If you'd like to have a look at the code behind it, head on over to Codepen.io, a new site for sharing code snippets.

While you're there have a look around Codepen.io; it just launched as a public beta and looks like a really nice way to share code – something of a cross between JSFiddle and Dribbble. It has a nice code editor, the ability to fork and share code as well as social aspects like following people, marking items as favorites and leaving comments.

Codepen.io is the brainchild of developers Alex Vazquez, Tim Sabat and CSS guru Chris Coyer. Check out Coyer's site for some more background info. (Among other things, Coyer says Codepen's nice editor interface may be open sourced as a stand alone app at some point.)