Konsep Membuat Efek Hover Dengan CSS - Hover merupakan gerakan atau perubahan yang terjadi pada sebuah objek apabila area objek tersebut dilintasi atau disentuh oleh mouse (panah mouse). Sedangkan konsep untuk membuat model gerakan dapat kita bentuk dengan CSS transisi dan animasi, sehingga saat cursor menyentuh area dimana objek tersebut berada, maka gerakan akan tercipta sesuai dengan konsep CSS yang sudah kita susun dan tentukan nilainya pada masing-masing deklarasi elemen :hover.
Semudah saat Anda memberikan warna yang berbeda pada link, misalnya dengan konsep CSS seperti ini- a:link {color:red} a:hover {color:blue}, maka teks link berwarna MERAH dan akan berubah menjadi warna BIRU saat di hover. Hal yang perlu diperhatikan untuk membuat efek hover dengan CSS adalah nilai perubahan, dan apapun yang akan Anda tampilkan sebagai nilai efeknya, maka letakkan semua pekerjaan Anda pada area elemen :hover. Sebagai contoh kita membuat efek skew (tulisan akan miring jika di hover), maka yang harus kita lakukan hanya menyusun konsep CSS-nya seperti ini:
<style type'text/css'>.devy { margin: 0 auto; width:250px; border:solid 2px red; border-radius: 5px; color: #111; font: bold 15px/40px Verdana,serif; text-shadow: 1px 2px 1px red; text-align:center; transition: all 0.8s; -moz-transition: all 0.8s; -webkit-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s}
.devy:hover { /*nilai perubahan*/ background: red; color: #fff; text-shadow: 1px 2px 2px #111; transform:rotate(20deg); -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); box-shadow: 2px 4px 3px 2px #222}</style><div class="devy">SAHABAT BLOGGER 77</div>
Jika semua CSS sudah disusun dengan konsep yang benar dan akurat, maka efek yang ingin Anda tampilkan dengan perintah HOVER
akan dengan mudah dikerjakan. Jika Anda ingin membuat efek hover pada
sebuah objek, hal yang terpenting adalah menyusun konsep bentuk
tampilannya terlebih dahulu, setelah itu hubungkan perintahnya dengan
mengatur nilai-nilai perubahan apa yang akan Anda tampilkan disana, dan
letakkan semua konsepnya pada elemen CSS-hover, maka hanya dengan 1 bentuk tampilan yang sama, namun Anda bisa menghasilkan efek hover yang berbeda seperti 5 Model Efek Hover Dengan CSS seperti ini:
0 Komentar untuk "Membuat Hover CSS"