iPhone 4 created purely from CSS3 code can slide to unlock and more

HTML5 and CSS expert Vasily Zubach has put together a quite amazing render of an iPhone 4 created solely using CSS3. Because it was created in this manner, it does not include any images at all, it is all done with code.

This rendering of iPhone 4 and its icons was made in pure CSS3. No images, no base64, no SVG, no canvas, just 3395 lines of CSS code and 335 lines of Javascript code (with jQuery, of course).Viewed best with the latest versions of Safari and Chrome in Mac OS X.

You can see what we mean by amazing, when you visit the full render here. It is not just a render but it also offers a certain amount of functionality too. You can slide to unlock, click the home button and even turn it on and off using the power button. Very clever work!

Source: TNW


UK editor at iMore, mobile technology lover and air conditioning design engineer.

More Posts



← Previously

iPhone 4S audio issue most likely won't see a fix with iOS 5.1

Next up →

Weekly Mod: How to replace a battery in an iPhone 3G, iPhone 3GS

There are 15 comments. Add yours.

Kunal says:

The thing that I like about objects created with CSS, you can zoom into them like any vector. And, this is no different. Awesome!!

Dustin says:

Just did it on my iPhone 4S and it worked great. This is cool

iPhoneDon797 says:

I try to respect the hard work from the developer community and designers out there but I'm really failing to see the point in this. Couldn't his time and talent be used somewhere else?

TenInchFryingPan says:

Seriously, if you fail to see why this is cool, then don't even bother commenting on it because you just make yourself look foolish.

iPhoneDon797 says:

You just made yourself look like a D Bag. Is this guy doing this to find a more economical way of doing certain things on an iPhone or is it something he wanted to try "just to see if it works?" if he's trying to improve a process then, hey, good job and more power to him. But it looks like he took a simple process and took the long way around. If I'm wrong, fine but don't be a D-Bag.

TenInchFryingPan says:

Oh my god, you really have no clue what you're talking about.
Do you even know what CSS or HTML5 are... or why they are important? Obviously not.
Please, crawl back to your little world if ignorance with all of the other people who don't know how the WWW functions.

iPhoneDon797 says:

Oh, so you really are the biggest D-Bag on here, and there are a lot of them who post useless disrespecting garbage for comments. I was trying to be respectful to the creator of the this CSS/HTML5 iPhone but you are a pompous piece of sh-t.

Rainman76 says:

That's kind of like saying, why did Columbus bother crossing the ocean? Seems like a waste of time when there were already established routes to the East.

Jon says:

Waste of time. I could care less what he does but this "app" has no purpose whatsoever.

Mike says:

its not PURE CSS if it has javascript

LostAlone says:

Can someone PLEASE explain why this is interesting or important ?
I'm not trolling, I genuinely have no idea what this is about.

ArGiEs says:

Same here, I'm stark ignorant. What's the bottom line with this?