Saya menemukan ide menerapkan mode malam menggunakan mode campuran-campuran: perbedaan ketika saya sedang mempersiapkan ceramah saya This World Mixed and Blended (slide ini memerlukan dukungan font warna, mis., FireFox / Safari). Gagasan orisinal hanya dimaksudkan untuk sebuah karya dan dukungan browser saat ini terbatas.
Namun, saya menerapkannya ke blog dev saya dan bersenang-senang. Jadi ini adalah tentang apa posting ini. Sementara itu, ketika saya memikirkannya lebih lanjut, terpikir oleh saya sekarang bahwa ini bisa menjadi cara malam yang sah dan lebih disukai untuk dilakukan. Dan izinkan saya berbagi sedikit tentang intuisi di balik itu juga.
Harap dicatat bahwa ini bukan cara standar untuk menerapkan mode gelap. Untuk melihat bagaimana orang biasanya melakukannya, Anda mungkin ingin melihat di sini untuk bagaimana Dan Abramov melakukannya untuk Overreacted, atau posting ini.
Memahami Perbedaan Mode Blending
campuran-campuran-mode: perbedaan adalah salah satu mode pencampuran yang didukung CSS, seperti yang ditentukan dalam Komposit dan Tingkat Pencampuran 1. Mode pencampuran, pada gilirannya, menentukan bagaimana warna bercampur ketika grafik ditumpuk bersama. Grafik tidak terbatas pada gambar. Setiap gambar yang ditampilkan, konten divs, teks, emoji, svgs, dapat berpartisipasi dalam pencampuran.
Saya ingin menganggap itu sebagai proses di mana browser memeriksa dengan kami setiap kali mereka akan melukis elemen baru: "Hei, sepertinya pixel berikutnya yang saya lukis ini berwarna merah, tetapi saat ini saya melihat warna biru pada tanah, kebetulan Anda ingin saya menggabungkan warna-warna itu bersama-sama, dan jika demikian, bagaimana? "
Blending mode memungkinkan kita untuk membuat beberapa efek yang sangat menarik seperti menindih teks pada gambar sambil mengungkapkan tekstur grafik secara langsung di browser:
Definisi
campuran-campuran-mode: perbedaan, khususnya, adalah salah satu mode campuran yang didefinisikan sebagai mengambil nilai absolut dari perbedaan antara dua warna:difference(A, B) = |A - B|
Ini adalah abstraksi dari perhitungan yang sebenarnya, di mana untuk setiap warna yang kami maksud adalah tiga angka yang mewakili saluran R, G, dan B, masing-masing. Sebagai contoh,
difference( rgb(255, 255, 255),
rgb(0, 100, 200) ) = rgb(255, 155,
55)
Sementara itu, mengambil nilai absolut membuat operasi komutatif, artinya B (A, B) = B (B, A). Dengan kata lain, tidak masalah grafik diletakkan di atas yang lain, hasilnya akan sama.
Intuisi
Apa sebenarnya yang dilakukan perbedaan blending mode? Definisi itu tampak langsung. Namun, pikiran kita mungkin tidak pandai memahami apa yang akan terjadi pada warna yang dihasilkan sebelum benar-benar melihatnya. Untuk menyebutkan contoh, perbedaan (putih, merah) pada dasarnya mendeduksi warna komplemen merah, yaitu merah. Tetapi bagaimana Anda bisa "melihatnya" sampai Anda benar-benar melihatnya?Pena berikut ini dibuat dengan memadukan garis putih dan merah yang berpotongan.
Mungkin justru karena efeknya yang sulit dipahami, kita dapat menggunakan mode campuran-campuran: perbedaan untuk membuat beberapa visual yang kontras untuk memicu kejutan di UI, seperti yang ini oleh Sven Wolfermann:
Ini adalah desain yang menginspirasi saya untuk berpikir tentang menciptakan mode gelap menggunakan perbedaan.
Menerapkan mode gelap menggunakan Perbedaan
Bagaimana cara kerjanya?
Idenya sederhana: Ketika mode malam dihidupkan, tutupi situs Anda dengan div layar penuh dengan latar: putih dan campuran-mode: perbedaan, dan selamatkan diri Anda dari kesulitan menentukan semua warna lagi
.dark-mode-screen { width:
100vw; height: 100vh; position:
fixed; top: 0; left: 0; background:
white; mix-blend-mode: difference; }
Tapi mengapa?
Proses pemikiran melibatkan dua angka favorit matematikawan, 0 dan 1.
Dalam ruang satuan, 0 berarti apa-apa dan 1 berarti segalanya.
Dalam warna RGB, 0 berarti hitam dan 1 (100% atau 255) berarti putih.
Sekarang mari kita pikirkan tentang situs blog kita, dan mari kita asumsikan bahwa saat ini kita memiliki latar belakang putih dan latar depan hitam. Jika kita menganggap perbedaan halaman itu dari putih, apa yang kita dapatkan?
latar belakang: saat ini putih, perbedaan antara putih dan putih tidak ada artinya, yang berarti hitam
latar depan: saat ini hitam, yang tidak berarti apa-apa, perbedaan antara putih dan tidak ada yang putih
Sekarang kita memiliki latar belakang hitam dan latar depan putih, dan lihat apa itu? Tema terbalik (gelap) :)
Lebih jauh, saat mengambil perbedaan halaman dengan warna putih, kontras antara latar belakang asli dan latar depan akan dipertahankan secara otomatis. Ini tidak hanya berlaku untuk orang kulit hitam dan kulit putih. Bahkan, blok kode saya dengan tema asli Dracula mengambil rona bergaya sepia bagus ketika terbalik.
Menskalakan div
Saya memasang toggle ke bagian bawah halaman. Ketika mode malam diaktifkan, saya mengubah sakelar itu untuk meningkatkan yang mencakup seluruh halaman. Efek ini semacam memamerkan desain UX asli.
Kegelapan
Jika Anda lebih suka beralih yang lebih halus, mungkin mengubah opacity adalah pilihan yang lebih baik dan blending mode akan bekerja sama baiknya. Dengan fungsi pengaturan waktu yang mudah pada transisi, ini mungkin UI transisi yang dibagikan oleh sebagian besar situs web dan blog yang menerapkan mode malam.
Isolasikan elemen-elemen yang tidak dimaksudkan untuk berbaur
Seperti yang disebutkan sebelumnya, mode campuran-campuran akan berlaku pada grafik apa pun. Namun, ketika menerapkan mode gelap, beberapa elemen mungkin tidak dimaksudkan untuk berbaur. Contoh semacam itu termasuk logo warna tertentu, emoji, dll. Untuk menentukan itu, Anda dapat menempatkan isolasi: mengisolasi (referensi) pada elemen-elemen tersebut. Perhatikan bahwa ini akan membuat konteks penumpukan pada elemen yang diisolasi.
.twitter-logo, .emoji { isolation:
isolate; // twitter logo will not
blend } // elements that create their a
stacking context are automatically
isolated .footer { z-index: 1; }Pilih rona berwarna untuk mode gelap Anda
Seperti disebutkan sebelumnya, mengambil perbedaan antara halaman melawan putih sama seperti mengambil warna komplemen secara langsung. Anda mungkin tidak perlu membatasi pilihan warna menjadi putih. Bahkan, Anda dapat memilih warna apa saja untuk mengambil perbedaan. Untuk efek tema yang lebih gelap di mana situs Anda awalnya dengan latar belakang cahaya, Anda dapat mempertimbangkan warna apa pun yang relatif terang:
Ini adalah beberapa detail teknis yang saya temui. Jika Anda mencoba ini dan menemui masalah di sana-sini, jangan ragu untuk memberi tahu saya dan saya senang jika saya dapat membantu.
Untuk melihat hal ini dalam kode, lihat CodePen ini:
Batas
Anda tidak memiliki berbagai macam warna. Ini menghemat masalah Anda menentukan lebih banyak warna, tetapi Anda akan kehilangan kendali atas warna-warna gelap - mereka akan disimpulkan dari warna-warna terang Anda. Namun ini mungkin bukan batas melainkan pilihan desain.
Kinerja dapat menjadi perhatian juga untuk komputasi dengan-pixel dan oleh-channel. Jangan melakukan animasi gila dengannya (belum).
Hingga waktu berikutnya 🤞
Mode campuran adalah warga negara dari grafik komputer. Saya ingat pertama kali bermain-main dengan mereka di Photoshop tahun lalu. Sekarang browser menjadi lebih kuat dan kami melihat fitur-fitur grafis kompleks yang asli untuk rendering browser. Ini tidak berarti kita harus menerapkan photoshop lengkap di browser dan kita juga tidak boleh membatasi imajinasi kita hanya untuk itu. Browser dan halaman web memiliki konteks dan tujuan mereka sendiri, serta batasan yang berbeda. Mungkin kita harus menyambut mereka seperti penghuni baru dan menemukan kasus penggunaan asli wilayah ini.
Sekali lagi, inspirasinya dipuji oleh CodePen ini, sebuah animasi lucu yang memukau pada pandangan pertama.
Saya harap ini berfungsi sebagai penemuan ramah tentang blending mode, dan saya harap Anda bersenang-senang sama seperti saya.
0 Response to "Mode Malam dengan Mode Campuran Campuran: Perbedaan"
Posting Komentar