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
No comments:
Post a Comment