Banner 468x60

Ribbon Menu CSS3

Ribbon Menu CSS3



Apa kabar sobat?sudah lama nih gw ngak share tutorial blog,tapi kalau ada waktu senggang ,manfaatin aja deh. nah kali ini saya mau share css ribbon menu.design menubar yang menyerupai pita,karena menarik dan ringan.ok langsung saja


Pertama,buka blogger kamu => Rancangan=> edit HTML lalu masukan kode html di bawah ini.
<div class='menu'>
<a href='#'><span>Home</span></a>
<a href='#'><span>About</span></a>
<a href='#'><span>Services</span></a>
<a href='#'><span>Contact</span></a>
</div>
Note:  Ganti tanda pagar # dengan url link kamu

kemudian,masukan css dibawah ini di atas kode ]]></b:skin>

.menu:after, .menu:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid rgba(0, 159, 234, 0.3 );}
.menu:after {
border-right-color:transparent;}
.menu:before {
border-left-color:transparent;
}
.menu a:link, .menu a:visited {
color:#fff;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;}
.menu span {
background:rgba(0, 159, 234, 0.3 );
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background, margin 0.2s;
-moz-transition: background, margin 0.2s;
-o-transition: background-color, margin-top 0.2s;
transition: background, margin 0.2s;
}
.menu a:hover span {
background:rgba(0, 159, 234, 0.5 );
margin-top:0;
}
.menu span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );
}
.menu span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid rgba(0, 159, 234, 0.3 );}
lalu simpan dan lihat hasilnya.


Simple bukan? selamat mencoba
Jangan Lupa Tingalkan Commentnya

18 komentar

Thanks gan... Ctrl + D dulu ^_^

keren gan, ada demonya gak gan? :D

Wah Gw Kgk Ada Demo
Tapi Gw Udah Pernah Coba

wah, mantap gan artikelnya, kira-kira berat gk ya gan.?

patut dicoba ni tutorialnya

Makasih Sudah Berkunjung ^_^

Thanks Udah Berkunjung :D

Thanks Udah Berkunjung :D

BLOG nya menarik sekali keren banget ka kunjungi yang satu ini yaaa biar kalian ga bingung dalam menentukan masalah GEDGET
http://zapplerepair.com/iPhone-6S-masalah-lcd-display-kadang-mau-muncul-kadang-engga.html