Icons and World Clock created with CSS3 magic, courtesy of Webkit
// June 29th, 2010 // No Comments » // Mac OS, Web design
Filed under: Graphic Design
Recent versions of Webkit, the browser engine that Safari and Chrome are based on, have allowed for extensive use of CSS3, as well as some proprietary CSS tricks. The result has been some very innovative art created entirely using CSS. Take, for example, Louis Harboe’s set of iOS icons created using some CSS3 properties such as rounded corners, shadows and gradients (among others). The finished set is stunning. Of course, the demo will only display properly in a compatible browser, so if you’re using something other than an up-to-date version of Safari or Chrome (or Webkit, of course), you won’t see much.
If you’re not a web designer, this might not look like a big deal. What you’re seeing, though, are images created entirely without images; they’re built using nothing but code that defines shapes, gradients, colors, etc. You can hit View Source on the page to see the code that defines these things — it’s nothing but divs and the CSS to color and shape them.
If you are using a browser that can render these designs, you’ll also want to check out Jeff Batterton’s iPhone world clock, rendered in pure CSS3. Considering the rectangles that CSS has left designers stuck in for years, this is some pretty exciting stuff. I can still recall the first wave of people doing really innovative tricks with CSS2, and the push that they provided to the general web design community. I hope to see web design taking great strides forward as these new standards become accessible to an increasingly wider range of the web-surfing public. Modern browsers are pushing new limits … we just have to wait for certain other browsers to finally be put to rest.
TUAWIcons and World Clock created with CSS3 magic, courtesy of Webkit originally appeared on The Unofficial Apple Weblog (TUAW) on Mon, 28 Jun 2010 19:00:00 EST. Please see our terms for use of feeds.
Part of my work involves making mockups of websites for clients, and up until this point the easiest way to do that was just to hand draw some sketches, scan them, send them to the client for rework, etc… Now there’s a new 
