CSS Hover Effect Keren

Sobat tau apa itu yang dinamakan Hover ? pastinya sudah tidak asing lagi bagi sobat blogger mendengar kata - kata itu. Yups Hover adalah salah satu element css. Hover ini berguna untuk membuat efek saat mouse mengenai suatu element HTML. Contoh codenya adalah "a:hover". "a" adalah, element <a></a> yaitu element link. Bila mouse/pointer menyentuh link, maka link tersebut akan berubah sesuai yang dituliskan kode a:hovernya.

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!

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

Related Posts :