用css3制作一个Music Player Menu

用css3制作一个Music Player Menu

  用css3制作一个Music Player Menu,主要应用了css3 的box-shadow,border-radius,text-shadow,grident,等属性

 html代码如下:

 <div id=”content”> CSS3 Music Player Menu <br>
  <br>
  <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>
</div>

css代码如下:

* {
    margin:0;
    padding:0;
}
body {
    font-family:Georgia, “Times New Roman”, Times, serif;
    background:#f2f2ea;
    text-align:center;
    color:#464530;
    text-shadow:0 1px 0 #fff;
    font-size:30px;
    font-weight:bold;
    letter-spacing:-1px;
    margin-top:8%;
}
a, a:visited {
    color:#464530;
    text-decoration:none;
}
label {
    font-size:20px;
}
#content {
    display:block;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.music-player {
    font-family:Arial, Helvetica, sans-serif;
    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:0 1px 2px rgba(0,0,0,0.8);
    -moz-box-shadow:0 1px 2px rgba(0,0,0,0.8);
    box-shadow:0 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);
}
.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;
    cursor:pointer;
}
.music-player-music {
    margin-left:2px;
    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:0 -2px 1px rgba(0,0,0,0.4);
    box-shadow:0 -2px 1px rgba(0,0,0,0.4);
    -moz-box-shadow:0 -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);
}
.music-player-shade {
    top:0;
    left:0;
    display:inline-block;
    position:absolute;
    width:450px;
    height:25px;
    background:rgba(255,255,255,0.2);
}
.music-player-content {
    text-align: center;
    font-size: 12px;
    letter-spacing: -.08em;
}
.music-player-slider {
    margin-top:0.5em;
    display:inline-block;
    width:350px;
    height:9px;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    background:#a9b09a;
    -webkit-box-shadow:0 -1px 0 rgba(0,0,0,0.4);
    box-shadow:0 -1px 0 rgba(0,0,0,0.4);
    -moz-box-shadow:0 -1px 0 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);
}

预览效果如下:

支持的浏览器有Safari 4.0.5, Chrome 5.0.342.9 and Firefox 3.6

用css3制作一个Music Player Menu

相关文章:

你感兴趣的文章:

标签云: