As part of the Design Inspiration Of The Day Series, I’ll be taking a look at three amazing uses of CSS3 to recreate icons and objects.
CSS3 iPhone Icons
Despite being used to style web pages, CSS3 is being used to recreate entire graphics and icons with no images whatever. To showcase the power of CSS3 and using technology as art, Louis Harboe recreated iOS icons .
This example of amazing CSS uses no images whatsoever and instead is a combination of rounded corners, shadows, gradients, rgba, pseudo-elements, and transforms.
Functioning Safari Window Made In CSS3
If you thought recreating Apple’s iOS icons entirely in CSS3 was amazing, you’ll be shocked at this next piece of CSS3 inspiration – a working Safari browser window.
The Safari Window is recreated using a combination of HTML5 and CSS3. The interface actually works and mimics Safari on the Mac. Like the rest of these examples, this piece looks best in the latest Webkit browser such as Safari and Chrome. If you’re interested in picking apart the source code, you can download it from GitHub.
iPhone Recreated In CSS3
One of the cooler CSS3 examples I’ve seen is an entire iPhone recreated purely in CSS3. While the iPhone isn’t functioning, it does look extremely close to the original iPhone 3G.
