No music, no life. And as far as web design is concerned, this awesome CSS3 music player would be perfect for adding a new dimension to your blog or website.

Indonesian artist Hidayat Sagita made this tutorial in which the goal is to use CSS3 instead of images, so CSS3 properties replace the following Photoshop techniques:

1. -webkit-gradient or –moz-linear-gradient property is used for color gradient
2. Border property for stroke.
3. –webkit-box-shadow, -moz-box-shadow or box shadow property for drop shadow
4. –webkit-border-radius, -moz-border-radius, border-radius for rounded corner
5. For a smooth bevel, the border property is used on one side or more with thickness of 1 pixel
6. Stacked layer for layer masking

Demo
Download

Some of this player’s properties are only supported by few browsers, but it’s so powerful that minimal use of images is required. Also, jazzing up your website with a player like this is totally worth it, so a browser upgrade won’t hurt at all.

Incoming search terms for the article:

• css3 music player
• css3 music
• css3 player
• music player css3
• cool css3
• music css3
• html5 css3 music player
• use css3 music player for website
• musique css3
• player css3