Contoh menggabungkan efek halftone dengan kode

Pola halftone, gambar-gambar titik yang intens ini, adalah landasan cetak dan desain web. Meskipun secara tradisional digunakan sebagai cara mereproduksi gambar cetakan dengan setia, itu juga menjadi gaya tersendiri.

Saat ini, pola halftone digunakan sebagai latar belakang atau sebagai efek khusus nyata untuk gambar. Dengan promosi CSS dan JavaScript, desainer juga telah menemukan cara untuk mengintegrasikan efek ke dalam kode. Hasilnya bisa luar biasa.

Mari kita lihat beberapa contoh bagaimana kode mengimplementasikan halftones. Seperti yang akan Anda lihat, ada beberapa bidikan dan teknik untuk membawa pola klasik ini ke web.

Susun foto kucing Anda (atau bukan kucing)

Ini mungkin implementasi halftone paling terkenal. Ini terdiri dari menambahkan efek ke foto yang ada (dalam hal ini, kucing). Kutipan ini juga dapat sepenuhnya disesuaikan. Misalnya, Anda dapat mengganti titik dengan emoji atau teks. Anda juga dapat mengubah ukuran setiap item. Dan ya, Anda bisa menukar kucing dengan wajah, tetapi mengapa?

Lihat pena
Halftone Ycw

Tekan untuk midtone

Ini adalah aplikasi halftone yang sangat kreatif. Tombol ini menampilkan pola yang halus dengan efek gulir yang sedikit lebih kuat. Namun, mengklik mengaktifkan pola kontras tinggi yang menarik perhatian Anda.

Lihat pena
Taylor Hunt Halftone Button

Mengungkapkan rahasia

Efek senter telah menjadi sangat populer baru-baru ini. Ini dikombinasikan dengan pola halftone yang "mencerahkan" teks tersembunyi. Ini adalah interaksi yang menyenangkan dan polanya membawa sedikit retro / brutalisme.

Lihat pena
Temukan teks tersembunyi Tyler Durrett

Ambil nada yang lebih halus

Tidak ada hukum yang menyatakan bahwa midrange harus tinggi dan bagian ini adalah bukti. Efek halftone berbaur mulus menjadi pola penetasan. Hasilnya adalah sesuatu yang unik dan halus. Poin bonus untuk membangun dengan CSS murni.

Lihat pena
Pola halftone Harga Devin

Hapus efek gulungan

Berikut ini kutipan yang mirip dengan film thriller fiksi ilmiah. Foto halftone biru-hitam memandang kami di seberang layar. Gerakkan penunjuk mouse di atasnya dan sebagian gambar akan menjadi gelap.

Lihat pena
Théo Gil jalan memutar

Parallax Sans BS

Foto ini adalah gambar surealis lain dari efek dan menunjukkan serangkaian titik-titik berwarna yang memusingkan. Saat Anda memindahkan kursor, efek paralaks 3D dibuat yang mengungkapkan garis besar halus yang menggantung di atas gambar utama. Dimensi ekstra membuat efeknya lebih menarik.

Lihat pena
Parallax Halftone oleh Eric Jackson Wood

Duet segalanya

Berkat mode pencampuran CSS, hampir semua hal dapat disediakan dengan efek halftone. Dalam contoh ini, perpaduan yang baik ditambahkan ke banyak foto. Saat Anda mengarahkan kursor mouse ke satu, warna sebenarnya akan muncul. Ini adalah aplikasi yang sangat praktis yang menarik tetapi tidak berlebihan.

Lihat pena
Mode penggabungan CSS Jos van Weesel

Lebih dari bayangan teks rata-rata

Mari kita akhiri dengan kasing lain untuk penggunaan praktis. Di sini kita memiliki gambar peta sederhana yang menggunakan bayangan offset. Dua contoh pertama menggunakan nada warna solid yang berfungsi dengan baik. Namun, set kedua memiliki pola halftone yang memberikan nuansa yang lebih artistik.

Lihat pena
Tandai garis, bayangan + efek halftone

Pola inovasi.

Hal terbaik tentang menggabungkan kode dengan efek gambar klasik adalah bahwa hal itu membuka kemungkinan dunia yang baru. Kita tentu saja dapat menambahkan pola halftone ke elemen desain, tetapi mengapa berhenti di sini?

Desainer menemukan penggunaan baru yang cerdas untuk efek ini. Dalam cuplikan kode di atas, midtone digunakan dengan cara tradisional dan inovatif. Batas lama hanya ada jika kita menginginkannya ada.

Ingin melihat lebih banyak contoh pola halftone? Lihat koleksi CodePen kami untuk tujuan kreatif lainnya.