Pada kesempatan ini saya akan memberikan trik tentang CSS yaitu Membuat Efek Hover Pada Link Anchor Dengan HTML CSS. Jadi efek hover yang akan dibuat yaitu dimana terdapat tag <a> atau link anchor maka akan tampil background. Bagaimana kalau langsung saja kita membuatnya yuk mari ikuti langkah-langkahnya: Show Pertama Sahabat silahkan membuat file HTML yang berisi code berikut : <div class="box"> <p>UI atau <a href="" class="anchor">User Interface</a> adalah ilmu tentang tata letak grafis suatu web atau aplikasi. Cakupan UI adalah tombol yang akan diklik oleh pengguna, teks, gambar, text entry fields, dan semua item yang berinteraksi dengan pengguna.</p> <p>Definisi UX atau <a href="" class="anchor">User Experience</a> menurut Borrys Hasian ada bermacam-macam. Berdasarkan apa yang dikerjakan, desainer UX adalah orang yang membuat produk yang bermanfaat dan memvisualisasi user flow menjadi desain produk yang teruji dan indah.</p> </div> diatas terdapat 2 buah link anchor yang nanti akan diberikan efek hover, kemudian selanjutnya yaitu: Kedua Setelah mengetikan paragrap diatas kita berikan style CSS untuk menampilkan efek hover dengan code seperti dibawah ini: *{margin:0;padding:0;}
body{box-sizing: border-box;}
.box{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
a{cursor: default;}
.box p{
padding: 25px;
max-width: 760px;
font-size: 28px;
font-weight: 500;
line-height: 2;
}
.box .anchor{
position: relative;
text-decoration: none;
display: inline-block;
color:#123;
padding: 0 1px;
transition: color ease 0.3s;
}
.box .anchor::after{
position: absolute;
content: "";
z-index: -1;
width: 100%;
height: 10%;
bottom: 5px;
left: 0;
background: linear-gradient(to right, #fd5292, #f7ff05);
transition: all ease 0.3s;
}
.anchor:hover{
color:#1d0aff;
}
.anchor:hover::after{height: 75%;}Jika sudah langsung disimpan dan lihat pada browser masing-masing, jika benar maka pada teks yang diberikan tag atau link anchor akan terlihat efek hovernya. Pada Baris 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 { 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>
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 Hover di CSS untuk apa?Salah satu yang sering digunakan yaitu efek Hover pada CSS. Hover pada CSS adalah suatu fungsi yang hanya berjalan apabila kursor berada diatas suatu objek tertentu.
Apa yang dimaksud dengan hover?Arti kata "hover" Bahasa Inggris dalam Bahasa Indonesia. kki. 1 menunggu dekat. 2 melayang-layang (of a bird, helicopter).
Jelaskan apa yang dimaksud dengan CSS?CSS sendiri adalah singkatan dari Cascading Style Sheet. Markup language ini biasanya dipasangkan dengan markup language (bahasa marka) seperti HTML.
|
Cara menggunakan hover css
Pos Terkait
Copyright © 2024 apacode Inc.
