All Entries in Category: Designers Gone Wild

Cameron Daigle has created a masterpiece. Does what is says on the box, no mess, no fuss. Paul Irish has even written a polyfill for it (source). Go forth and conquer your text with the noble but mighty centaur, king of mythical creatures.

One of the demos on Mozilla’s Web O’(pen) Wonder is The Letter Heads by Simurai. It’s a wonderfully whimsical use of CSS3 text shadows and JavaScript. There’s also some subtle audio. It’ll bring a smile to your face guaranteed.

Kris Triplett has created the haunting spectre of Darth Vader’s head out of nothing but HTML and CSS3. It’s really a whole bunch of div elements with some crafty use of border radius and CSS transforms.

If you love pointillism and koalas, Vadim Ogievetsky has just made your day. I’ll avoid ruining the surprise, but if you break all those bubbles to their smallest size, there’s a treat in store!

This is safari in 8-bit glory. I’m at a loss for words here, the awesome is off the scale. Why don’t we let Mr Mrgan explain:

Ladies and gents, fellow humans — presenting Pixelfari, a pixely, 8-bitty version of everyone’s favorite browser. Enjoy chunky fonts, blocky graphics, and a general sense of giddy inefficiency. Spearheaded by yours truly and developed by a very clever friend. Free+fun!

If it’s not cube-related, it’s water ripple effects. If it’s not ripples, it’s bokeh effects! CSS3 can do it all. In this article Divya explains how to use CSS3 radial gradients to achieve a pretty bokeh effect on a web page background.

Here’s a neat trick. You take a background colour and then, with some CSS3 magic, add a background gradient. The trick involves something about repeating colour stops that alternate between transparent and semi-transparent. Checkout Lea’s post to see the variety of patterns you can generate.

It seems to be a popular fad these days to stretch CSS3 to the limit by using it to creating graphics without images. Check out this pure-css icon set created by Lucian Marin; it’s called Peculiar. It’s GPL, free, and unique on this site for actually being useful.

Here are a few other examples I’ve found. Giacomo Bartoli has created a pure-CSS Twitter icon, “Legend of Drew” has recreated some familiar characters and Andrew Kelly has apparently been experimenting with complex icons.

Carrying on the long standing tradition of web designers to recreate everything using only CSS, Andrea Jacob renders the Internet Explorer logo sans-images. It’s a mind-bending array of styled div elements; and a fiendishly clever method for implementing the yellow orbit ring. Check it out.

Gordon Brander has implemented a Mac OS X Leopard-style stack menu in pure CSS3; no JavaScript required.