Get best of the week

CSS: petualangan di tanah tembus cahaya

Baru-baru ini saya diminta untuk memperbaiki satu halaman arahan. Di antara apa yang saya temukan dalam kodenya adalah gambar di atasnya dua elemen transparan yang tumpang tindih terletak. Keduanya dengan nilai warna RGB yang sama di properti background-color. Itu terlihat seperti ini:

<img src='myImage.jpg'/>
<div class='over1'></div>
<div class='over2'></div>

Tidak perlu menggunakan dua elemen seperti itu. Ini bisa diperlukan kecuali karena fakta bahwa hanya satu elemen seperti itu tidak cukup mewarnai gambar. Untuk beberapa alasan, penulis halaman memutuskan bahwa menambahkan elemen tembus lain yang ditumpangkan pada gambar lebih baik daripada meningkatkan nilai parameter opacitypertama. Akibatnya, saya memutuskan untuk menyingkirkan salah satu lapisan dan mengatur parameter yang tersisa sehingga gambar eksternal tampak sama dengan yang sebelumnya. Semua ini baik, tetapi muncul pertanyaan: bagaimana cara menyesuaikan parameter elemen yang tersisa sehingga hasilnya sama seperti ketika menerapkan dua lapisan tembus?



opacityopacity

Jika Anda membaca ini artikel saya pada komposisi masker, maka Anda mungkin sudah menebak bagaimana memilih nilai yang sesuai. Bagaimanapun, rumus yang sama digunakan di sini, yang digunakan di sana untuk komposisi elemen tembus cahaya yang digunakan mask-composite: add. Jika ada dua lapisan dengan nilai transparansi sama dengan a0dan a1, maka nilai indikator yang dihasilkan dihitung sebagai berikut:

a0 + a1 - a0*a1

Di sini Anda dapat menemukan demo interaktif, melihat di mana Anda dapat membandingkan bagaimana gambar terlihat, kencang dengan dua lapisan, properti opacityyang ( a0dan a1) dapat dikontrol dengan bantuan slider, dan gambar yang sama kencang oleh properti layer opacityyang dihitung sesuai dengan rumus a0 + a1 — a0*a1.


Pilihan untuk mewarnai gambar, dua salinannya ditampilkan bersebelahan.

Sangat menarik bahwa area di mana dua elemen tembus berada, dan satu elemen seperti itu, terlihat sama jika gambar di bawahnya tidak ditampilkan (Anda dapat menonaktifkan output gambar menggunakan kotak centang) terletak di bagian bawah layar). Tetapi jika suatu gambar ditampilkan di bawah lapisan-lapisan ini, maka dua pilihannya sedikit berbeda. Mungkin perbedaan ini hanyalah hasil dari ilusi optik, mungkin beberapa bagian gambar tampak lebih terang atau lebih gelap bagi saya daripada sebenarnya.

Mereka pasti tidak terlihat berbeda jika Anda tidak menampilkannya di samping satu sama lain, tetapi cukup beralih di antara dua lapisan yang nilai propertinyaopacitysama dengana0dana1, dan dengan satu lapisan yang nilainya opacityditemukan oleh rumus a0 + a1 — a0*a1. Ini adalah contoh yang relevan.


Varian pewarnaan gambar dengan kemampuan untuk beralih antara satu dan dua lapisan tembus.

Contoh ini dapat diperluas ke lebih banyak lapisan. Dalam hal ini, pertama hitung transparansi layer baru, setara dengan transparansi dua layer bawah. Kemudian temukan transparansi layer, setara dengan transparansi layer baru, dan layer tepat di atasnya. Operasi ini diulangi hingga semua lapisan diproses.


Mengurangi beberapa lapisan tembus cahaya menjadi satu lapisan

Eksperimen serupa membuat saya berpikir tentang cara menghitung parameter dari gambar latar buram, yang setara dengan lapisan buram (c0) dan lapisan tembus pandang ditumpangkan di atasnya (c1yang transparansi diatur kea). Dalam hal ini, gambar akhir, yang merupakan lapisan tunggal, dapat ditemukan dengan memproses saluran gambar asli dengan saluran, sedangkan nilai warna dari saluran yang dihasilkan dihitung dengan rumus berikut:

