0 Menu Navigasi Gradient Linear Dengan CSS3 "Slick Navigasi Black Dop"

Postingan kali ini saya coba menulis seputar CSS3 lagi, sebagai pelengkap dari CSS3 yang lalu yaitu Hover background transitions , Hover Tab menu dan juga Postingan yang lalu saya pernah membahas membuat menu navigasi CSS3 dengan menggunakan Free CSS3 Menu Maker.

dan kali ini saya coba membuat menu navigasi horizontal dengan menggunakan background gradient linear full CSS3 tanpa image dengan warna Black Dop.

Seperti apa bentuknya menu navigasi dengan CSS3 ini lihat screen shoot di bawah ini.



Menu Navigasi diatas menggunakan background Gradient linear CSS3 dengan kode warna #444444 pada bagian atas dan #666666 untuk bagian bawah. dan juga ronded corner pada bagian ujung kiri dan kanan, semuanya menggunakan CSS3.

Untuk contoh kode Gradient linear seperti ini :

background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
background: -moz-linear-gradient(top, #444444, #666666);

Model navigasi seperti ini kalau dalam bahasa sundanya sih Slick navigasi kalau ga salah tentunya blogger lebih tahu.

Jika blogger ingin memasangnya silahkan lihat source kodenya dan caranya di bawah ini untuk lebih mudah saya memansangnya langsung pada gadget HTML/Javascript :

Pertama masuk Rancangan > Element halaman > Tambah Gadget > Pilih HTML/JavaScript.
masukan kode di bawah ini :

<style>
#main-navigation {
width: 100%;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
background: -moz-linear-gradient(top, #444444, #666666);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');
border: 1px solid #444;
list-style: none;
padding: 8px;
margin: 4px;
float: left;
}

#main-navigation li {
float: left;
border-right: 1px solid #777;
}

#main-navigation li a {
font: 14px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
padding: 12px 20px;
border-right: 1px solid #333;
display: block;
color: #fff;
}

#main-navigation li a:hover {
background:#000000;
text-decoration:underline;
}

</style>

<ul id="main-navigation">
<li><a href="http://chugygogog.blogspot.com/">Home</a></li>
<li><a href="http://chugygogog.blogspot.com /">Themes</a></li>
<li><a href="http://chugygogog.blogspot.com/">Demos</a></li>
<li><a href="http://chugygogog.blogspot.com /">Blog</a></li>
</ul>

Kalau blogger tertarik untuk memasangnya silahkan dicoba.

NB :: Seperti biasa ganti url diatas yaitu teks tebal dengan url blogger.
Kode yang berwarna merah " filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');. merupakan filter untuk bisa menampilkan warna gradient linear ini pada internet explorer.

Tweet

Komentar →