Bokeh telah lama menjadi gaya fotografi yang terkenal. Dalam istilah sederhana, ini menampilkan fokus utama pada subjek dan latar belakang yang diburamkan dengan lembut. Tekniknya indah dan cara yang pasti untuk menarik perhatian pengguna.
Namun bagaimana jika Anda ingin menerapkan estetika Bokeh tanpa fotografi? Ada beberapa metode unik untuk melakukannya.
Desainer web menggunakan CSS dan JavaScript untuk membuat segala macam efek yang terinspirasi Bokeh. Anda akan menemukan suar lensa buram yang familiar dari foto. Namun ada juga penambahan gerakan, UI generatif, dan banyak lisensi artistik yang digunakan.
Berikut adalah delapan contoh efek Bokeh yang didukung oleh kode. Mungkin ada beberapa kesamaan di permukaan. Tapi perhatikan baik-baik, dan Anda juga akan menemukan betapa mendetailnya presentasi ini. Mari kita mulai!
Latar Belakang Pencahayaan Bokeh oleh Wakana YK
Dalam fotografi, Bokeh sering menambah kedalaman pada sebuah gambar. Cuplikan ini membawa konsep ke tingkat yang sama sekali berbeda. tiga.js digunakan untuk menambahkan beberapa animasi 3D yang apik. Plus, pengguna dapat menyeret latar belakang untuk mengubah perspektif.
Lihat Pena Latar Belakang Pencahayaan Bokeh oleh Wakana YK
Doodle CSS Bokeh oleh Crystal S
Kombinasi CSS Grid, animasi, dan filter menghidupkan presentasi ini. Gerakannya terlihat tanpa menjadi gangguan. Ini menjadikannya solusi yang bagus untuk area pahlawan atau bahkan latar belakang halaman. Mengklik kanvas menghasilkan adegan baru dengan bantuan JavaScript.
Lihat Pena Doodle CSS Bokeh oleh Crystal S
Kanvas Lampu Bokeh Lava Animasi oleh smpnjn
Contoh Bokeh ini mengombinasikan efek dengan kecemerlangan lengket lampu lava. Pijar lensa seperti gelembung memudar masuk dan keluar dari fokus, sementara gerakannya tetap tenang. Hasilnya adalah pemandangan yang menciptakan getaran menenangkan.
Lihat Pena Kanvas Lampu Bokeh Lava Animasi oleh smpnjn
Efek Hex Bokeh oleh Will Boyd
Inilah pandangan Bokeh yang sangat berbeda. Pertama, Anda akan melihat latar belakang yang tampak statis yang menampilkan segi enam. Tapi mulailah menggulir, dan Anda akan menemukan efek paralaks yang tersebar. Cuplikan ini juga menggunakan UI generatif yang cerdas untuk membuat adegan baru di setiap penyegaran halaman.
Lihat Pena Hex Bokeh oleh Will Boyd
Bokehlicious dengan CSSoleh Andy Fitzsimon
Jika Anda mencari kecantikan yang halus, cuplikan ini cocok untuk Anda. Sesuai bentuknya, ini menekankan teks latar depan. Sementara itu, gumpalan warna-warni bergerak pelan di latar belakang. SVG dan CSS bergabung untuk menambahkan sentuhan atmosfer.
Lihat Pena bokehlicious oleh Andy Fitzsimon
Efek Bokeh Kanvas oleh Harun Silber
Anda mungkin memperhatikan bahwa sebagian besar contoh yang kami bagikan memiliki skema warna gelap. Tapi yang ini adalah bukti bahwa palet yang cerah juga bisa menarik. Sekali lagi, kehalusan mengatur saat titik-titik dengan lembut memudar masuk dan keluar. Tidak ada yang mewah – tapi itulah intinya.
Lihat Pena Efek Bokeh Kanvas oleh Harun Silber
Salju Bokeh oleh Preetesh Jain
Cuplikan bersalju ini dapat menyampaikan berbagai emosi – dari musiman hingga noir. Skema warna hitam-putih juga memberikan sentuhan estetika yang berbeda. Konsentrasi putih terbesar ada di bagian bawah, namun sulit untuk tidak fokus pada titik gelap yang turun dari atas.
Lihat Pena Salju Bokeh oleh Preetesh Jain
Menyegarkan Efek Bokeh CSS oleh Nayra Rodrguez
Apakah proyek Anda memiliki fleksibilitas dalam hal warna? Maka cuplikan ini layak untuk dicoba. Setiap klik atau penyegaran melukis pemandangan baru – termasuk palet warna. Orb yang bergerak lambat dan nada yang diredam tidak akan mengganggu konten Anda.
Lihat Pena Tanpa judul oleh Nayra Rodrguez
Bawa Bokeh ke Fokus Melalui Kode
Menerapkan efek Bokeh adalah cara jitu untuk menambahkan bakat artistik ke situs web Anda. Dan cuplikan di atas menunjukkan berbagai kegunaan potensial. Anda dapat membuat apa saja mulai dari latar belakang halus hingga sesuatu yang besar dan berani.
Terlebih lagi, CSS dan JavaScript memungkinkan penyesuaian yang hampir tak terbatas. Warna, intensitas, dan kecepatan gerak hanyalah beberapa item yang dapat disesuaikan. Dari sana, Anda dapat membuat presentasi yang sesuai dengan keseluruhan estetika halaman Anda.
Kami harap Anda menemukan kumpulan ini menginspirasi! Jika Anda ingin melihat lebih banyak lagi contoh action Bokeh, lihat kami Koleksi CodePen.
