Nah, pada artikel ini, Share-Tuts akan memberikan CSS Hover Effect yang sangat keren. Berikut 3 Efek Hover Css Keren!
Box Shadow
Ini merupakan salah satu contoh
Hover Css Box Shadow. Cobalah
sobat sentuh teks ini dan lihat hasilnya!
Hover Css Box Shadow. Cobalah
sobat sentuh teks ini dan lihat hasilnya!
element:hover {
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 0.5px rgba(0,0,0,0.5);
}
Opacity (Transparent)
element {
opacity:0.5;
}
element:hover {
opacity:1;
}
Posisi
Coba Sobat sentuh teks ini dengan pointer dan lihat hasilnya!
element {
padding-left:0;
-webkit-transition: all 0.5s ease-in-out;
}
element:hover {
padding-left:5px;
-webkit-transition: all 0.5s ease-in-out;
}
NB : ganti kode element dengan kode yang sobat mau dan jangan lupa untuk menambahkan salah satu kode bisa dengan # bisa juga . , misalnya sobat mau menggunakan kode Hover maka sobat harus menulis .hover atau #hover nah setelah itu agar kode bekerja sobat harus menambahkan kode pemanggil seperti <div id='hover'> atau <div class='hover'>. <div id='hover'> digunakan apabila sobat menggunakan kode css #hover dan <div class='hover'> digunakan apabila sobat menggunakan kode css .hover .
Sekian tutorial CSS Hover Effect Keren dari Share-Tuts.
Source : http://www.blogseno.com/2013/03/3-efek-hover-css-keren.html
Anda sedang membaca artikel tentang CSS Hover Effect Keren dan anda bisa menemukan artikel CSS Hover Effect Keren ini dengan url http://share-tuts.blogspot.com/2013/03/css-hover-effect-keren.html. Anda boleh menyebarluaskan atau mengcopy artikel CSS Hover Effect Keren ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.
Ingin mempromosikan Blog, Produk, Bisnis, Jualan atau lainnya ? Sobat bisa memasangnya diBlog ini. Tunggu apa lagi mumpung masih ada slot untuk sobat. Silahkan hubungi ane dengan meng-Klik Disini
Loading....
0 komentar:
Peraturan Berkomentar :
1. KOMENTAR "PERTAMAXX, KEDUAXX, NICE GAN, NICE SOB" dan sejenisnya akan langsung Share-Tuts hapus
2. Berkomentar sesuai isi postingan.
3. Berkomentar dengan sopan, tidak SARA, kasar/porno.
4. Dilarang SPAM !
5. Dilarang menaruh iklan !
6. Apabila menaruh link hidup maka akan Share-Tuts ganti menjadi link Blog ini !
7. Apabila Anda ingin berkomentar dengan menyertakan link blog, silahkan gunakan profil OpenID.
Posting Komentar