Bereksperimen dengan layering, filtering, dan masking di CSS oleh Jeff Zych

Saya baru saja melakukan beberapa percobaan dengan layering, filtering, dan masking di CSS. Bahasa telah berkembang pesat dalam beberapa tahun terakhir, dengan properti seperti filter, mask-image, mix-blend-modejenis gradien tambahan seperti radial-gradientdan banyak lagi, membuka pintu untuk efek seperti Photoshop yang sebelumnya tidak mungkin dilakukan.

Saya melakukan ini di CSS, berbeda dengan Figma atau Photoshop (di mana mereka biasanya sepele), sebagian untuk melihat apakah saya bisa, dan sebagian karena CSS memberikan banyak keuntungan dibandingkan program grafik: mereka dapat menskalakan dan responsif terhadap browser/perangkat ukuran, mode gelap dan terang dapat dikontrol melalui variabel CSS (yang tidak saya lakukan tetapi mungkin), mereka dapat merespons gerakan mouse (yang juga tidak saya coba tetapi mungkin), dan mereka dapat memiliki efek gulir seperti pengguliran perspektif (yang saya lakukan percobaan).

Saya mengikuti beberapa tutorial dan tweet (yang akan saya tautkan), dan mendorong beberapa di antaranya ke arah yang baru.

Menambahkan noise melalui filter SVG

Saya terinspirasi oleh Tweet ini oleh Fons Mans, di mana dia menyarankan untuk menambahkan noise ke gradien untuk memberi mereka tingkat semir dan pop ekstra. Ini membuat saya bertanya-tanya bagaimana saya bisa melakukan ini di web, dan saya ingat pernah melihat tutorial tentang CSS-Tricks beberapa waktu yang lalu tentang cara menambahkan noise ke latar belakang secara terprogram melalui filter SVG. Sebenarnya ternyata itu adalah dua artikel: Grainy gradients by @jimmydan Membuat pola dengan filter SVG oleh @finnhvman.

Saya memutuskan untuk menambahkan beberapa noise ke beberapa gradien di situs saya — latar belakang tata letak utama, dan tajuk halaman penulisan. Ini halus, tapi menarik.

Itu adalah proyek yang menyenangkan untuk mengetahui bagaimana melakukannya dalam kode. tl; dr adalah saya menghasilkan filter kebisingan dengan SVG, dan menerapkannya ke :after elemen dan himpunan mix-blend-mode ke overlay.

Gradien latar belakang blobby dengan noise

Tweet Fons juga menunjukkan cara melapisi, memburamkan, dan memadukan elemen bersama untuk membuat gradien latar belakang yang menarik di Figma, yang juga saya lakukan di CSS:

Lihat gumpalan gradien Pen Background dengan noise oleh Jeff (@jlzych) di CodePen.

Saya juga membuat lampu panggung ini di CSS dari gambar yang saya lihat di NY Times:

Lihat lampu Pen Stage oleh Jeff (@jlzych) di CodePen.

Yang terakhir terinspirasi dari desain salah satu dompet istri saya:

Lihat latar belakang gradien Pen Blobby oleh Jeff (@jlzych) di CodePen.

Pola setengah nada

Saya melihat tutorial keren ini untuk membuat pola halftone di CSS saja, jadi saya mengikuti tutorial itu terlebih dahulu untuk membuat ini:

Lihat pola Pen CSS Halftone oleh Jeff (@jlzych) di CodePen.

Kemudian saya memperluas ide itu untuk melakukan scan lines:

Lihat pola Pen CSS Scan Lines oleh Jeff (@jlzych) di CodePen.

Lalu saya perpanjang itu ide untuk membuat lingkaran memancar dari mata Frank Zappa (yang terinspirasi oleh foto dalam catatan Benar-Benar Gratis:

Lihat overlay lingkaran Pen Radiating oleh Jeff (@jlzych) di CodePen.

Semua itu mengilhami saya untuk membuat pola jenis buram gerakan dengan memburamkan noise SVG dalam satu arah, dan melapisinya di atas beberapa garis. Itu tidak keluar seperti yang saya bayangkan (saya ingin membuatnya terlihat lebih seperti meletakkan cat di atas kanvas dan mengikisnya), tapi itu keren dengan caranya sendiri:

Lihat eksperimen Pen Motion blur oleh Jeff (@jlzych) di CodePen.

Seni pop trippy

Semua itu mengarahkan saya untuk membuat beberapa seni pop trippy yang menggunakan pelapisan dan pencampuran untuk mendapatkan warna yang berbeda, dan perspektif untuk kecepatan gulir yang berbeda sehingga setiap lapisan bergerak melintasi satu sama lain dengan kecepatan berbeda. Gulir di dalam setiap embed Codepen ini untuk melihat apa yang saya maksud.

Lihat hal-hal seni pop Pen Trippy oleh Jeff (@jlzych) di CodePen.

Lihat seni pop Pen Trippy dengan fade oleh Jeff (@jlzych) di CodePen.

Lihat gelombang seni pop Pen Trippy oleh Jeff (@jlzych) di CodePen.

Yang ini favoritku 😄

Kartu dengan perbatasan mewah

Hal terakhir yang saya lakukan adalah membuat kartu ini dengan batas gradien yang mewah, terinspirasi oleh desain yang saya lihat di tempat lain (saya tidak ingat persis di mana), yang menggunakan beberapa teknik pelapisan dan pencampuran dari atas tetapi tidak terlalu eksperimental atau “di luar sana” seperti beberapa hal sebelumnya.

Lihat Kartu Pena dengan bingkai mewah oleh Jeff (@jlzych) di CodePen.

Sirip

Itu saja yang saya punya untuk saat ini. Mereka menyenangkan untuk dibuat, dan saya merasa seperti saya bisa membuat lebih banyak lagi karena masing-masing menginspirasi ide-ide baru. Selain itu, saya lebih terbiasa melihat gradien dan lapisan di dunia sekarang – cahaya, bayangan, pakaian, dompet, dll. – yang membuat saya ingin memikirkan cara membuatnya kembali di CSS.

Selamat menikmati makan siang!