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
91 Comments »