Membuat Efek Hover Dengan CSS
Halo sahabat setia Dunia Programming, bertemu lagi dengan saya, dalam tutorial Membuat Efek Hover Dengan CSS. sebelum saya jelaskan cara membuat Script Hover kerennya, saya akan jelaskan terlebih dahulu apa itu Hover.
Apa Itu Hover...?
Hover merupakan gerakan atau perubahan yang terjadi pada sebuah objek apabila area objek tersebut dilintasi atau disentuh oleh mouse (panah mouse).
 |
| Membuat Efek Hover Dengan CSS |
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.
Beberapa contoh style efek dengan konsep CSS hover dapat Kalian pelajari disini di Tutorial Web Pemula
Semudah saat kalian memberikan warna yang berbeda pada link, misalnya dengan konsep CSS seperti contoh dibawah ini
a:link {
color:cyan
}
a:hover {
color:yellow
}
color:cyan
}
a:hover {
color:yellow
}
Maka teks link berwarna Biru Muda dan akan berubah menjadi warna Kuning saat di hover atau saat panah menyentuh obyek yang diberi style atay gaya tersebut.
Hal yang perlu diperhatikan untuk membuat efek hover dengan CSS adalah nilai perubahan, dan apapun yang akan Kalian tampilkan sebagai nilai efeknya, maka letakkan semua pekerjaan kalian 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:
Contoh Script :
Script HTML & CSS
<!doctype html>
<html>
<head>
<title>Membuat Efect Hover</title>
<style type="text/css">
kotak {
background: #000000;
width: 250px;
height: auto;
padding: 10px;
margin: auto;
font-size: 15px;
color: #ffffff;
text-align: center;
}
kotak:hover {
background: #1abc9c;
color: #000000;
}
</style>
</head>
<body>
<div class="kotak">Tutorial Web Pemula</div>
</body>
</html>
<html>
<head>
<title>Membuat Efect Hover</title>
<style type="text/css">
kotak {
background: #000000;
width: 250px;
height: auto;
padding: 10px;
margin: auto;
font-size: 15px;
color: #ffffff;
text-align: center;
}
kotak:hover {
background: #1abc9c;
color: #000000;
}
</style>
</head>
<body>
<div class="kotak">Tutorial Web Pemula</div>
</body>
</html>
Copy Pastekan Script diatas, dan Liat Hasilnya.
Jika semua CSS sudah dicopy paste kedalam script css kalian dengan peletakan yang benar dan tepat, maka efek yang ingin kalian tampilkan dengan perintah HOVER akan Sukses.
Catatan :
Kuncinya satu, pada saat kalian menuliskan property CSS, kalian hanya perlu membuat satu lagi property CSS yang sama, akan tetapi setelah property tersebut, jangan lupa tambahkan :hover.
Jika Kalian ingin membuat efek hover pada sebuah objek, hal yang terpenting adalah menyusun konsep bentuk tampilannya terlebih dahulu, setelah itu hubungkan atau buat perintahnya dengan mengatur nilai-nilai perubahan apa yang akan kalian tampilkan disana, dan letakkan semua konsepnya pada elemen CSS-Hover,
maka hanya dengan 1 bentuk tampilan yang sama, namun Kalian bisa menghasilkan efek hover yang berbeda-beda. Tunggu Tutorial CSS3 Hover, karena ini lebih menarik dari CSS Versi Lama.
Jika anda ingin mengetahui lebih lanjut CSS3, kalian akan lebih banyak mengetahui dan CSS3 banyaklah animation hover yang sangat keren dan menarik.
Sekian Tutorial dari saya, Jika terdapat kesalahan dalam penulisan script, dimohon untuk berkomentar atau kalian bisa langsung bertanya lewat chatwee, Tetap semangat belajar. Terimakasih
Belum ada Komentar untuk "Membuat Efek Hover Dengan CSS"
Posting Komentar