Learn and share. The simplest harmony.

 

CSS3 Music Player Menu

Posted on May 6, 2010 and got 13 shouts so far

This post is the sequel post from “Photoshop Effect vs CSS3 Properties“, as you know on previous post we have tried to maximize the CSS3 power to create Photoshop-like effect. So, as I promised earlier, this post will explain how to use CSS3 properties only to create CSS Music Player Menu.

As I said before, what we want to do is only creating CSS Music Player Menu using only CSS3 properties instead using images. The issue is creating CSS Music Player instead using images, so we won’t talk about how to play or repeat a song and increase or decrease volume with them.

Expected Result and CSS Techniques
Following image is an expected result which we will do later, in case you missed previous post I remind you again about CSS3 properties that will replace Photoshop techniques :

  • Color Gradient using -webkit-gradient or -moz-linear-gradient property.
  • Stroke using border property.
  • Drop Shadow using -webkit-box-shadow, -moz-box-shadow or box-shadow property.
  • Rounded Corner using -webkit-boder-radius, -moz-border-radius or boder-radius property.
  • Smooth Bevel using border property on one side or more with 1pixel thickness, white color.
  • Layer Masking using stacked layer where the top layer’s height is an half of bottom layer’s, fill with any matched color and of course set its opacity.

Picture 2


Setup the HTML
Firstly we create the HTML element that represent each element on the Music Player. We can specify how many element wrapper we want to create by analyzing the image above. The image can be separated to 9 element :

  1. Player wrapper (grey color) as player container, class name : music-player.
  2. Player wrapper inner (top border with white color), class name : music-player-inner.
  3. Player toggle (circle with color gradient inside), class name : music-player-toggle.
  4. Music wrapper (green color), class name : music-player-music.
  5. Music inner (bottom border with white color), class name : music-player-music-inner.
  6. Music shade (masked layer with white color and 20% opacity), class name : music-player-shade.
  7. Music slider (slider wrapper with darker green color), class name : music-player-slider.
  8. Music slider 2 (slider with darkest green color), class name : music-player-played.
  9. Music pointer (white diamond), class name : music-player-pointer.
II
Artist Name - Song Title
2:00
 
-1:59


Stylize Them
Now we have elements which will be stylized, we can start styling from player wrapper (class name : music-player). Set its display into inline-block and color gradient inside from light grey to dark grey, add box shadow to make it loook more real. Also stylize music-player-inner by filling its top border with 1 pixel thickness and white color, so the player wrapper will have 3D look.

.music-player {
	font-family: Arial, Helvetica;
	display: inline-block;
	width: 600px;
	height: 100px;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(201,201,201)), color-stop(1, rgb(128,132,135)));
	background : -moz-linear-gradient(center top, rgb(201,201,201) 25%, rgb(128,132,135) 100%);
	position: relative;
	overflow: hidden;
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0, 0.8);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0, 0.8);
	box-shadow:  0px 1px 2px rgba(0,0,0, 0.8);
}
	.music-player-inner {
		display: inline-block;
		width: 600px;
		height: 100px;
		padding-top: 3.5%;
		font-size: 25px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border-top: 1px solid rgba(255, 255, 255, 0.6);
	}

Expected Result :

Picture 3


To create a toggle-like button we can set music-player-toggle’s border radius a half from its width and height (the width and height must have same value) and don’t forget to add its box shadow. To create stop state we can use “II” (without quote) inside music-player-toggle-inner, manipulate its display by adding color gradient from lighter grey to dark grey, set its font-size into 35 pixels in order to make stop state bigger.

.music-player-toggle {
	margin-left: 1em;
	display: inline-block;
	width: 50px;
	height: 50px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	-webkit-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
	-moz-box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
	box-shadow: 1px 5px 0px rgba(255,255,255, 0.6);
}

	.music-player-toggle-inner {
		display: inline-block;
		width: 50px;
		height: 45px;
		background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(252,252,252)), color-stop(1, rgb(128,132,135)));
		background : -moz-linear-gradient(center top, rgb(252,252,252) 25%, rgb(128,132,135) 100%);
		font-weight: bolder;
		font-size: 35px;
		padding-top: 5px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		border-radius: 30px;
		border: 2px solid #696b6b;
		text-align: center;
	}

Expected Result :

Picture 4


Now add some style to the music wrapper (class name : music-player-music), add color gradient from light green to darker green, set its border radius into 5 pixels to make its border smooth. To add emboss effect to music wrapper we can use box shadow and set its vertical position into -2 pixels and fill with black.

Create border effect by styling music-player-music-inner, set its bottom border into 1 pixel thickness and fill the border with white, don’t forget to set its border radius into 5 pixels to make each edge smooth.

.music-player-music {
	margin-left: 2em;
	display: inline-block;
	width: 450px;
	height: 50px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(227,233,195)), color-stop(1, rgb(198,218,149)));
	background : -moz-linear-gradient(center top, rgb(227,233,195) 25%, rgb(198,218,149) 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.6);
	-webkit-box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
	-moz-box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
	box-shadow: 0px -2px 1px rgba(0,0,0, 0.4);
	position: relative;
}

	.music-player-music-inner {
		display: inline-block;
		width: 450px;
		height: 42px;
		padding-top: 2%;
		font-size: 25px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	}

Expected Result :

Picture 5


After creating emboss to the music wrapper we can manipulate them to make it look more real by adding stacked layer, read previous tutorial for more details how to create stacked layer.

.music-player-shade {
	top: 0;
	display: inline-block;
	position: absolute;
	width: 450px;
	height: 25px;
	background: rgba(255, 255,255, 0.2);
}

Expected Result :

Picture 6


To create slider, we need to create very wide rectangular shape (music-player-slider) and fill it with dark green color, and then add emboss effect. To determine how long the music was played we can add the indicator (music-player-played) above the slider, fill it with color gradient from dark green to darkest green and set its width a half of the slider’s width.

Finally add pointer above the indicator, create square box, fill it with white, rotate to 45 degree and set its position to the ends of indicator.

.music-player-slider {
	margin-top: .5em;
	display: inline-block;
	width: 350px;
	height: 9px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background: #a9b096;
	-webkit-box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
	-moz-box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
	box-shadow: 0px -1px 0px rgba(0,0,0, 0.4);
	text-align: left;
}

.music-player-played {
	display: inline-block;
	width: 175px;
	height: 9px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0.25, rgb(146,150,131)), color-stop(1, rgb(80,85,65)));
	background : -moz-linear-gradient(center top, rgb(146,150,131) 25%, rgb(80,85,65) 100%);
	text-align: right;
}

.music-player-pointer {
	margin-left: 14.2em;
	display: inline-block;
	width: 7px;
	height: 7px;
	background: #fff;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
}

Expected Result :

Picture 7


Conclusion
We can minimize the use of images by replacing them with pure HTML and CSS3, but it will be a big cost since some of CSS3 properties not yet supported on most common browser, but still we can count on CSS3′s power to minimize the use of images.

 

This Post Tags :

Bookmark Post :

Pin It
  • This is simply awesome ! Thank you for your effort in putting this together & sharing it :) Great result !

  • Great

  • Great, I really appreciate the detail, and the ‘expected results’. Bookmarked!

  • Simply awesome!!

  • Great

  • Nice interface. If we can integrate this with HTML5 or Javascript to make a real music player, that will be awesome :)

  • Simply awesome really…..!!!!!

  • great article, thanks for sharing..

  • oh my god . gooooooood

  • This is a great player. Used it for one of my projects and its great. Thanks for the tutorial.

  • very nice . i really love the menu colors . actually im using the same exact colors that you used along with this CSS 3 Drop Down Menu .
    P.S. RSS subscribed ;)

  • i was searching this from a long time now my bandwidth will be saved by your coding thanks a lot buddy

  • i can’t wait till css3 / html5 is fully integrated and standard the internet will be such a nicer, faster, more interactive place.