Script Membuat Hover Efek Menggunakan CSS3

Asal mau membaca dan mencoba semua itu pasti mudah, banyak sekali sebenarnya bertebaran di dunia maya, tinggal kita yang mau memanfaatkannya atau tidak. Tema kali ini adalah Script Membuat Hover Efek Menggunakan CSS3. Banyak ragam yang dapat kita buat dengan menggunakan CSS3, namun kali ini saya akan memberikan trik baru yang mungkin sudah orang lain gunakan.



Sebagai langkah awal mari kita buat Mark-up HTML:

<ul class="shift">

<li><a href="#">Sorot ini</a></li>

<li><a href="#">Sorot tautan ini</a></li>

</ul>

Selanjutnya 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;

}

Selamat Mencoba!



Saya kira cukup itu saja dulu tutorial dan Script Membuat Hover Efek Menggunakan CSS3...silahkan sharing ke teman-teman anda yang lainnya ya...agar mereka dapat memanfaatkan tips di atas. Caranya mudah kok, kamu bisa share melalui button di bawah ini. Pilih salah satu saja. Oke...sampai ketemu di artikel berikutnya ya. Happy blogging



Read more at: http://bebasbekarya.blogspot.com/2011/08/wordpress-di-hacker-cara-mengamankannya.html

Copyright Bebasbekarya.blogspot.com | Blog Tutorial Untuk Indonesia