cara membuat menu horisontal CSS3 Gradient - Hallo Sob Jody Blog, artikel kali ini berjudul cara membuat menu horisontal CSS3 Gradient, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : cara membuat menu horisontal CSS3 Gradient
link : cara membuat menu horisontal CSS3 Gradient

cara membuat menu horisontal CSS3 Gradient

Menu horisontal yang akan kita buat kali ini adalah menu horisontal yang akan menggunakan fungsi tombol tombol yang akan kelihatan lebih mewah karena menyatukan CSS3 border-radius, kotak-bayangan, dan gradien linier untuk membuat tombol menu mengkilap ada beberapa pilihan yang bisa kamu pake sebagai tombol menu nya : untuk menggunakan menu horisontal css3 gradien pertama

1. Login ke blogger
2. masuk Rancangan 
3. Edit html >>tip: untuk menjaga kemungkinan gagal download lengkap dulu template 
4. Cari kode ]]></b:skin> lalu letak kan kode css di bawah ini tepat di atas kode ]]></b:skin>

Css3 kode :

<style type="text/css">

.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: lightyellow;
}

.redtheme li a{
font-size:18px;
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));
}

.greentheme li a{
font-size:12px;
background: green;
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));
}

.orangetheme li a{
font-size:14px;
background: #e55e3f;
background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a);
background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a));
}

</style>

5. save template
     Dan untuk pemanggilan kode Html nya sobat bisa pilih di antara  contoh 3 menu di bawah ini

1. Untuk Contoh menu Garadien

<div class="gradientbuttons"align="center">
 <ul>
 <li><a href="Link yang di tuju">Home</a></li>
 <li><a href="Link yang di tuju">DHTML</a></li>
 <li><a href="Link yang di tuju">CSS</a></li>
 <li><a href="Link yang di tuju">Forums</a></li>
 <li><a href="Link yang di tuju">Gif Optimizer</a></li>
 </ul>
 </div>

2. Untuk Contoh menu redtheme

div class="gradientbuttons redtheme"align="center">
<ul>
<li><a href="Link yang di tuju">Home</a></li>
<li><a href="Link yang di tuju">DHTML</a></li>
<li><a href="Link yang di tuju">CSS</a></li>
<li><a href="Link yang di tuju">Forums</a></li>
<li><a href="Link yang di tuju">Gif Optimizer</a></li>
</ul>
</div>

3. Untuk Contoh menu greentheme

<div class="gradientbuttons greentheme"align="center">
<ul>
<li><a href="Link yang di tuju">Home</a></li>
<li><a href="Link yang di tuju">DHTML</a></li>
<li><a href="Link yang di tuju">CSS</a></li>
<li><a href="Link yang di tuju">Forums</a></li>
<li><a href="Link yang di tuju">Gif Optimizer</a></li>
</ul>
</div>

Dan untuk melihat semua Contoh menu di atas silahkan di lihat di blog demonya disini

Oke selamat mencoba dengan menu menu horisontal css3 gradient semoga berhasil

Demikianlah Artikel cara membuat menu horisontal CSS3 Gradient

Sekian cara membuat menu horisontal CSS3 Gradient, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel cara membuat menu horisontal CSS3 Gradient dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2011/08/cara-membuat-menu-horisontal-css3.html Semoga artikel ini bisa bermanfaat.

Tweet