All entries in topic: CSS

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.

Mathias demonstrates using CSS without HTML. Look Ma, no source code. Could there be anything else that more useless but awesome at the same time?

Just select the text; might be NSFW. Makes use of the ::selection pseudo-element (and the ::-moz-selection equivalent).

Using plain old CSS and JavaScript Román has built a tribute to The Beatles for their 50th anniversary. I haven’t revealed the surprise in the screen shot, but if you click on the lyrics to Yesterday, the letters reassemble themselves into a picture.

This one’s an oldie but a goodie. James built this maze demo years ago, but it’s still worthy of inclusion on Awesome But Useless. I’ve worked with James before at SitePoint and he’s a JavaScript guru. This maze demo became a chapter in the SitePoint book The Art and Science of JavaScript.

It’s awesome not simply because it uses CSS borders to create a 3D effect, but because it has keyboard controls, a minimap, is even accessible to screenreader software, and was created in 2006.

I’ve worked with Earle previously since he’s the co-author of the SitePoint book jQuery: Novice to Ninja. He’s one of those JavaScript savants and his JavaScript experiments page is full of fun and wonder. He’s made a retro racer game scene that reminds me of Pole Position. It’s just an animation, not an actual game, but he’s done it using a single column of 1 pixel high div elements that have the background-position value of their backgrounds constantly changed to create the animation effect. Ingenious!

Scroll the image right and left and the illusion is complete; a coke rolling from side to side. The cool thing is, that this is all CSS2.1. It’s achieved through a clever usage of the background-position property. I have a feeling Román will be appearing on the site often.

Russell sent me word of his pure CSS shapes experiment, which are very pretty. He’s managed to make the Delicious logo and a heart shape using CSS borders.

Timo Huovinen has made fully functional Minesweeper clone built using only HTML and CSS. Clever stuff. (Although it’s easy to cheat; look for the #m.) I’ve looked at the source and still haven’t wrapped my head around how this is done.

Román Cortés has created the likeness of Homer Simpson out of nothing but absolute positioning and Verdana. ’nuff said.