Animated CSS3 CD Cases on a Shelf

“Just take those old records off the shelf
I’ll sit and listen to ’em by myself
Today’s music ain’t got the same soul
I like that old time rock ‘n’ roll”

Remember that old Bob Seger and The Silver Bullet song? Well, this is exactly what I was listening to today, when I decided to create a this CD shelf with HTML5 and CSS3. Here’s the demo  and excuse me for the creepy CD cover art I’ve used – somehow it reminds of the old days when I was discovering music. The truth is that I still love these albums, so here they are – a CD shelf with some of my favorite 80s and 90s metal albums, made out of minimal HTML and CSS3:

To fully view a CD, just hover it and observe the smooth animation.

… Or you can just have all of the CDs displayed frontally (by removing the .acidjs-cases-tilted from the topmost element):

Speaking of markup, once you download the experiment, and add the style sheet to your page, all you need to do is to use simple bulleted list markup to add your favorite CDs. If you take a look at the CSS, you will notice that you can also set a poster behind the shelf, and everything is pretty simple and easy to modify.

So… Rock’n’Roll and thanks for reading this one! Hope you like it! Want to see it in action with a huge list of my all time favorite albums?

Related Posts and Links