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

Speaking of Daring Fireball links and HTML5, Guillermo Esteves has re-created the opening crawl from the original Star Wars using only web-based technologies. It currently runs exclusively on the bleeding-edge WebKit nightly builds, Safari for OS X Snow Leopard… and on the built-in iPhone Safari (though it doesn’t look as polished).

That’s right. No Chrome anything, including Android 2.1. No Palm webOS browser. That it works on the iPhone’s and iPod touch’s MobileSafari… is kind of crazy considering it hasn’t been updated since iPhone 3.1.2 back on Oct. 8. Just goes to show how seriously Apple is pushing the web on the iPhone.

So, yeah, words moving away into perspective in your browser, but this is without QuickTime or Flash or anything to strain your bandwidth or burn your battery. Very nice.

YouTube video of the WebKit/Safari version after the break!

Ars Technica has a great article up on the future of web design, involving 2D and 3D graphics and transformations, and what’s most interesting is that it’s the iPhone’s Mobile Safari browser that right now seems to be leading the way in surfacing this next-gen (Flash killing?) goodness for general users:

The WebKit team added CSS Transforms to nightly builds of WebKit back in October 2007, transforms that included scaling, rotation, skewing, and translation in 2D space. As the specification matured, 3D and animation capabilities were added. Eventually, the 3D transforms were broken out into a specification of their own. Though WebKit has had these 3D transform capabilities for some time, only Mobile Safari on the iPhone and iPod touch has them enabled.

Check out some of the other demos, and get the full scoop, over on Ars.

WebKit is Apple’s open source evolution of the old Linux Konquerer KHTML browser, and it forms the foundation of Safari on both the desktop and the iPhone (and Google Android, Palm Pre, Nokia tablets, etc.). Their Surfin’ Safari blog has just announced CSS animation support, but the better news (via MacRumors), is that iPhone (and iPod touch) Safari already supports both CSS animation and 3D.

Want to check it out? Just hit up this awesome animated falling leaf demo on your iPhone!

Overly provocative headline not withstanding, and while this doesn’t address the ubiquity of Flash video, it should go a long way towards enabling more scalable and open interactivity on the web. (Flash sites don’t always scale well to small screens, after all).

Okay, I’m a web geek, I admit it, but is anyone else excited? Or do we just fear that it will all-too-quickly be perverted into iPhone optimized punch-the-monkey banner ads?

Hot on the heels of the just released Safari 3.1, some of whose features are reportedly trickling down to baby brother MobileSafari on the iPhone 2.0 firmware, Apple has reportedly begun seeding early builds of Safari 4 (5526.11.2) to developers.

The big news? WebKit’s screaming fast SquirelFish Javascript engine is a go, and 53% faster, which will be huge for Web 2.0 apps like Google’s… and the newly announced MobileMe service from Apple, of course!

Other new features include the ability to spin off “Site Specific Browsers” (or SSBs), which are basically thin browser clients for your favorite Web 2.0 apps — imagine a dedicate window on your desktop just for MobileMe. Continued CSS attribute additions like gradients, masks, and reflections are also on spec (Gee, gradients and reflections? From Apple? What a surprise…)

Combined with the CSS and HTML 5.0 features already added in 3.1, such as animation, video, and audio tags, Apple seems to be retaining its focus on open, web standard interactivity, in conjunction with old nemesis Flash and similar — sometimes buggy — technologies like Silverlight on the desktop (for now), and in lieu of them on the iPhone. Add in QuickTime X, and Apple is definitely trying to leverage some space away from the current, pseudo-proprietary web video giants.

While OS 10.6 Snow Leopard isn’t expected until mid-2009, Safari 4 seems on the fast track for a much sooner release.

Can another MobileSafari bump for the iPhone be far behind?

Read Via