10 Contoh Menakjubkan CSS, SVG & Canvas Masks In Action

Anda dapat melakukan beberapa hal menakjubkan dengan topeng SVG. Teknik ini telah ada selama bertahun-tahun tetapi baru belakangan ini masuk ke dalam pengembangan web arus utama.

Saya telah menjelajahi web untuk menemukan demo topeng kliping khusus & topeng SVG/kanvas di bawah ini. Contoh-contoh ini menunjukkan seberapa jauh Anda dapat mendorong topeng di web, dan pada akhirnya apa yang mungkin mereka tawarkan kepada pengembang di masa depan.

1. Penyamaran Teks

Untuk contoh bersih dari penyembunyian teks dalam tindakan, lihat pena di atas. Ini menggunakan teks halaman aktual dalam HTML sehingga Anda dapat dengan mudah mengubah teks ini untuk membaca apa pun yang Anda inginkan.

Semua keajaiban terjadi di CSS dengan properti seperti background-clip. Anda dapat menerapkan ini ke hampir semua teks di halaman mana pun, tetapi mereka tidak akan ditampilkan kecuali Anda memiliki latar belakang yang jelas.

Efek pembesaran juga dibuat murni dalam CSS yang membuat cuplikan kode ini semakin mengesankan.

2. Poligon Topeng Potongan

Perhatikan pena ini tidak menggunakan JavaScript untuk animasi yang kompleks tetapi semua masking ditangani melalui elemen kanvas. Ini adalah ide yang sangat kompleks sehingga mencoba mengikuti kode akan sulit.

Tapi efek penyembunyian poligon di atas adalah salah satu desain unik yang pernah saya lihat. Dibutuhkan bentuk yang dirancang dalam CSS dan menggunakan JavaScript untuk membuat bentuk ini sebagai elemen halaman untuk menutupi gambar latar belakang.

Ini menjalankan animasi yang konsisten dan berjalan pada elemen Canvas yang didukung JS yang berperilaku seperti wadah untuk konten SVG/XML. Hal-hal yang cukup gila tapi menyenangkan untuk melihat apa yang bisa dilakukan topeng!

3. Penyembunyian Gambar

Contoh potong & kering ini menunjukkan seperti apa topeng gambar CSS. Anda bisa melihat sebelum & sesudah topeng gambar di atas yang dibuat oleh Vincent De Oliveira.

Perhatikan topeng bertekstur hitam yang sebenarnya hanyalah file PNG. Tapi itu berlapis di atas gambar secara dinamis di CSS untuk membuat efek foto bertopeng.

Anda dapat melakukan ini dengan tekstur apa pun yang Anda inginkan selama itu diekspor dengan transparansi. Ada banyak detail pada properti mask dan meskipun itu mendukung file .svg, Anda mungkin merasa lebih mudah untuk memulai dengan PNG.

4. Tombol Melayang

Pernah berpikir untuk menyesuaikan efek hover tombol Anda? Nah cuplikan kode ini membuktikan Anda bisa dengan sedikit kreativitas dan beberapa CSS masking.

Sekali lagi semua kode berjalan pada topeng gambar yang telah ditentukan sebelumnya dan setiap tombol memiliki efek topengnya sendiri. Bagian paling keren adalah animasi hover yang tidak hanya menampilkan topeng, tetapi juga menganimasikannya ke tampilan.

Ini tentu saja sedikit kode eksperimental, tetapi terlihat fenomenal di browser WebKit dan mudah-mudahan teknik ini bisa menjadi bahan pokok dalam beberapa tahun.

5. Masker Teks SVG

Berikut adalah contoh yang sedikit berbeda dari efek topeng teks yang dibuat oleh pengembang Marco Barria.

Alih-alih mendefinisikan gambar SVG khusus ini, kode sebenarnya menggunakan elemen SVG. Itu masih dibangun di atas konten teks HTML biasa tetapi berjalan dengan filter SVG dinamis.

