ExploreCSS — Blurred Background & Fractal Noise Effect Untuk Desain Kekinian.

Banyak cara untuk menampilkan desain blurred background, Salah satunya dengan menggunakan CSS Filter, CSS pseudo-element, CSS mix-blend-mode

Desain bang DimasWibowo dari file figma community Dreamy Gradient Blur

Tulisan kali ini kayaknya santai aja ya, berawal dari tweet-nya bang DimasWibowo terkait desainnya apakah bisa di develop? apakah menyusahkan developer?

https://twitter.com/dadimdum/status/1409749204558221321?s=20

Dari cuitan tersebut, saya jadi inget dengan desain bang Dimas yang ada di figma community, dan saya pun tertantang untuk mencoba explorasi desain tersebut menggunakan CSS.

https://www.figma.com/community/file/955866301003783604/Dreamy-Gradient-Blur

“Ngapain sih ribet pake CSS? kan bisa…. “

“Ya, namanya juga eksplorasi #MulaiAjaDulu #PastiAdaJalan .”

Analisa Desain

Dari banyak pilihan desain yang disediakan, saya pilih satu.

https://www.figma.com/community/file/955866301003783604/Dreamy-Gradient-Blur

Dari hasil analisa desain, saya mengambil kesimpulan

• Dalam 1 section header terdapat desain blurred background.
• Blurred background terdiri dari 2 shape ellipse.
• Setiap shape memiliki desain ukuran yang berbeda, nilai blur yang berbeda, nilai gradient yang berbeda
• Setiap shape memiliki efek “texture noise”

Mulai Templating

Ini akan menjadi proses templating yang singkat

HTML

CSS

ExploreCSS kali ini fokus ke memadukan 3 property CSS

• Filter
• Pseudo ::after & ::before
• mix-blend-mode

CSS header

CSS Pseudo ::after & ::before

Mengatur posisi kedua shape agar posisinya di center horizontal & vertical axis

Pseudo element before
Penggunaan element ini untuk mengatur shape yang paling besar

Mengatur ukuran shape before dan nilai dari background, FYI, di figma shape pertama memiliki ukuran 800px x 800px, disini saya ubah menjadi 40vw agar flexible mengikuti ukuran layar

Pseudo element after
Penggunaan element ini untuk mengatur shape yang kecil

Tambahkan property margin untuk mengubah posisi shape after lebih mencolok ke atas kanan layar.

Hasilnya….

CSS Filter blur

Tambahkan CSS Property filter dengan property blur, menyesuaikan dengan desain.

Hasilnya

HTML SVG filter

Saya biasanya jika ingin menampilkan efek/tekstur kertas pada sebuah template, saya menggunakan gambar untuk dijadikan background.

Nah, kebetulan, beberapa waktu yang lalu, saya melihat explorasi dari Ana Tudor terkait penggunaan SVG Filter, jadi saya sekalian belajar juga penggunaan SVG Filter

• Penggunaan id, untuk dipanggil pada css, yang nantinya akan digunakan sebagai background.
• Nah, menurut w3.org tag feTrubulence ini fungsinya untuk membuat gambar Perlin Noise, apasih Perlin Noise? Sumpah, saya gapaham setelah baca di wikipedia. But the end of the day, kalo kodenya jalan, berarti bisa dipakai 😅
• Kemudian, baseFrequency ini fungsinya untuk mengatur kepadatan dari tekstur yang dibutuhkan. Semakin besar nilainya semakin padat teksturnya.
  Selama mencoba, nilai yang bisa digunakan adalah dari 0.001 hingga 1
• Lalu, fractalNoise ini fungsinya, untuk membuat gambar agar terlihat Noise.

• Mari kita coba jika tidak menggunakan type fracatalNoise
<feTurbulence baseFrequency=”0.1"></feTurbulence>

Tampilan tanpa menggunakan fracatalNoise

CSS Texture Effect

• filter digunakan memanggil SVG Filter
• mix-blend-mode berungsi untuk memberikan efek memadukan antar layer. jika kamu terbiasa menggunakan Photo Editor pasti sudah familiar dengan ini.

Hasilnya…

Jika tidak menggunakan mix-blend-mode, tampilannya akan seperti ini

Menambahkan sedikit interaksi ketika pertama kali dibuka

“Mas, kayaknya bagus deh dikasih efek parallax berlawanan sama cursor ketika di-hover”

Okay, bisa, akan tetapi, akan ada perubahan dari proses templating-nya:

1. Mengubah Pseudo-Element dengan tag HTML, misal menggunakan tag span
2. Menambahkan kode javascript untuk mengatur parallax effects
3. Karena parallax effects menggandalkan transform, maka untuk mengatur shape agar centering, maka yang digunakan adalah flexbox.
4. Nilai transform akan berubah mengikuti pengaturan dari parallax effects

Hasilnya Silakan lihat ditautan demo, yes!

Demo & Source code

Standrard

Demo CSS Blurred Background

Parallax

Demo CSS Blurred Background

Hmmm, kalo desain gini emang bisa pake CSS?

https://www.figma.com/community/file/955866301003783604/Dreamy-Gradient-Blur

Kayaknya, kalo Ana tudor yang ngerjain bisa deh, saya belum bisa mainin CSS gradient. hehehe

Saya penganut CSS First, apabila masih bisa menggunakan CSS, maka saya lanjutkan, meskipun memakan waktu, karena ada kepuasan tersendiri.

Tidak semua kasus bisa menggunakan cara yang sama perlu banyak perimbangan.

Kesimpulan dan Referensi

1. Penggunaan CSS Filter blur ini terlihat tidak smooth pada hasil akhirnya.
2. Saya tidak memahami 100% terkait penggunaan tag feTrubulence, but it’s working! haha 😅
3. Hasil akhir tidak sama dengan desain, ya, karena kan ini eksplorasi, *alasan aja*
4. Keuntungan menggunakan CSS adalah kita bisa memberi nilai yang berbeda-beda untuk interaksi yang akan dibuat.
5. Kalian bisa menggunakan video ataupun canvas dengan hasil yang sama, banyak jalan dan cara untuk Jogja. 😊
6. Selengkapnya tentang membuat patterns dengan SVG Filter
7. Terima kasih Bang DimasWibowo untuk desainnya
8. Selengkapnya tentang Mix Blend Mode