🚨 🖕🏻 📍 CSS: aventuras en la tierra de la translucidez 🚯 🤘🏼 🚜

Recientemente me pidieron que corrigiera una página de destino. Entre lo que encontré en su código había una imagen encima de la cual se encontraban dos elementos translúcidos superpuestos. Ambos con los mismos valores de color RGB en la propiedad background-color. Se parecía a esto:

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

No había necesidad de usar dos de esos elementos. Esto podría ser necesario a menos que se deba a que solo uno de esos elementos no matizó suficientemente la imagen. Por alguna razón, el autor de la página decidió que agregar otro elemento translúcido superpuesto en la imagen era mejor que aumentar el valor del opacityprimer parámetro . Como resultado, decidí deshacerme de una de las capas y establecer el parámetro de la otra para que la imagen externa se viera igual que la anterior. Todo esto es bueno, pero surgió la pregunta: ¿cómo ajustar el parámetro del elemento restante para que el resultado sea el mismo que cuando se aplican dos capas translúcidas?

opacityopacity

Si lees este artículo sobre la composición de las máscaras, es posible que ya hayas adivinado cómo elegir el valor apropiado. Después de todo, aquí se usa la misma fórmula, que se usó allí para la composición de elementos translúcidos mask-composite: add. Si hay dos capas con valores de transparencia iguales a a0y a1, entonces el valor del indicador resultante se calcula de la siguiente manera:

a0 + a1 - a0*a1

Aquí puede encontrar una demostración interactiva, en la que puede comparar cómo se ve la imagen, tonificada con dos capas, opacitycuyas propiedades ( a0y a1) se pueden controlar con la ayuda de controles deslizantes, y la misma imagen tonificada por una propiedad de capa opacityque se calcula de acuerdo con la fórmula a0 + a1 — a0*a1.

Las opciones para teñir una imagen, dos copias de las cuales se muestran una al lado de la otra.

Es interesante que las áreas en las que se encuentran dos elementos translúcidos, y uno de esos elementos, se vean iguales si no se muestra la imagen debajo de ellos (puede desactivar la salida de imagen usando la casilla de verificación ubicado en la parte inferior de la pantalla). Pero si se muestra una imagen debajo de estas capas, entonces sus dos opciones son ligeramente diferentes. Quizás esta diferencia sea solo el resultado de una ilusión óptica, quizás algunas partes de las imágenes me parezcan más claras o más oscuras de lo que realmente son.

Definitivamente no se ven diferentes si no los muestra uno al lado del otro, sino que simplemente cambian entre dos capas cuyos valores de propiedadopacityson igualesa0ya1, y una capa, opacitycuyo valor se encuentra en la fórmula a0 + a1 — a0*a1. Aquí hay un ejemplo relevante.

Opciones para teñir la imagen con la capacidad de cambiar entre una y dos capas translúcidas.

Este ejemplo se puede ampliar a más capas. En este caso, primero calcule la transparencia de la nueva capa, equivalente a la transparencia de las dos capas inferiores. Luego, encuentre la transparencia de la capa, equivalente a la transparencia de la nueva capa, y la capa inmediatamente superior. Esta operación se repite hasta que se hayan procesado todas las capas.

Reducción de varias capas translúcidas a una sola capa

Experimentos similares me hicieron pensar en cómo calcular los parámetros de una imagen de fondo opaca, que es equivalente a una capa opaca (c0) y una capa translúcida superpuesta (c1cuya transparencia se establece ena). En este caso, la imagen final, que es una sola capa, se puede encontrar procesando la imagen original canal por canal, mientras que los valores de color de los canales resultantes se calculan mediante la siguiente fórmula:

ch0 + (ch1 - ch0)*a

Aquí ch0es el canal de la capa inferior opaco ( red, greeno blue- para el rojo, verde y azul), ch1es el canal correspondiente de la capa translúcida superior, y el indicador aes un indicador de que los conjuntos de la transparencia de la misma capa translúcida.

Si expresa estos argumentos en forma de código SCSS, obtendrá lo siguiente:

/*       */
@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)
}

Aquí hay un ejemplo interactivo. Al experimentar con él, puede comparar el aspecto de las dos capas y su equivalente, presentado como una sola capa. Aquí puede seleccionar los valores de color RGB de dos capas, así como el nivel de transparencia de la segunda capa.

Resultados de aplicar una capa translúcida a una capa opaca

Dependiendo del dispositivo, sistema operativo y navegador, verá que los paneles de color en este ejemplo se ven iguales ... o no. La fórmula es correcta, pero puede variar exactamente cómo se procesan exactamente las dos capas de origen en diferentes entornos.

La parte izquierda de la imagen es el resultado esperado de reducir dos capas a una. El lado derecho muestra cómo, cuando se combinan dos capas (desde la parte superior derecha de la imagen), la capa que se muestra en la parte inferior derecha puede verse diferente de lo esperado.

Les pedí a los usuarios de Twitter que me enviaran capturas de pantalla realizadas con la versión de prueba simplificada de este ejemplo. A juzgar por los comentarios que recibí, parece que los dos paneles siempre se ven iguales en los navegadores móviles (tanto Android como iOS), así como en el navegador Firefox, independientemente del sistema operativo. Casi siempre, los paneles se ven iguales en Windows, aunque obtuve respuestas que indican que Chrome y Chromium Edge a veces representan paneles de forma diferente a la esperada.

Si hablamos de navegadores basados en WebKit que se ejecutan en macOS y Linux, se puede observar que los resultados son muy heterogéneos. En la mayoría de los casos, el color de los paneles es ligeramente diferente. Pero el uso del perfil de color sRGB ayuda a que los paneles se vean iguales. Lo más interesante comienza si este ejemplo se considera en un sistema que usa dos monitores. Arrastrar una ventana de un monitor a otro puede llevar al hecho de que la diferencia entre los paneles es visible o no visible.

Cabe señalar que en escenarios reales la diferencia es muy pequeña, y que es poco probable que un par de estos paneles estén uno al lado del otro. Pero incluso si hay una diferencia, nadie lo sabrá hasta que pruebe la página en diferentes entornos. En cualquier caso, solo un desarrollador web probablemente pueda hacer esto. Además, existe la sensación de que los colores de los elementos opacos comunes también pueden verse diferentes cuando se utilizan diferentes dispositivos, sistemas operativos y navegadores. Por ejemplo, el color #ffa800, que se usa ampliamente en css-tricks.com, se ve diferente en mis computadoras portátiles con Ubuntu y Windows. Pero después de todo, los ojos de diferentes personas pueden percibir los mismos colores de diferentes maneras.

¡Queridos lectores! ¿Ha encontrado problemas con diferentes navegadores, sistemas operativos o dispositivos que muestran diferentes colores de páginas web?

CSS: aventuras en la tierra de la translucidez

More articles: