King out.

I learned of this technique through Bryan Veloso, who was using a black text shadow with zero blur and zero offset to force Safari’s sub-pixel rendering of text to not appear as a bit more legible, especially on dark backgrounds. Having known nothing of this (I know right, where was I?), I fired up both Safari 3 and Safari 4 to see what was going on. Let’s check out how Safar 3 and 4 render light text on a dark background.

Safari 4

Out of the box, Safari 4’s font rendering looks good with both light on dark text as well as dark on light text as seen here.

Safari 3

Now I know why this hack was created and you can read more about it here. As you can see in the light on dark background text below, the text is bulky, and almost bleeds the letters together. It looks nothing like the sweet text on the right, which looks clean, crisp and legible.

The original text-shadow hack

Let’s see the original text-shadow hack, implemented by the following CSS:

text-shadow: #000 0 0 0;

Safari 3 with text-shadow hack

Safari 4 with text-shadow hack

So the fix that fixed Safari 3 seems to have gone a muck in Safari 4. Here’s where the revised fix comes in. I read over in the comments on Sam Brown’s site that you can apply a text shadow similar to the background color on the offending areas to fix this – in this case, any white background area. I tried it and he’s right, it works like a charm. However, I thought up a neat little solution, which I’m sure others have thought of too that fixes both scenarios with one rule:

text-shadow:rgba(0,0,0,0.01) 0 0 0;

The premise is simple: use an extremely transparent black (1% visible to be exact). This way the black doesn’t bleed around the text as seen in the light background case, but is forces Safari to render the text in a more legible manner. Now, let’s look at what it looks like:

Safari 4 with revised “Komodo” text-shadow hack

Safari 3 with revised “Komodo” text-shadow hack

It’s beautiful! I name it the “Komodo text-shadow hack” or KTSH for short.

That seems like it does the trick to me, what do you think?

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

• TextFlow Online Word Processing

  Pretty interesting looking online flash-based word processor.

• RegExhibit OSX Regular Expression Editor

  The OSX Regular Expression editor and debugger I’ve been looking for.

• Housing Works Beautiful design

  The design for this website is stunning. I love large background websites.

• s3slider jQuery Sliding Image Captions

  A very cool solution for image captions that lay over an image and animate in.

• Ronald Jenkees Electronic music

  One of the most original sounding solo electronic artists out there. Check out “Stay Crunchy”. I can’t wait for his new album!

• Inovat Sweet Looking Portfolio

  Incredibly simple, yet sweet looking portfolio web design.

• Enable path view in OSX Finder

  Haven’t you always wanted to display the full path to the current folder in your Finder window? In terminal, enter the following command:

  defaults write com.apple.finder _FXShowPosixPathInTitle -bool YES

  Next, enter the following code to restart your Finder:

  killall Finder

• Creative and Live Tight Minimal Design

  Really clean and tight minimal design. I love the logo and subtlety.

• Space Collective Dark Simple Design

  Beautiful dark website design. I love the typography, color scheme and the block-like grid.

• Carbonica Stunning hand-drawn style

  This site has taken hand-drawn to a new level, complete with hand-drawn icons, headings, navigation and a cool illustrative style.

• Weightbot Website Dark, smooth and metallic

  Weightbot for the iPhone/iPod was cool and so is it’s site. I love the dark, metallic, apple-like style. Gorgeous work by Mark Jardine.

• I AM SECOND Amazing, heart-felt stories

  I absolutely love real stories about what God has done in people’s lives. This site is awesome.

• jQuery Fling Subscribe/Publish event model

  Collin Allen has written a sweet jQuery plug-in that makes it easy to code JavaScript events using a publisher/subscriber model very similar to Flash.

• jCrop jQuery Image Cropping

  Very smooth jQuery image cropping plugin.

• Smooth CSS Image Resizing in IE

  I can’t believe that I’ve never seen this until now. Finally, bicubic interpolation for Internet Explorer with only one CSS rule:

  img {
-ms-interpolation-mode:bicubic;
}

  Preview:

  

• Dropbox/Leap Scrapbooking Killer online scrapbooking

  Jon Hicks has come up with a very sweet way of scrapbooking all of those screenshots that you’ve been compiling over the times. I think I’ll actually use this one.

• Digitally Imported Electronic Internet Radio

  Rather, refound, I used to listen to Digitally Imported internet radio all the time in my college years. I recently rediscovered my love for it while telling a friend about it. In case you didn’t know, I <3 all music electronica.

• TiltViewer Flash Image Viewer

  The first time I saw this viewer, it was over at Signal Noise and I thought it was pretty cool. I used to love flash and flash image galleries, but since, my love for flash has faded. Nevertheless, this is still a rockin’-cool looking flash image viewer.

• Buero Ink

  Markus Shaefer’s logo work is stunning as well as his minimalist site. Even though my work doesn’t reflect it, I love minimalism and simple, monotone forms.

• display:inline-block;

  During my day job at Dealerspan as a UI designer, our target broswer is Firefox 3+. This means I get to use display:inline-block; all day long and it is such a time saver. No more floating!

