Kamis, 26 April 2012

Membuat Style Link dengan CSS3

Saya coba memberikan sesuatu yang baru nieh atau kuno x ea hehehe okeh cekidot bro ...

Kita buat Mark-up HTML terlebih dahulu :
<ul class="shift">
    <li><a href="/">Sorot ini</a></li>
    <li><a href="/">Sorot tautan ini</a></li>
</ul>

Sesudah itu mari kita buat CSS-nya :

.shift {
    list-style: none;
    display: inline-block;
}

.shift li {
    background: orangered;
    width: 0%;
    display: block;
    -webkit-transition: all 0.125s ease-in-out;
    -moz-transition: all 0.125s ease-in-out;
    transition: all 0.125s ease-in-out;
}

.shift li:hover {
    width: 100%;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.shift li a {
    text-transform: uppercase;
    display: block;
    color: #000;
    font-size: 1em;
    margin: 0.5em;
    padding: 0.5em;
    text-decoration: none;
    white-space: nowrap;
}
Cocok untuk membuat efek pada sidebar ataupun footer blog kita. Ada tanggapan ? untuk demonyan silahkan di buat sendiri ea sob ...
Agen Bola online Agen Bola online

1 komentar:

 

Tutorial Vicahya' - Just Sharing © 2012 | Template by Bamz Display Pagerank