♾ 🐦 😰 CSS: aventuras na terra da translucidez 🏆 👩🏾‍⚖️ 🎰

Recentemente, fui solicitado a corrigir uma página de destino. Entre o que encontrei em seu código, havia uma imagem sobre a qual estavam localizados dois elementos translúcidos. Ambos com os mesmos valores de cores RGB na propriedade background-color. Parecia algo assim:

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

Não havia necessidade de usar dois desses elementos. Isso poderia ser necessário, a menos que devido ao fato de que apenas um desses elementos não tenha matizado suficientemente a imagem. Por alguma razão, o autor da página decidiu que adicionar outro elemento translúcido sobreposto à imagem era melhor do que aumentar o valor do opacityprimeiro parâmetro . Como resultado, decidi me livrar de uma das camadas e definir o parâmetro da restante para que a imagem externa parecesse a mesma da anterior. Tudo isso é bom, mas surgiu a questão: como ajustar o parâmetro do elemento restante para que o resultado seja o mesmo da aplicação de duas camadas translúcidas?

opacityopacity

Se você leu este meu artigo sobre a composição de máscaras, já deve ter adivinhado como escolher o valor apropriado. Afinal, a mesma fórmula é usada aqui, que foi usada lá para a composição de elementos translúcidos usando mask-composite: add. Se existem duas camadas com valores de transparência igual a a0e a1, em seguida, o valor do indicador do resultado é calculado como se segue:

a0 + a1 - a0*a1

Aqui você pode encontrar uma demonstração interativa, na qual é possível comparar a aparência da imagem, tonificada com duas camadas, opacitycujas propriedades ( a0e a1) podem ser controladas com a ajuda de controles deslizantes e a mesma imagem tonificada por uma propriedade de camada opacitycalculada de acordo com a fórmula a0 + a1 — a0*a1.

As opções para pintar uma imagem, duas cópias são exibidas uma da outra,

é interessante que as áreas em que dois elementos translúcidos estão localizados e um desses elementos tenham a mesma aparência se a imagem abaixo deles não for exibida (você pode desativar a saída da imagem usando a caixa de seleção localizado na parte inferior da tela). Mas se uma imagem for exibida nessas camadas, suas duas opções serão ligeiramente diferentes. Talvez essa diferença seja apenas o resultado da ilusão de ótica, talvez algumas partes das imagens me pareçam mais claras ou mais escuras do que realmente são.

Definitivamente, eles não parecem diferentes se você não os exibir um ao lado do outro, mas simplesmente alternam entre duas camadas cujos valores de propriedadeopacitysão iguais aa0ea1e uma camada, cujo valor opacityé encontrado pela fórmula a0 + a1 — a0*a1. Aqui está um exemplo relevante.

Variantes de tingimento de imagem com a capacidade de alternar entre uma e duas camadas translúcidas.Este

exemplo pode ser estendido para mais camadas. Nesse caso, primeiro calcule a transparência da nova camada, equivalente à transparência das duas camadas inferiores. Em seguida, encontre a transparência da camada, equivalente à transparência da nova camada e a camada imediatamente acima dela. Esta operação é repetida até que todas as camadas tenham sido processadas.

Reduzindo várias camadas translúcidas para uma única camada

Experiências semelhantes me fizeram pensar em como calcular os parâmetros de uma imagem de fundo opaca, que é equivalente a uma camada opaca (c0) e uma camada translúcida sobreposta (c1cuja transparência está definida comoa). Nesse caso, a imagem final, que é uma camada única, pode ser encontrada processando o canal de imagem original por canal, enquanto os valores de cores dos canais resultantes são calculados pela seguinte fórmula:

ch0 + (ch1 - ch0)*a

Aqui ch0- este canal é a camada inferior opaca ( red, greenou blue- para o vermelho, verde e azul) ch1- é o canal apropriado da camada superior semi-transparente, e o índice a- uma medida que especifica a transparência da mesma camada semi-transparente.

Se você expressar esses argumentos na forma de código SCSS, obtém o seguinte:

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

Aqui está um exemplo interativo. Ao experimentar, você pode comparar a aparência das duas camadas e seu equivalente, apresentado como uma única camada. Aqui você pode selecionar os valores de cores RGB de duas camadas, bem como o nível de transparência da segunda camada.

Resultados da aplicação de uma camada translúcida a uma camada opaca

Dependendo do dispositivo, sistema operacional e navegador, você verá que os painéis de cores neste exemplo têm a mesma aparência ... ou não. A fórmula está correta, mas como exatamente as duas camadas de origem são processadas em ambientes diferentes pode variar.

A parte esquerda da imagem é o resultado esperado da redução de duas camadas para uma. O lado direito mostra como, quando duas camadas são combinadas (na parte superior direita da imagem), a camada mostrada na parte inferior direita pode parecer diferente do esperado.Pedi

aos usuários do Twitter que me enviassem capturas de tela feitas usando a versão de teste simplificada deste exemplo. A julgar pelos comentários que recebi, parece que os dois painéis sempre parecem iguais nos navegadores móveis (Android e iOS), bem como no navegador Firefox, independentemente do sistema operacional. Quase sempre, os painéis têm a mesma aparência no Windows, embora eu tenha respostas indicando que o Chrome e o Chromium Edge às vezes processam os painéis de maneira diferente do esperado.

Se falarmos sobre navegadores baseados no WebKit em execução no macOS e Linux, pode-se notar que os resultados são muito heterogêneos. Na maioria dos casos, a cor dos painéis é um pouco diferente. Mas o uso do perfil de cores sRGB ajuda a deixar os painéis com a mesma aparência. O mais interessante começa se este exemplo for considerado em um sistema que usa dois monitores. Arrastar uma janela de um monitor para outro pode levar ao fato de que a diferença entre os painéis é visível ou não.

Deve-se notar que, em cenários reais, a diferença é muito pequena e que é improvável que um par desses painéis esteja próximo um do outro. Mas mesmo se houver uma diferença, ninguém saberá sobre isso até que ele teste a página em diferentes ambientes. De qualquer forma, apenas um desenvolvedor da web provavelmente pode fazer isso. Além disso, há a sensação de que as cores dos elementos opacos comuns também podem parecer diferentes ao usar diferentes dispositivos, sistemas operacionais e navegadores. Por exemplo, a cor #ffa800, que é amplamente usada em css-tricks.com, parece diferente nos meus laptops com Ubuntu e Windows. Afinal, os olhos de pessoas diferentes podem perceber as mesmas cores de maneiras diferentes.

Queridos leitores! Você encontrou problemas com diferentes navegadores, sistemas operacionais ou dispositivos que exibem cores diferentes de páginas da web?

CSS: aventuras na terra da translucidez

More articles: