Developer Builds A Virtual iPhone: Pure CSS3, No Images Whatsoever

[Anthony Bouchard]

Here's something you don't see every day.

It's one thing when you have an iPhone 4 image and you make it animated on a Web Site with JavaScript, Flash, HTML5 or some other kind of animating code. But it's a whole new ball park when you actually make the iPhone 4 from scratch with no pictures, no templates, no canvases, but pure CSS3 code. That's right folks, take a good look at the screenshot above - there isn't a single image in it. It's pure CSS3 code.

Technically speaking, the screenshot above is a picture - the real deal can be seen on this Web Site. It's composed of 3,395 lines of CSS code and 335 lines of JavaScript code that can be viewed by seeing the page source through your Web Browser application. The project was built by Vasiliy Zubach, who is better known as TjRus all across the Internet. The best part about being made out of code instead of images is that it can load zippier, and also be scaled more effectively.

The CSS3 iPhone 4 features 3 fully functional functions; a working 'slide to unlock' bar that you can click and drag to get onto the home screen. It also has a working power button that you can click on to use, and a working home button that you can click on to use. Unfortunately, that's as far as the fun goes, albeit it's still an amazing concept and breaks the ice for CSS3 creations. The developer recommends that you view the content on Mac OS X with either the latest Apple Safari or the Latest Google Chrome Web Browser applications.

Aside from functions, the CSS3 iPhone 4 also has visual effects. It shows the correct date and time, the correct slide to unlock animations, and the correct SpringBoard animations. So it does hold some truly awesome functionality for being a completely virtual iPhone 4 with absolutely no images. We think that this is a very cool milestone for Web Development.

What do you think about the CSS3 iPhone 4? Share in the comments.

Sources: TjRuss

[feidhlim1986]

Doesn't CSS need image assets? It can't just create different fonts, textures, images out of pure CSS code...can it?

[BenderRodriguez]

Doesn't CSS need image assets? It can't just create different fonts, textures, images out of pure CSS code...can it?

What do u think an image is to a computer.... A computer just sees a bunch of 0's and 1's and changes them to associate color like 0000, could be white or black, in reality it's ALOT more code to create

[baRRy boRRis]

Not the first one to create CSS3 iPhones

iOS Icons

Original iPhone

[hybirdd]

Doesn't CSS need image assets? It can't just create different fonts, textures, images out of pure CSS code...can it?

Not a single image was used. and nope CSS3 can generate gradients.

[mofolo]

Wow, taking a look at the css, this thing is incredible.

[feidhlim1986]

Not a single image was used. and nope CSS3 can generate gradients.

Interesting. I did not know CSS was so powerful. I've only dabbled with basic CSS.

[iKillYou]

Not the first one to create CSS3 iPhones

iOS Icons

Original iPhone

Are you kidding me? That crap shouldn't even count considering what it looks like compared to the one in the OP.

[k.nitsua]

CSS3 is very powerful. All you need to do is look at what some of the MMi themers here have been doing with CSS3/HTML5. Some of the widgets and animated lockscreens and wallpapers are clear evidence that flash is going out and HTML5 w/ CSS3 is coming in

CSS3 is capable of even making 3D canvas so what you see in the OP is just the tip of the CSS3/HTML5/Webkit iceberg

[Hillefied]

Not the first one to create CSS3 iPhones

iOS Icons

Original iPhone

You are right, but this is the first functioning iPhone, while limited, that has been created wholly in CSS3. The reason why this is interesting is because XCode used in iOS development uses very similar coding so CSS3 could become a useful testing platform since Apple does have limits on testing.

Another thing is, this could be another platform for mobile OS devices. 3000+ lines of code for a pretty decent virtual clone is nothing compared to the millions of lines of code used for iOS 5.

By the way, CSS3 makes a one size fits all screens. I didn't notice until I decided to try it on my iPhone 4S. When I pinched to zoom, everything focused in and still looked incredibly crisp and colorful.

[micaiah12]

Lol, I did this awhile ago.

[Hillefied]

Lol, I did this awhile ago.

Show us. Maybe we can see how well yours turned out. Compare.

[iLoveWindows&iPhone]

Man....I sure wish my iPhone 4 could boot as fast as this virtual one does!! Cool stuff

[Dainelli]

How the hell did he create say the signal bar using CSS? Is it even possible without using images

[vantheman169]

Very impressive. I downloaded the FREE Mac App on their site (demo version) pretty damn cool. Its called Ensoul

http://macpaw.com/download/ensoul?ut...m_source=tjrus

[baRRy boRRis]

Are you kidding me? That crap shouldn't even count considering what it looks like compared to the one in the OP.

Woah there! Simmer down. All I was doing was pointing out that others had recreated other iPhone elements in CSS3. I wasn't trying to take anything away from Mr. Zubach or his massive coding prowess.

Cool beans?

[hadzo]

So he created images using css. Very hard work but I am not dumb founded. All images are created using some form of coding.

I do have to say this is very impressive and from the looks of it a lot of hard work has gone into it! Still I don't get the hipe.

[steeda763]

Using IE8 at work. Looks like an iPhone made for an Atari. Works just as well as one too.

[mikejimenez]

lame. I managed to make one that uses no CSS and only runs in IE. Oh yeah!

The Virtual iPhone