• :hover:focus

  If you ever want to simulate an “onpress” selector in CSS, this is handy. Use a:hover:focus.

• “Star Wars” – an a capella tribute to John Williams

  This a capella video is amazing. From Star Wars to Jaws to Jurassic Park, I nerded out!

  I suggest a new strategy: let the Wookie win…

• Wilson Miner’s Website

  I love Wilson Miner’s minimalist site. Wait…he did the redesign for Apple.com? No wonder I like his style.

• Apple Keyboard

  After asking a ton of people on twitter, I broke down and bought the new apple keyboard. I love it. It so totally rocks compared to the plastic breadbox I was using before.

• Cold Calling Monetizing for n00bs

  A legit way to monetize your blog or vlog. Just call the company and ask them!

• Coda updated to 1.6 Plugins Available

  Of the myriads of updates and new feautres that Panic packs into every update, one feature stands out from the crowd: Plugins. That’s right – you can develop your own plugins for Coda. That’s freaktastically rad.

That’s it for today peeps. Let me know if you like this and want me to keep it up. Cheers!

I want to share a CSS technique I’ve used alot. I’m sure that you have seen CSS sprite techniques that utilize changing background position on hover to change a link’s state. Also, they have the added benefit of keeping from loading images on hover, limiting lag. This technique is very similar, but works like a charm for IE6 and PNG images. I know this may be a moo point at this stage, because IE6 is on the outs, but still works beautifully as a technique.

Let’s jump right in, as I don’t have a lot of my Labor day to give.

First, as always, I want to preview this thing and see what it does. Here’s your preview:

Aight, the meat and potatoes: the XHTML

So, the markup is pretty simple. It’s basically a link with a span in it. Check it:

<a href="..." id="buyme_coffee">
<span>Buy me a coffee</span>
</a>

How it works

Before looking at the CSS, it helps to know how it works. Think of it as a window to a larger canvas behind it. It’s easy to think of it in terms of the two elements:

• The window: The A tag
• The canvas: The SPAN tag

The window only shows a portion (a view) of the canvas. The canvas can be any size. By changing the position of the canvas, you can pan a different portion of it into the window. The window is fixed width, fixed height, and any overflowing content is hidden. This way, only the portion of the canvas in the window view is visible.

The CSS

#buyme_coffee,
#buyme_coffee span{
display:block;
width:160px;
height:40px;
position:relative;
overflow: hidden;
}
#buyme_coffee span{
height:120px;
background: url(coffee_button.png) 0 0 no-repeat;
text-indent:-9000px;
}
#buyme_coffee:hover span{
top:-40px;
}
#buyme_coffee:active span,
#buyme_coffee:focus span{
top:-80px;
}

The first selector targets two tags, the #buyme_coffee link and the #buyme_coffee span span inside the link. I’m doubling up the rules by targeting both tags because both tags share quite a few similar tags. As for the rules that are different, I’ll correct in the next selector.

This first selector sets both A tag and SPAN tags to block (since they are inline by default), sets the width and height, and then sets the overflow to hidden. The overflow:hidden here is the key. This causes the A tag to act as a window that only views the content in its height x width box. All other content is simply cutoff or put away from view.

The second selector, #buyme_coffee span, resets the height to the height of the background image, which is larger than the viewport (A tag), but gets cutoff from view. The text-indent:-9000px is a cheap way of shoving the text off the screen so that this text is replaced by the background image. The background image contains the three states we want: Default, Hover and Focus/Active. Here’s a preview of that background image:

You probably guessed it. The top image will show as default.

K, we’re almost done. The third and fourth selectors target the :hover and the :active and :focus states respectively. This is uber simple. When the link (or window) is hovered, push the top of the span (or canvas) up by 40px, showing the hover state. When the link is active or focused, push the span up by 80px, revealing the active state.

That’s it! So why is this better than just panning the background position you ask? Good question. I started using this method when I needed to make the background an alpha-transparent PNG, which as you know, doesn’t display correctly unless you use an IE alpha image loader filter, which as you know doesn’t play nicely with background image positions. With this method, you can apply an alpha image loader filter to the span element and it works like a charm.

Hope you enjoy. Cheers!

Update: Based on @Justin’s suggestion, I’ve included some modified CSS below to show this technique sans the a text-indent:-9000px for screen reader friendliness. A demo of the modified CSS can be seen here.

#buyme_coffee,
#buyme_coffee span{
display:block;
width:160px;
height:40px;
position:relative;
overflow: hidden;
}
#buyme_coffee span{
height:140px;
background: url(coffee_button.png) 0 0 no-repeat;
line-height: 20px;
white-space: nowrap;
top:-20px;
}
#buyme_coffee:hover span{
top:-60px;
}
#buyme_coffee:active span,
#buyme_coffee:focus span{
top:-100px;
}

I’ll post more on what I learned in the designing process as well as releasing some freebies, so stay tuned. As for now, I’m a tired boy and I’m gonna take a rest. Please leave a comment and let me know what you think!