CSS3 Implemented Correctly – Last.fm

I noticed today while viewing my Last.fm profile that they are utilizing some of new CSS3 properties that are starting to make an appearance on the web. They have been very clever and only use these properties aesthetically in their design as to not break the design layout in Internet Explorer (Of which no current support is available for CSS3 in any of Microsoft’s released browsers).

You may be surprised to learn they currently use:

• box-shadow
• text-shadow
• border-radius
• border-color
• opacity
• rgba

You can see the difference this makes between browsers that support CSS3 and those that don’t (Firefox 3.6.3 at the top and IE8 bellow both running on windows)

Last.fm Header Comparison

Last.fm Box Comparison

As you can see the menu items are utilizing the text-shadow property to give them a very slight.. text shadow! And the drop down profile box to the right is using the box-shadow property. The second image shows the border-radius in use to round the corners of the boxes.

Doing it in this way allows for pretty nice degradation between the browsers that support these new properties and those that don’t, and are a nice little perk to those users of the supported browsers.