Pure CSS3 Mac Toolbar

Button menu pada toolbar dengan tema windows MAC pure dari CSS3.

* Karena tutorial ini tidak memiliki tujuan praktis untuk membuat kelengkapan caranya, saya hanya berupaya memenuhi dan target jadwal yang sudah di tentukan.

<div class="toolbar">
    <div class="nav">
        <a class="close" href="#">&nbsp;</a>
        <a class="minimize" href="#">&nbsp;</a>
        <a class="expand" href="#">&nbsp;</a>
    </div>
    Mac Toolbar in Pure CSS
</div>

.toolbar {
  overflow:hidden;
  background:#CFCFCF;
  background-color:#cfcfcf;
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#cfcfcf),to(#a8a8a8));
  background-image:-webkit-linear-gradient(top,#cfcfcf,#a8a8a8);
  background-image:-moz-linear-gradient(top,#cfcfcf,#a8a8a8);
  background-image:-ms-linear-gradient(top,#cfcfcf,#a8a8a8);
  background-image:-o-linear-gradient(top,#cfcfcf,#a8a8a8);
  background-image:linear-gradient(top,#cfcfcf,#a8a8a8);
  -webkit-border-radius:4px 4px 0 0;
  -moz-border-radius:4px 4px 0 0;
  position:relative;
  overflow:hidden;
  font:14px/26px 'lucinda grande',Helvetica,Arial;
  text-align:center;
  padding:1px 0 0 68px;
  height:26px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
.toolbar,
.toolbar* {
  color:#111;
  text-shadow:0 1px 0 rgba(255,255,255,0.4);
}
.nav {
  position:absolute;
  top:6px;
  left:12px;
}
.nav a {
  position:relative;
  overflow:hidden;
  display:block;
  float:left;
  width:14px;
  margin-right:7px;
  font:bold 14px/14px 'Helvetica','Arial';
  text-align:center;
  color:#FFF;
  -moz-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
  -webkit-box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
  box-shadow:0 -1px 1px 0 rgba(0,0,0,0.3) inset,0 1px 3px 0 rgba(0,0,0,0.80) inset,0 1px 0 0 rgba(255,255,255,0.40);
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}
.nav a.close {
  background-color:#f12519;
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#f12519),to(#ff8684));
  background-image:-webkit-linear-gradient(top,#f12519,#ff8684);
  background-image:-moz-linear-gradient(top,#f12519,#ff8684);
  background-image:-ms-linear-gradient(top,#f12519,#ff8684);
  background-image:-o-linear-gradient(top,#f12519,#ff8684);
  background-image:linear-gradient(top,#f12519,#ff8684);
  color:#630f0a;
}
.nav a.minimize {
  background-color:#e59130;
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#e59130),to(#ffdf4b));
  background-image:-webkit-linear-gradient(top,#e59130,#ffdf4b);
  background-image:-moz-linear-gradient(top,#e59130,#ffdf4b);
  background-image:-ms-linear-gradient(top,#e59130,#ffdf4b);
  background-image:-o-linear-gradient(top,#e59130,#ffdf4b);
  background-image:linear-gradient(top,#e59130,#ffdf4b);
  color:#742a08;
}
.nav a.expand {
  background-color:#a1e268;
  background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#a1e268),to(#a1e268));
  background-image:-webkit-linear-gradient(top,#a1e268,#a1e268);
  background-image:-moz-linear-gradient(top,#a1e268,#a1e268);
  background-image:-ms-linear-gradient(top,#a1e268,#a1e268);
  background-image:-o-linear-gradient(top,#a1e268,#a1e268);
  background-image:linear-gradient(top,#a1e268,#a1e268);
  color:#093b00;
}
.nav a:before {
  content:'';
  width:6px;
  height:3px;
  background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  position:absolute;
  left:50%;
  top:1px;
  margin-left:-3px;
}
.nav a:after {
  content:'';
  line-height:2px;
  width:12px;
  height:12px;
  position:absolute;
  left:50%;
  margin-left:-6px;
  bottom:-4px;
  opacity:0.55;
  background:-webkit-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-moz-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-ms-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:-o-radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
  background:radial-gradient(50% 50%,cover,rgba(255,255,255,1) 0%,rgba(255,255,255,0) 90%);
}
.nav a.close:after {
  font:bold 11px/0 Verdana;
}
.nav:hover a.close:after {
  content:'x';
}
.nav:hover a.minimize:after {
  content:'-';
}
.nav:hover a.expand:after {
  content:'+';
}
a.close:active {
  background:#c84840;
}
a.minimize:active {
  background:#bb7e39;
}
a.expand:active {
  background:#5b9d2a;
}

DEMO Mac Toolbar

---

Post By : denzdii

Original Artikel : calebogden.com/mac-toolbar-css/