CSS3 Music Player Menu

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.

download source

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.

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.

<div class="music-player">
  <div class="music-player-inner">
    <div class="music-player-toggle">
    <span class="music-player-toggle-inner">II</span>
    </div>
    <div class="music-player-music">
    <div class="music-player-music-inner">
      <div class="music-player-content">
      Artist Name - Song Title <br/>
      2:00 
        <div class="music-player-slider">
        <span class="music-player-played">
          <span class="music-player-pointer">&nbsp;</span>
        </span>
        </div> 
      -1:59 
      </div>
      <span class="music-player-shade"></span>
    </div>
    </div>
  </div>
</div>

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 :

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 :

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 :

After creating emboss to the music wrapper we can manipulate them to make it look more real by adding 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 :

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 :

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.

People who read this post also read :

If you liked my post then,

Subscribe to this site via Email:

Click here to Subscribe to FREE email updates from "itrickz", so that you do not miss out anything that can be valuable to you and your blog!!