Ini sedikit lebih teknis tetapi juga memberikan lebih banyak kontrol kepada pengembang. Alih-alih bermain-main dengan Illustrator untuk membuat file SVG, Anda dapat membuat kode SVG sebaris langsung di dokumen HTML Anda.

6. Masker Teks Kanvas

Dengan contoh kanvas oleh Calvin Davis ini, Anda akan melihat itu menggunakan HTML mentah untuk konten, tetapi teks itu sendiri tidak dapat dipilih.

Sebaliknya itu dirender pada halaman menggunakan elemen Canvas yang dapat mengabstraksi teks di luar DOM. Ini membuatnya berperilaku lebih seperti gambar sehingga Anda akan melihat efek ini di mana teks menutupi latar belakang, tetapi tidak terasa seperti teks.

Beberapa desainer mungkin tidak menyukai ini karena kurangnya kegunaan jadi jika Anda ingin teks yang dapat dipilih, saya tidak akan repot dengan pengaturan ini.

Tapi ini adalah contoh keren tentang seberapa jauh Anda dapat mendorong tipografi dengan bentuk kanvas.

7. Gradien Animasi

Efek teks keren lainnya adalah gradien animasi yang dibuat oleh pengembang Svante Richter.

Ini menggunakan semua kode SVG di halaman HTML, jadi ini membuat topeng secara dinamis. Pengaturan SVG ini bekerja dengan mengambil alih seluruh halaman dan memberinya latar belakang gradien, lalu menutupi latar belakang ini hanya melalui teks.

Karena gradien dapat dianimasikan melalui CSS, akan tampak seolah-olah teks adalah satu-satunya bagian yang menjiwai. Efek yang cukup keren dan itu adalah sesuatu yang mungkin Anda pertimbangkan untuk ditambahkan ke situs web eksperimental atau halaman arahan.

8. Topeng Kliping Animasi

Animasi topeng kliping abstrak ini menggunakan gelembung bertenaga JS yang dihasilkan secara acak untuk menutupi gambar. Ini menggunakan elemen kanvas bersama dengan topeng kliping animasi yang disatukan untuk membentuk gumpalan SVG yang kohesif.

Ini mungkin tidak tampak seperti banyak, tetapi pengembang Neil McCallion menulis beberapa kode yang cukup manis, dan hasil akhirnya pasti aneh.

Penyembunyian sebagian besar terjadi di elemen kanvas, tetapi dikontrol melalui JavaScript. Ini adalah cara yang menyenangkan untuk memadukan dua gambar dengan animasi SVG abstrak.

Sekali lagi ini mungkin tidak memiliki banyak tujuan di situs web dunia nyata, tetapi ini adalah eksperimen yang keren untuk mengutak-atik topeng.

9. Masker SVG BG

Di sisi lain, inilah efek penyembunyian yang dapat Anda jalankan di hampir semua situs web.

Ini menggunakan gradien latar belakang di samping header pahlawan untuk menciptakan efek masking kompleks yang masih berpadu sempurna.

Pengembang Ryna Rudenko mendorong amplop dengan pena ini menggunakan elemen kanvas mentah dengan sebagian besar efek masking berlapis dalam HTML.

Masker ini tidak hanya praktis dan dapat digunakan di header besar, tetapi juga dibuat dengan sangat baik dan hanya berjalan di HTML5 & CSS3. Contoh utama dari standar web modern yang dimanfaatkan dengan baik.

10. Masker CSS & SVG

Galeri lengkap topeng SVG ini benar-benar menunjukkan seberapa banyak yang dapat Anda lakukan dengan CSS murni.

Ini adalah demo yang menampilkan sekumpulan teknik penyamaran berbeda yang semuanya menggunakan foto yang sama, format berbeda. Selain itu, setiap contoh menyertakan kode contoh tepat di halaman yang dapat Anda uji sendiri—walaupun menyalin kode dari editor CodePen sama mudahnya.

Tapi pena kecil ini bertindak lebih seperti intro terpandu untuk efek masking gambar yang berbeda yang dapat Anda lakukan. Tempat yang luar biasa untuk memulai jika Anda ingin mendalami SVG & topeng dengan demo sederhana.