Efek Arahkan CSS Keren Yang Menggunakan Kliping Latar Belakang, Masker, dan 3D

Kami telah berjalan melalui serangkaian posting sekarang tentang pendekatan menarik untuk efek hover CSS. Kami mulai dengan banyak contoh yang menggunakan CSS background properties, kemudian pindah ke text-shadow properti di mana kami secara teknis tidak menggunakan bayangan apa pun. Kami juga menggabungkannya dengan variabel CSS dan calc() untuk mengoptimalkan kode dan membuatnya mudah untuk dikelola.

Pada artikel ini, kita akan membuat kedua artikel tersebut untuk membuat animasi hover CSS yang lebih kompleks. Kita berbicara tentang kliping latar belakang, topeng CSS, dan bahkan membuat kaki kita basah dengan perspektif 3D. Dengan kata lain, kali ini kita akan mengeksplorasi teknik tingkat lanjut dan mendorong batasan apa yang dapat dilakukan CSS dengan efek hover!

---

Berikut adalah rasa dari apa yang kami buat:

Arahkan efek menggunakan background-clip

Mari Bicara tentang background-clip. Properti CSS ini menerima text nilai kata kunci yang memungkinkan kita untuk menerapkan gradien ke teks dari sebuah elemen, bukan yang sebenarnya latar belakang.

Jadi, misalnya, kita dapat mengubah warna teks saat mengarahkan kursor seperti yang akan kita gunakan color property, tapi dengan cara ini kita menganimasikan perubahan warna:

Yang saya lakukan hanyalah menambahkan background-clip: text ke elemen dan transition itu background-position. Tidak harus lebih rumit dari itu!

Tapi kita bisa lebih baik jika kita menggabungkan beberapa gradien dengan nilai kliping latar belakang yang berbeda.

Dalam contoh itu, saya menggunakan dua gradien berbeda dan dua nilai dengan background-clip. Gradien latar belakang pertama terpotong ke teks (berkat text value) untuk mengatur warna saat melayang, sedangkan gradien latar belakang kedua membuat garis bawah bawah (terima kasih kepada padding-box nilai). Segala sesuatu yang lain langsung disalin dari pekerjaan yang kami lakukan di artikel pertama dari seri ini.

Bagaimana dengan efek hover di mana bilah meluncur dari atas ke bawah dengan cara yang terlihat seperti teks dipindai, lalu diwarnai:

Kali ini saya mengubah ukuran gradien pertama untuk membuat garis. Lalu saya geser dengan gradien lain yang memperbarui warna teks untuk menciptakan ilusi! Anda dapat memvisualisasikan apa yang terjadi di pena ini:

Kami hanya menggores permukaan dari apa yang bisa kami lakukan dengan background-clipkekuatan ping! Namun, teknik ini kemungkinan merupakan sesuatu yang Anda ingin hindari untuk digunakan dalam produksi, karena Firefox diketahui memiliki banyak bug yang dilaporkan berhubungan dengan background-clip. Safari memiliki masalah dukungan juga. Itu hanya menyisakan Chrome dengan dukungan solid untuk hal ini, jadi mungkin buka saat kami melanjutkan.

Mari beralih ke efek hover lainnya menggunakan background-clip:

Anda mungkin berpikir yang satu ini terlihat sangat mudah dibandingkan dengan apa yang baru saja kita bahas — dan Anda benar, tidak ada yang mewah di sini. Yang saya lakukan hanyalah menggeser satu gradien sambil meningkatkan ukuran yang lain.

Tapi kita di sini untuk melihat efek hover tingkat lanjut, bukan? Mari kita ubah sedikit agar animasinya berbeda saat kursor mouse meninggalkan elemen. Efek hover yang sama, tetapi akhir animasi yang berbeda:

