It’s the social web now. We share everything, from our musical tastes, to the bacon avocado burger we ate for breakfast , to the very funny things we say and do. With amazing APIs such as the ones offered by Last.fm, Twitter, Flickr and more, we can now put them all on our sites, showing close to real-time updates of the music we are listening to, conversations we are having, and the things we are seeing.
With this slew of api stew hitting the fan, its no wonder websites and blogs are looking cramped, busy, and ugly. Why not pretty them up a bit? That’s what I intend to do. I want to show you how to style your music streams and give you some graphics to do so, cause let’s face it, it takes time to design things and it’s easier to use mine than yours ;) Alright, enough banter, let’s get to the goodies.
The XHTML
Keeping it simple and semantic, we describe our “list” of music with an unordered list. We link the title and supply a thumbnail image to bring some life to the album. In the real world, fill your alt attributes and titles with some helpful information for those using screen readers. Simple enough eh?
<ul class="music">
<li>
<a href="...">Hungry Like the Wolf: Duran Duran</a>
<img src="albums/duran.jpg" alt="..." />
</li>
</ul>
The PNG Overlays
Next, if we are talking sexy, we need sexy PNG images designed to lay over the images. This way, our list doesn’t look like the same old boring square 50px x 50px image (like everybody else and their llama’s neighbor has). This is the part where you get lucky and get some freebies thrown your way. Here are three PNG images that I’ve designed (perhaps inspired by some music apps around the intarweb) that are free for you to do whatever you’d like with. Yes, even that.
Jewel Case
Vinyl Record Sleeve
Compact Disc
The CSS
Now that we have some sweet looking markup, and the PNG overlays ain’t that bad either, let’s get to rocking the stylesheet to make this all come together in a beautiful matrimony…or something like that.
Okay, the first thing I am going to do in lieu of a reset stylesheet is just reset what I am working with like so:
ul.music,
ul.music li,
ul.music li a,
ul.music li img{
margin:0;
padding:0;
list-style:none;
border:0;
text-decoration:none;
}
Next, I want a little bit of margin (or spacing) between my list of albums. This is totally up to you, but I decided to go with 15 pixels. Also, I want the albums to show up in a row and then line wrap when they reach the edge of the containing element. To do this, I float the list items left:
ul.music li{
margin:15px 15px 15px 0;
float:left;
position:relative;
}
Okay, the next rule will style the link to the album and it gets a little more hairy. I’ll explain the premise of the style and you can fill in the gaps of how it works. The idea is that we can use the link as the album overlay if we set the PNG image as the background (for this example, we are using the vinyl overlay). As long as we put the link over the image (z-index and relative positioning) and set the dimensions (block display, width and height) of the link to that of the PNG overlay, it should work.
Also, I decided for my implementation, that I didn’t want the text of the album to show, hence the negative text-indent rule and overflow:hidden; to keep that negative text indent from showing. You can keep the album text with a few additional styles.
ul.music li a{
display:block;
position:relative;
background:url(vinyl.png) 0 0 no-repeat;
float:left;
width:90px;
height:82px;
text-indent:-1000em;
overflow:hidden;
z-index:1;
}
If you’ve done your math, we’ve only got one more tag to style: the img tag. The idea with styling this is very simple. Just set the dimensions of the image to that of the viewport of the PNG overlay and position the top-left coordinate so that the image lines up perfectly in the viewport. We use absolute positioning so that this image doesn’t affect the size or layout of it’s parent list item and position it right in the viewport of the vinyl png image, in this case at the 2px, 1px coordinate:
ul.music li img{
position:absolute;
width:72px;
height:72px;
left:2px;
top:1px;
}
Wait, what if there isn’t album art?
That’s right. You are special. You listen to underground music. This music is so underground and obscure, that not even the most savvy of databases can capture your unique taste, leaving you with a bunch of empty albums and no art. Well, you rogue you, I’ve got some CSS to fix that. We still have one more tag we can use as a background and that is the li. I’ve whipped up some empty album art as well and we’ll use it for the blank state. All we need to do now is position the blank album insert in the “viewport” of the PNG overlay like so. Voila!
ul.music li{
background:url(blank_insert.gif) 2px 1px no-repeat;
}
That’s it!
Yeah right. There’s always the dreaded two-headed beast Internet Explorer. Let’s have a little chat about how Internet Explorer jacks things up for us web designers. First of all, IE7 really doesn’t give us that much grief. It’s biggest flaw is that it sucks big time at rendering images at any size other than its inherent size. What does this mean? Well, if an image has dimensions of 100px by 100px and you set the size (as we did) to 72px by 72px, IE7 basically takes a dump on itself and renders it with jaggies and all gross. Luckily we can fix it’s issues with the following CSS rule:
img {
-ms-interpolation-mode:bicubic;
}
Wow. That was way too easy for an Internet Explorer issue. Ahhh, don’t worry, more pain will come. Next, as we all know, Internet Explorer 6 sucks at displaying PNG images with alpha transparency. Wow. Big surprise. Luckily, there is another Microsoft-specific CSS rule that we can use to overcome this impairment. Here is the code that makes IE6 behave like a red-headed stepchild should:
ul.music li.vinyl a{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='vinyl.png', sizingMethod='crop');
}
That’s it for realz?
Yes, that’s it for reals! Now you can make your Last.fm music playlists all sexy. Two words of advice. One, if you want to be mega nice, link my site as a thank you, but you don’t have to. Two, get out and make the web beautiful! Here are some resources to get you on your way:
- Download the PNG overlays in this article
- Download a Sample File
- View the complete CSS and XHTML for this article
- Last.fm Plugin for WordPress
- Last.fm apps, CoverSutra & BowTie: iTunes controllers/Last.fm scrobblers
Update
So far, I haven’t seen many sites using these overlays, but here are a few. I’d love to see how people are using it and where, so drop a line and let me know. Here are a few sites that are using these album overlays:
- James Lao – http://jameslao.com
- Maniacal Rage – http://log.maniacalrage.net/
- Hello! Ranking – http://www.hello-ranking.com
- In Hearts Wake – http://inheartswake.com/
- Phunky – http://phunky.co.uk/
- Chris Wallace – http://www.chris-wallace.com/
- Jack and Diana – http://jakeanddiana.com/
- Gilbert Pellegrom – http://www.gilbertpellegrom.co.uk/
- The Things I Do – http://www.thethingsido.net
Nice work my friend. You are a gentlemen and a designer.
Kudos to me for bugging you to get a new post up. And kudos to you for listening.
LOL @ DXImageTransform.Microsoft.AlphaImageLoader Been there, done that.
This is bad ace. I hope this spreads the net. Another great KM contribution. Cool lesson. Now that you’ve got that out of your system, lets get back into focusing on Gambit shall we?
@Eddy Word up dcup.
This is an awesome post !! Thanks for sharing this !
Dude you are a design ANIMAL!!!! Keep up the great work and keep giving us great inspiration!
You are my hero. Seriously, this is nice stuff!
Perhaps an overlay that is an iPhone/iPod Touch/iPod? Who listens to CDs, anyway? :)
Very nice writeup! Those covers are seriously gorgeous, too.
Very nice, better than my attempt at the bottom of http://www.matyler.com, that I did a few weeks ago!
That’s the second time I’ve seen:
-ms-interpolation-mode:bicubic;
today. It’s very useful.
Awesome stuff Rogie! Look forward to using this on a live project..
Loving the plastic sleeve inside the record cover and the CompactDisc stamp.
Nicely done!
Completely awesome.
Wow, truely amazing. I thought your blog was running an empty for a while. Glad to see a new post.
That is really, REALLY awesome. Although the technique isn’t that hard, you really did a great job on creating the overlays and writing the article.
Keep up the good work!
Wow nice man. That is really sexy.
@All Thanks for all the kind words regarding this post. I’m glad to see you like it!
@Marco – Good. I’m glad to hear the technique isn’t hard. It doesn’t need to be! Simple is great. Thanks for the kind words!
@Brendan I love the little touches, especially the Compact Disc stamp too.
@Dave Thanks bro, now I have to go designing little iPods, however one iPod per album doesn’t lend itself to the same sort of application as a CD or a Record. Perhaps one iPod with 4 songs in it?
I’m still throwing a vote in for 8-tracks. Keep ‘em coming… Maybe we’ll see another hawt post this week…?
LOVE IT, LOVE IT, LOVE IT!!! Keep on rockin’ the free world Rog!
Now that’s just plain #awesomesauce.
Flippin incredible mate. Love this.
@ChrisWallace That’s a pretty tight 8track :)
[...] Sexy Music Album Overlays · Komodo Media (tags: cd cover css overlay album music) Share this: [...]
Superb post! Thanks for all your hard work.
Excellent, nice work.
Now all we need is a zip of the top 1000 albums to cover all bases. :)
Thank you so much for this! Extremely helpful and far more efficient than the way I was trying to do things.
this is off the hook. Thank you so much for sharing this information with us. Very, very much appreciated.
[...] Sexy Music Album Overlays [...]
I have to say, this really really awesome!. Nice job
@chriswallace is right, 8-tracks would rock.
Give Rogie more things to work on, he’s not busy! LOL
I made plugin.
http://island-blog.net/archives/755
Wow , this is an amazing peice of work and just what i have been after! Thanks dude!
Thank you! I’ve been looking for a tutorial on how to do this for SO long. You’re a life-saver man.
Hey, this is pretty nifty stuff you cooked up here! Next time, could you do a tutorial on how to create mouse over effects for albums like ones in your footer?
Totally excellent! Thanks a bunch.
Very nice.
[...] Sexy Music Album Overlays · Komodo Media A really nice effect with support for IE too (tags: css album png) [...]
Really nice !
Could you make another sexy PNG image designed to lay over Flickr images ? (to use with FlickrRSS wordpress plugin). It will be a great idea !
@myself Maybe a Polaroid ?
Great tutorial. Thanks so much
Thank’s for these there great, i’ve made good use of the Jewel Case for my new theme.
The cd.png overlay isn’t transparent, it uses a block of #1a1a1a around it, is it possible to change that to be transparent as well? Admittedly it’s easier to see how it works with the color, but it limits it to only that color.
@anon Good point…unfortunately, masking is something that is not supported with CSS and modern browsers to my knowledge. The best thing I can do for you is give you source art and let you change that color yourself…
What say you?
oh yeah, source art…
i need some larger images, or psd source..
Thank you,This is very useful tutorial
Thanks!
Look what I used it for: http://www.2manyworlds.free100mbhost.com/phptest/last.php
Niche, Love it…
ThX
Thanks so much, really cool work, i’m using that in a project.
I was working i a cd box, but i see your work and i stop my work, lol. THANKS!!
When the site is live i’ll put the url
Regards!
excellent ! i like it a loT!
Thank you for bestowing this knowledge upon us. Sheer Awesomeness.
Always wondered how you did that man, thanks for sharing! Your a legend!
The CD is actually transparent, is it possible to get a transparent version of that?
How awesome. Thanks, I’m using them at my site!
Thanks a lot for the help man, really great. Though there do seem to be some problems with the validation of the CSS.
It claims the rules about the filter and the interpolation mode for IE are not existing or false.
Thanks, I’m using on my site. I even extended it cover my PS3 games.
Hey Rogie,
I used the jewel case here:
http://inheartswake.com/
Not for last FM but thankyou so much for releasing them.
Cheers
Fav Post! love how easy this is … must say tho its always good to start with great graphics tho :D <3 photoshop :D
We’re using it in our upcomming relaunch which you can see here.
This is absolutely awesome – thank you for sharing!
Awesome work! Thanks a lot!
Greetings from Germany
[...] You might have seen my new redesign chadmueller.com and noticed those sweet album covers at the bottom… well courtesy of Komodomedia. [...]
Any chance of you releasing large size versions of those icons?
[...] of the album covers to the music I am currently listening to – thanks to KomodoMedia for the Sexy Music Album Overlays! In addition, I’ve got my facebook status being piped into the ‘About’ page, of [...]
[...] Sexy Music Album Overlays · Komodo Media — 6:00pm via [...]
thank you very much for this one, i think of using it in a redesign :)
Rogie,
You never cease to amaze North Korea. This is really stunning work! I don’t know why I haven’t seen this before today.
[...] myself. Last night i’ve tryed to apply this pretty nice album overlays that i found on the Komodomedia [...]
[...] Sexy Music Album Overlays 为图像画廊增加更多风格样式的教程，文章使用专辑封面的制作过程作为一个实例。 [...]
[...] Sexy Music Album Overlays 为图像画廊增加更多风格样式的教程，文章使用专辑封面的制作过程作为一个实例。 [...]
[...] ZURB Design Agency, designers who have written a series of articles on Smashing Magazine as well.Sexy Music Album OverlaysThis aticle shows how to style your music streams and provides you some graphics to do so.A Colorful [...]
Looks very Sophiesticated ;)
For COMPACT DISC mode it require solid background with same color as PNG’s. Not really good. You can use canvas for make it more usable in real web-sites. I mean if background will be complicated – that’s methods don’t work well.
Great technique. I am going to use it when I redesign my site. Thanks!!
@Vitaly, would love to see your canvas implementation!
[...] Sexy Music Album Overlays This aticle shows how to style your music streams and provides you some graphics to do so. [...]
@Rogie – i have used this library http://code.google.com/p/ictinus/.
It works. But wiki only in Russian language. From images and code i think you can get idea. For me it works well in every browser (from Chrome to IE6).
Really sometimes you can’t use just PNG’s. But most time PNG is enough. Anyway thanks for article.
Here are great example of this method:
http://www.imobilco.ru/
I am not a author.
[...] Sexy Music Album OverlaysThis aticle shows how to style your music streams and provides you some graphics to do so. [...]
[...] Sexy Music Album Overlays [...]
Great design concept on commonly used CSS technique.
You could expand on this and create some retro styles like cassette tapes, vhs tapes, game cartridges etc.
[...] Sexy Music Album Overlays 为图像画廊增加更多风格样式的教程，文章使用专辑封面的制作过程作为一个实例。 [...]
good thinks
[...] JavaScript 和 CSS 技术相结合。 Sexy Music Album Overlays [...]
[...] Sexy Music Album Overlays This aticle shows how to style your music streams and provides you some graphics to do so. [...]
[...] Sexy Music Album OverlaysThis aticle shows how to style your music streams and provides you some graphics to do so. [...]
[...] Sexy Music Album OverlaysThis aticle shows how to style your music streams and provides you some graphics to do so. [...]
[...] Sexy Music Album Overlays 为图像画廊增加更多风格样式的教程，文章使用专辑封面的制作过程作为一个实例。 [...]
Wow, this is a great article thank you for sharing and caring manny [".][",]
[...] Sexy Music Album Overlays 为图像画廊增加更多风格样式的教程，文章使用专辑封面的制作过程作为一个实例。 [...]
[...] 1. Зурагтай layer давхарлах [...]
Hi
I really like this tutorial but let me ask you a question what are you using in the footer area to pull the info from Last.fm and display it this way could once I used Last.fm fmtuner plugin for wordpress I couldnt get it to work so finally I used the cd images overlays with static images till i find a way to do it dynamically.
thanks
[...] Sexy Music Album Overlays 为图像画廊增加更多风格样式的教程，文章使用专辑封面的制作过程作为一个实例。 [...]
日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日日
Awesome! These will be mega helpful with the redesign for my Portfolio/Blog that I am working on! Thanks!
Thanks, Awesome