23.10.12

Bikin menu ribbon

Ditulis oleh:

Dalam waktu dekat saya ingin mengganti menu pada website saya dengan menggunakan desain pita, semua hanya menggunakan CSS supaya tampilanya enteng. Kira-kira nanti jadinya kurang lebih seperti dibawah, so mari kita bikin menu ribbon.



Skript htmlnya kaya gini :

"<h1 class="ribbon">
    <href="http://#" strong class="ribbon-content">Ini Menu Saya </strong></a>
    
</h1>​"


CSS-nya
.ribbon {
 font-size16px !important;


 width80%;
    
 positionrelative;
 background#ba89b6;
 color#fff;
 text-aligncenter;
 padding1em 2em
 margin2em auto 3em
}
.ribbon:before.ribbon:after {
 content"";
 positionabsolute;
 displayblock;
 bottom-1em;
 border1.5em solid #986794;
 z-index-1;
}
.ribbon:before {
 left-2em;
 border-right-width1.5em;
 border-left-colortransparent;
}
.ribbon:after {
 right-2em;
 border-left-width1.5em;
 border-right-colortransparent;
}
.ribbon .ribbon-content:before.ribbon .ribbon-content:after {
 content"";
 positionabsolute;
 displayblock;
 border-stylesolid;
 border-color#804f7c transparent transparent transparent;
 bottom-1em;
}
.ribbon .ribbon-content:before {
 left0;
 border-width1em 1em;
}
.ribbon .ribbon-content:after {
 right0;
 border-width1em 1em 0;
}

Lumayan

Tidak ada komentar:

Posting Komentar