ch0 + (ch1 - ch0)*a

Berikut ch0adalah saluran dari lapisan bawah buram ( red, greenatau blue- untuk warna merah, hijau dan biru), ch1adalah saluran yang sesuai dari lapisan tembus atas, dan indikatornya aadalah indikator yang menetapkan transparansi dari lapisan tembus yang sama.

Jika Anda mengekspresikan argumen ini dalam bentuk kode SCSS, Anda mendapatkan yang berikut:

/*       */
@function res-ch($ch0, $ch1, $a) {
  @return $ch0 + ($ch1 - $ch0)*$a
}

@function res-col($c0, $c1, $a) {
  $ch: 'red' 'green' 'blue'; /*   */
  $nc: length($ch); /*   */
  $ch-list: ();

  @for $i from 0 to $nc {
    $fn: nth($ch, $i + 1);
    $ch-list: $ch-list, 
      res-ch(call($fn, $c0), call($fn, $c1), $a);
  }

  @return RGB($ch-list)
}

Ini adalah contoh interaktif. Dengan bereksperimen dengannya, Anda dapat membandingkan bagaimana dua lapisan terlihat dan padanannya, disajikan sebagai satu lapisan. Di sini Anda dapat memilih nilai warna RGB dari dua lapisan, serta tingkat transparansi lapisan kedua.


Hasil penerapan lapisan tembus cahaya ke lapisan buram

Tergantung pada perangkat, sistem operasi dan browser, Anda akan melihat bahwa panel warna dalam contoh ini terlihat sama ... atau tidak. Rumusnya benar, tetapi bagaimana sebenarnya kedua lapisan sumber diproses dalam lingkungan yang berbeda dapat bervariasi.


Bagian kiri gambar adalah hasil yang diharapkan dari pengurangan dua lapisan menjadi satu. Sisi kanan menunjukkan bagaimana, ketika dua lapisan digabungkan (dari bagian kanan atas gambar), lapisan yang ditunjukkan di kanan bawah dapat terlihat berbeda dari yang diharapkan.

Saya meminta pengguna Twitter untuk mengirimi saya tangkapan layar yang dibuat menggunakan versi uji yang disederhanakan dari contoh ini. Dilihat dari umpan balik yang saya terima, tampaknya kedua panel selalu terlihat sama di peramban seluler (baik Android dan iOS), maupun di peramban Firefox, terlepas dari sistem operasinya. Hampir selalu, panel terlihat sama di Windows, meskipun saya mendapat jawaban yang menunjukkan bahwa Chrome dan Chromium Edge terkadang membuat panel berbeda dari yang diharapkan.

Jika kita berbicara tentang browser berbasis WebKit yang berjalan di macOS dan Linux, dapat dicatat bahwa hasilnya sangat heterogen. Dalam kebanyakan kasus, warna panel sedikit berbeda. Tetapi menggunakan profil warna sRGB membantu membuat panel terlihat sama. Hal yang paling menarik dimulai jika contoh ini dipertimbangkan dalam sistem yang menggunakan dua monitor. Menyeret jendela dari satu monitor ke monitor lain dapat menyebabkan fakta bahwa perbedaan antara panel terlihat atau tidak terlihat.

Perlu dicatat bahwa dalam skenario nyata perbedaannya sangat kecil, dan bahwa sepasang panel seperti itu tidak mungkin bersebelahan. Tetapi bahkan jika ada perbedaan, tidak ada yang akan mengetahuinya sampai dia menguji halaman di lingkungan yang berbeda. Bagaimanapun, hanya pengembang web yang mungkin dapat melakukan ini. Selain itu, ada perasaan bahwa warna elemen buram biasa juga dapat terlihat berbeda ketika menggunakan perangkat yang berbeda, sistem operasi dan browser. Misalnya, warnanya #ffa800, yang banyak digunakan di css-tricks.com, terlihat berbeda di laptop saya dengan Ubuntu dan Windows. Tapi bagaimanapun, mata orang yang berbeda dapat merasakan warna yang sama dengan cara yang berbeda.

Pembaca yang budiman! Pernahkah Anda mengalami masalah dengan berbagai browser, sistem operasi atau perangkat yang menampilkan berbagai warna halaman web?

More articles:


All Articles