How to create a music player notification using HTML and CSS.

Today I’d like to show you guys how to create a sleek music player notification using nothing but HTML and CSS. The main benefit of this approach is that it’ll look good on any device, and you don’t need to rely on images for scaling.

(Original design credit: http://dribbble.com/shots/530948-Transparent-Ui)

Here’s the end result – (Live Demo):

Writing the HTML.

Let’s start by writing the HTML we’re going to need to display the notification.

<div class="player">
  <div class="top-overlay"></div>

  <div class="info">
    <p class="title">The Rain is Gone</p>
    <p class="artist">Everythings a Ripple - Dub FX</p>    
  </div>

  <div class="separator"></div>

  <div class="art">
    <img src="http://i.imgur.com/gS18w.png" alt="Album Art" />
  </div>      
</div>

The markup is pretty straight forward and explicit in it’s intent.

Apply some style to the notification.

(Note: I’m using LESS to write some clean CSS.)

Let’s start by styling the actual .player div. This is the container for the entire notification. I’m using the very excellent tool called CSS Gradient Generator to write some cross-browser gradient styles.

.player {
  height: 105px;
  width: 308px;
  margin: 40px auto;
  position:relative;  
  border:1px solid #0B090A;
  border-radius:2px;
  box-shadow: -1px 1px 8px 1px #222;
  background: #252135;
  background: -moz-linear-gradient(top,  #252135 0%, #231e28 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#252135), color-stop(100%,#231e28)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #252135 0%,#231e28 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #252135 0%,#231e28 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #252135 0%,#231e28 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #252135 0%,#231e28 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#252135', endColorstr='#231e28',GradientType=0 ); /* IE6-9 */
}

Next, let’s add a faint white overlay to the top of the notification. This gives it a nice finish.

.top-overlay {
  background-color: rgba(255, 255, 255, 0.20);
  position: absolute;
  height: 1px;
  width: 100%;
}

Now lets tackle the song information area. We collect all of that in the .info div.

.info {
  float: left;
  width: 203px;

  .title {
    color: #FAFDFF;
    font-size: 14px;
    text-shadow: rgba(35, 32, 35, 1) 0px 2px 0px;
    margin: 10px 0px 0px 12px;
  }

  .artist {
    color: #C8CBCD;
    font-size: 12px;
    text-shadow: rgba(35, 32, 35, 1) 0px 2px 0px;
    margin: 10px 0px 0px 12px;
  }
}

Let’s style the album art area. Simple enough.

.art {
  float: right;

  img {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    margin-right: 10px;
    margin-top: 13px;
  }
}

And finally, style the separator. This is the divider between the song information and the song album art.

.separator {
  background-color: #151515;
  width: 1px;
  height: 100%;
  border-left: 1px solid #383640;
  border-right: 1px solid #383640;
  float: left;
  margin-left: 0px;
}

The end result looks really nice and is very easy to customize.