Tidak ada yang lebih sederhana dari skema warna hitam-putih. Namun warna-warna yang sangat kontras ini dapat membentuk kombinasi yang paling kuat.
Sebagai permulaan, ini sangat berguna. Menggunakan teks hitam dengan latar belakang putih memberikan aksesibilitas tertinggi. Itu selalu merupakan taruhan yang aman saat mendesain konten.
Tapi itu melampaui utilitas belaka. Hitam dan putih juga bisa digunakan untuk membuat pernyataan artistik yang berani. Ini sempurna saat membuat elemen yang tidak boleh dilewatkan di situs web atau aplikasi seluler.
Hari ini, kami akan menunjukkan kepada Anda delapan contoh cuplikan CSS dan JavaScript yang mendukung B&W secara menyeluruh. Ini dia!
Ilusi Optik CSS yang Memukau oleh Mark Boots
Hanya beberapa baris CSS yang diperlukan untuk membuat pola yang memesona ini. Gradien berbentuk kerucut digunakan untuk membuat orientasi miring. Sementara itu, kotak hitam-putih menghadirkan kekacauan visual. Jangan menatap yang satu ini terlalu lama!
Lihat Pena ilusi penglihatan oleh Mark Boots
Efek Teks Irisan oleh Shireen Taj
Cuplikan ini juga dianggap sebagai sedikit ilusi optik. Ini terdiri dari dua HTML <div> tag, masing-masing berisi kata yang sama. CSS digunakan untuk tumpang tindih dan membuat efek “irisan”. Mungkin tidak bagus untuk aksesibilitas, tetapi itu membuat desain yang menonjol.
Lihat Pena Efek Teks Irisan oleh Shireen Taj
Animasi Logo Sapuan oleh Jon Kantner
Logo animasi dapat memberikan cara yang bagus untuk memperkenalkan merek Anda. Tetapi seringkali yang terbaik adalah menjaga hal-hal tetap halus. Teori itu pasti berlaku untuk presentasi yang indah ini. Teks hitam-putih sederhana diungkapkan dengan lembut dengan lapisan animasi guratan yang terhuyung-huyung.
Lihat Pena Animasi Logo Sapuan oleh Jon Kantner
CSS Animated SVG Ibu dengan Cub oleh Mikael Ainalem
Penggunaan SVG yang cerdas menjadikan animasi mama dan bayi ini menyenangkan. Perhatikan bagaimana anaknya menyelinap di bawah kaki induknya, menambahkan elemen kedalaman dan kejutan. Ini mungkin sangat sederhana, tetapi juga menarik perhatian.
Lihat Pena Ibu dengan anaknya oleh Mikael Ainalem
Animasi Doodle CSS Abstrak Hitam & Putih oleh Alisa Kin
Animasi ini memiliki banyak bagian yang bergerak, tetapi sangat sedikit kode yang menjalankannya di permukaan. Itu karena menggunakan <css-doodle>, komponen web yang membantu menggambar pola CSS. Selain itu, setiap klik menghasilkan versi baru.
Lihat Pena Animasi Doodle CSS Abstrak Hitam Putih oleh Alisa Kin
Kotak Gambit Animasi CSS oleh Chris Gannon
Terinspirasi oleh urutan di Gambit Ratu seri, kotak berputar ini akan menjadi pelengkap sempurna untuk logo atau area pahlawan. Dan karena dibuat dengan SVG, maka akan terlihat tajam dalam berbagai ukuran.
Lihat Pena Kotak Gambit oleh Chris Gannon
Efek Pengguliran Hitam & Putih oleh Crianbluff
Kontras hitam dan putih berpengaruh penuh di sini. Saat Anda menggulir, teks langsung berubah warna, tergantung pada latar belakangnya. Saus rahasianya adalah CSS mix-blend-modeyang memastikan perubahan hitam menjadi putih dan sebaliknya.
Lihat Pena Efek pengguliran hitam & putih oleh Crianbluff
Pengulangan Gambar Vertikal dengan Akselerasi Gulir dan GSAP oleh Cameron Knight
Terakhir, kita tidak bisa melupakan kekuatan fotografi hitam-putih. Ini dimanfaatkan dengan baik di galeri foto bergulir ini. Semakin cepat Anda menggulir, semakin cepat gambar bergerak secara vertikal melalui presentasi. Melayang mengungkapkan gambar penuh warna. Efek campuran CSS pada teks membuat tampilan mulus.
Lihat Pena Lingkaran gambar vertikal dengan akselerasi gulir dengan gsap oleh Cameron Knight
Warna Abadi, Tampilan Berani
Dunia ini penuh warna. Tetapi ketika Anda ingin kembali ke dasar, tidak ada yang seperti hitam dan putih. Ini menawarkan tampilan klasik yang pasti akan menarik perhatian pengunjung.
Contoh di atas menunjukkan bahwa menjadi dasar tidak harus berarti membosankan. Memang, penggunaan gerakan dan interaktivitas meningkatkan segalanya.
Ingin melihat lebih banyak potongan hitam-putih? Lihat kami Koleksi CodePen.
