Pure CSS3 Mac Toolbar

mac toolbar pure css
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

license by under 88 blogspot.com
Post By : denzdii
Original Artikel : calebogden.com/mac-toolbar-css/

6 comments:

  1. woww update lgi nih.
    ngomong gmana cara bikin advertisi di blog ini mas. di sidebar sebelah kanan..

    ReplyDelete
    Replies
    1. setujuuu, sy juga mau bikin :cendol:

      Delete
    2. mau bikin,mau pasang atau gimana kang... kalau mau pasang di blog ini musti bikin dulu bannernya.. ntr kirimin saja url gambarnya di kontak yang ada..

      baca artikel ini Promosi Pasang ikaln gratis

      Delete
    3. pengen bikin kotak iklan seperti di blog ini kang :D

      Delete
    4. kank banyak di om google kank.. :D

      Delete
  2. Great Post ! CSS3 tutorial with simple and easy examples,covering CSS3 Modules, Background Properties, Borders, Gradients, Shadow Effects, Web Fonts,Text,2D & 3D Transform, Transitions, Animations, Multiple Columns, User Interface, Box Sizing. HTML5 Tutorial & CSS3 Tutorial.

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top