Rabu, 27 April 2011

Membuat Slick Menu Menggunakan CSS3

Posted by silett di 21.20 Label: |

Comments



1. Login ke Blogger
2. Klik Design/Rancangan-->>edit html
3. Centang Expand Widget Template
4. Cari kode]]></b:skin>
5. letakkan Kode CSS dibawah ini tepat diatas kode]]></b:skin>
.wrapper {
width: 100%;
height: 80px;
background : #464646;
background :
-webkit-gradient(linear, left top, left bottom,
from(rgb(168,168,168)), to(rgb(69,69,69)));
background :
-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
border-top: 2px solid #939393;
position: relative;
margin-bottom: 30px;
}
ul {
margin: 0;
padding: 0;
}

ul.menu {
height: 80px;
border-left: 1px solid rgba(0,0,0,0.3);
border-right: 1px solid rgba(255,255,255,0.3);
float:left;
}

ul.menu li {
list-style: none;
float:left;
height: 79px;
text-align: center;
background:
-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90,
from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background:
-moz-radial-gradient(center 80px 45deg, circle cover,
rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

ul li a {
display: block;
padding: 0 20px;
border-left: 1px solid rgba(255,255,255,0.1);
border-right: 1px solid rgba(0,0,0,0.1);
text-align: center;
line-height: 79px;
background :
-webkit-gradient(linear, left top, left bottom,
from(rgb(168,168,168)), to(rgb(69,69,69)));
background :
-moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));
-webkit-transition-property: background;
-webkit-transition-duration: 700ms;
-moz-transition-property: background;
-moz-transition-duration: 700ms;
}

ul li a:hover {
background: transparent none;
}

ul li.active a{
background:
-webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90,
from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );
background:
-moz-radial-gradient(center 80px 45deg,
circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);
}

6. letakkan HTML dibawah ini setelah Kode <body>
<div class="wrapper">
<div class="container"><ul class="menu" rel="sam1">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li ><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
7. simpan templet dan lihat hasilnya

Langganan: Posting Komentar (Atom)