Keren kan? mari kita bedah kodenya:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Kami memiliki tiga lapisan latar belakang — dua gradien dan background-color didefinisikan menggunakan --_c variabel yang awalnya diatur ke transparan (#0000). Saat melayang, kami mengubah warna menjadi putih dan --_c variabel ke warna utama (--c).

Inilah yang terjadi pada itu transition: Pertama, kami menerapkan transisi untuk semuanya tetapi kami menunda color dan background-color by 0.5s untuk membuat efek geser. Tepat setelah itu, kami mengubah color dan background-color. Anda mungkin tidak melihat perubahan visual karena teks sudah putih (berkat gradien pertama) dan latar belakang sudah diatur ke warna utama (berkat gradien kedua).

Kemudian, dengan mouse keluar, kami menerapkan perubahan instan untuk semuanya (perhatikan 0s penundaan), kecuali untuk color dan background-color yang mengalami transisi. Ini berarti bahwa kita mengembalikan semua gradien ke keadaan awalnya. Sekali lagi, Anda mungkin tidak akan melihat perubahan visual karena teks color dan background-color sudah berubah di hover.

Terakhir, kami menerapkan fading ke warna dan a background-color untuk membuat bagian mouse-out dari animasi. Saya tahu, ini mungkin sulit untuk dipahami tetapi Anda dapat memvisualisasikan trik dengan lebih baik dengan menggunakan warna yang berbeda:

Arahkan kursor ke atas berkali-kali dan Anda akan melihat properti yang dianimasikan saat dilayangkan dan properti yang dianimasikan saat mouse keluar. Anda kemudian dapat memahami bagaimana kami mencapai dua animasi berbeda untuk efek melayang yang sama.

Jangan lupa teknik switching KERING yang kami gunakan di artikel sebelumnya dari seri ini untuk membantu mengurangi jumlah kode dengan hanya menggunakan satu variabel untuk sakelar:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Jika Anda bertanya-tanya mengapa saya meraih sintaks RGB untuk warna utama, itu karena saya perlu bermain dengan transparansi alfa. Saya juga menggunakan variabel --_t untuk mengurangi perhitungan yang berlebihan yang digunakan dalam transition milik.

Sebelum kita pindah ke bagian selanjutnya, berikut adalah contoh efek hover yang saya lakukan beberapa waktu lalu yang mengandalkan background-clip. Akan terlalu panjang untuk merinci masing-masing tetapi dengan apa yang telah kita pelajari sejauh ini Anda dapat dengan mudah memahami kodenya. Ini bisa menjadi inspirasi yang baik untuk mencoba beberapa dari mereka sendiri tanpa melihat kodenya.

Saya tahu saya tahu. Ini adalah efek hover yang gila dan tidak biasa dan saya menyadari bahwa itu terlalu banyak di sebagian besar situasi. Tapi beginilah cara berlatih dan belajar CSS. Ingat, kita mendorong batas dari efek hover CSS. Efek hover mungkin hal yang baru, tetapi kami sedang mempelajari teknik baru di sepanjang jalan yang pasti dapat digunakan untuk hal-hal lain.

Arahkan efek menggunakan CSS mask

Tebak apa? CSS mask properti menggunakan gradien dengan cara yang sama background property tidak, jadi Anda akan melihat bahwa apa yang kami buat selanjutnya cukup mudah.

Mari kita mulai dengan membuat garis bawah yang mewah.

saya menggunakan background untuk membuat batas bawah zig-zag di demo itu. Jika saya ingin menerapkan animasi ke garis bawah itu, akan sangat membosankan untuk melakukannya menggunakan properti latar belakang saja.

Masukkan CSS mask.

Kodenya mungkin terlihat aneh tetapi logikanya masih sama seperti yang kita lakukan dengan semua animasi latar belakang sebelumnya. Itu mask terdiri dari dua gradien. Gradien pertama ditentukan dengan warna buram yang menutupi area konten (berkat content-box nilai). Gradien pertama itu membuat teks terlihat dan menyembunyikan batas zig-zag bawah. content-box adalah mask-clip nilai yang berperilaku sama dengan background-clip

linear-gradient(#000 0 0) content-box

Gradien kedua akan menutupi seluruh area (terima kasih kepada padding-box). Yang ini memiliki lebar yang ditentukan menggunakan --_p variabel, dan itu akan ditempatkan di sisi kiri elemen.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Sekarang, yang harus kita lakukan adalah mengubah nilai --_p saat melayang untuk membuat efek geser untuk gradien kedua dan mengungkapkan garis bawahnya.

.hover:hover { --_p: 100%; color: var(--c);
}

Demo berikut menggunakan dengan lapisan topeng sebagai latar belakang untuk lebih melihat trik yang terjadi. Bayangkan bahwa bagian hijau dan merah adalah bagian elemen yang terlihat sementara yang lainnya transparan. Itulah yang akan dilakukan topeng jika kita menggunakan gradien yang sama dengannya.

Dengan trik seperti itu, kita dapat dengan mudah membuat banyak variasi hanya dengan menggunakan konfigurasi gradien yang berbeda dengan mask milik:

Setiap contoh dalam demo itu menggunakan konfigurasi gradien yang sedikit berbeda untuk mask. Perhatikan juga, pemisahan dalam kode antara konfigurasi latar belakang dan konfigurasi topeng. Mereka dapat dikelola dan dipelihara secara mandiri.

Mari kita ubah konfigurasi background dengan mengganti garis bawah zig-zag dengan garis bawah bergelombang sebagai gantinya:

Koleksi lain dari efek hover! Saya menyimpan semua konfigurasi topeng dan mengubah latar belakang untuk membuat bentuk yang berbeda. Sekarang, Anda bisa mengerti bagaimana saya bisa untuk mencapai 400 efek melayang tanpa elemen semu — dan kita masih bisa memiliki lebih banyak lagi!

Seperti, mengapa tidak sesuatu seperti ini:

Inilah tantangan untuk Anda: Perbatasan dalam demo terakhir adalah gradien menggunakan mask properti untuk mengungkapkannya. Bisakah Anda mengetahui logika di balik animasi? Ini mungkin terlihat rumit pada pandangan pertama, tetapi sangat mirip dengan logika yang telah kita lihat untuk sebagian besar efek hover lainnya yang bergantung pada gradien. Posting penjelasan Anda di komentar!

Arahkan efek dalam 3D

Anda mungkin berpikir tidak mungkin membuat efek 3D dengan satu elemen (dan tanpa menggunakan elemen semu!), tetapi CSS memiliki cara untuk mewujudkannya.

Apa yang Anda lihat bukanlah efek 3D nyata, melainkan ilusi sempurna 3D dalam ruang 2D yang menggabungkan CSS background, clip-path, dan transform properti.

Hal pertama yang kita lakukan adalah mendefinisikan variabel kita:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Kemudian kita buat perbatasan transparan dengan lebar yang menggunakan variabel di atas:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Sisi atas dan kanan elemen harus sama dengan --b nilai sedangkan sisi bawah dan kiri harus sama dengan jumlah --b dan --d (yang merupakan --_s variabel).

Untuk bagian kedua dari trik, kita perlu mendefinisikan satu gradien yang mencakup semua area perbatasan yang telah kita definisikan sebelumnya. SEBUAH conic-gradient akan bekerja untuk itu:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Kami menambahkan gradien lain untuk bagian ketiga dari trik. Yang ini akan menggunakan dua nilai warna putih semi-transparan yang tumpang tindih dengan gradien pertama sebelumnya untuk menciptakan nuansa warna utama yang berbeda, memberi kita ilusi bayangan dan kedalaman.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Langkah terakhir adalah menerapkan a CSS clip-path untuk memotong sudut untuk nuansa bayangan panjang itu:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

Itu saja! Kami baru saja membuat persegi panjang 3D dengan hanya dua gradien dan a clip-path yang dapat kita sesuaikan dengan mudah menggunakan variabel CSS. Sekarang, yang harus kita lakukan adalah menganimasikannya!

Perhatikan koordinat dari gambar sebelumnya (ditunjukkan dengan warna merah). Mari perbarui itu untuk membuat animasi:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

Triknya adalah menyembunyikan bagian bawah dan kiri elemen sehingga yang tersisa hanyalah elemen persegi panjang tanpa kedalaman apa pun.

Pena ini mengisolasi clip-path bagian dari animasi untuk melihat apa yang dilakukannya:

Sentuhan terakhir adalah memindahkan elemen ke arah yang berlawanan menggunakan translate — dan ilusinya sempurna! Inilah efeknya menggunakan nilai properti khusus yang berbeda untuk kedalaman yang bervariasi:

Efek hover kedua mengikuti struktur yang sama. Yang saya lakukan hanyalah memperbarui beberapa nilai untuk membuat gerakan kiri atas alih-alih gerakan kanan atas.

Menggabungkan efek!

Hal yang mengagumkan tentang semua yang telah kita bahas adalah bahwa mereka semua saling melengkapi. Berikut adalah contoh di mana saya menambahkan itu text-shadow efek dari artikel kedua dalam seri ke background teknik animasi dari artikel pertama saat menggunakan trik 3D yang baru saja kita bahas:

Kode sebenarnya mungkin membingungkan pada awalnya, tetapi lanjutkan dan uraikan sedikit lebih jauh — Anda akan melihat bahwa itu hanyalah kombinasi dari tiga efek berbeda itu, cukup banyak tercampur bersama.

Biarkan saya menyelesaikan artikel ini dengan efek hover terakhir di mana saya menggabungkan latar belakang, clip-path, dan tanda hubung perspective untuk mensimulasikan efek 3D lainnya:

Saya menerapkan efek yang sama pada gambar dan hasilnya cukup bagus untuk simulasi 3D dengan satu elemen:

Ingin melihat lebih dekat bagaimana demo terakhir itu bekerja? Saya menulis sesuatu di atasnya.

Membungkus

Oof, kita selesai! Saya tahu, ini banyak CSS yang rumit tetapi (1) kami berada di situs web yang tepat untuk hal semacam itu, dan (2) tujuannya adalah untuk mendorong pemahaman kami tentang berbagai properti CSS ke tingkat yang baru dengan memungkinkan mereka berinteraksi satu sama lain.

Anda mungkin bertanya apa langkah selanjutnya dari sini sekarang setelah kami menutup rangkaian kecil efek hover CSS lanjutan ini. Saya akan mengatakan langkah selanjutnya adalah mengambil semua yang kami pelajari dan menerapkannya ke elemen lain, seperti tombol, item menu, tautan, dll. Kami menjaga hal-hal agak sederhana sejauh membatasi trik kami ke elemen heading untuk alasan yang tepat ; elemen yang sebenarnya tidak masalah. Ambil konsep dan jalankan bersama mereka untuk membuat, bereksperimen, dan mempelajari hal-hal baru!

---

Efek Arahkan CSS Keren Yang Menggunakan Kliping Latar Belakang, Masker, dan 3D awalnya diterbitkan pada Trik CSS. Kamu harus dapatkan buletin.

• Coinsmart. Pertukaran Bitcoin dan Crypto Terbaik Eropa.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. AKSES GRATIS.
• CryptoHawk. Radar Altcoin. Uji Coba Gratis.
• Sumber: https://css-tricks.com/css-hover-effects-background-masks-3d/