Forma-imagem-limiar - CSS-Tricks

A shape-image-thresholdpropriedade CSS define quais pixels são incluídos na forma de uma imagem quando shape-outsideé usada para definir a área flutuante de um elemento CSS.

Digamos que estejamos usando um gradiente linear para definir a área flutuante de uma forma CSS. Algo assim, onde vamos de uma cor sólida para transparente em um ângulo de 45 °:

Normalmente, definiríamos isso como o background-imagede um elemento. Se flutuarmos esse elemento e soltarmos algum conteúdo próximo a ele, o gradiente e o conteúdo ficarão lado a lado.

Mas se trocarmos background-imagepor shape-outside, não veremos mais o gradiente, mas o conteúdo envolve-o onde os pixels no gradiente são transparentes.

Mas digamos que achamos que o texto precisa se aproximar um pouco mais da forma. É aí que podemos alcançar shape-image-threshold. Podemos usá-lo para ajustar onde o conteúdo naturalmente envolve os pixels transparentes, incluindo pixels semitransparentes. Por exemplo, um shape-image-thresholdvalor de .3 incluirá pixels que são mais de 30% opacos na área flutuante da forma.

Desta vez, incluiremos o gradiente para ver como isso funciona.

Veja isso? Ao declarar shape-image-thresholda segunda forma e defini-la com um valor de 0,15, incluímos pixels que são mais de 15% opacos na área flutuante, permitindo que o conteúdo se sobreponha à forma um pouco.

Isso também funciona quando estamos definindo a forma externa com um arquivo de imagem real que usa transparência. Mesma coisa, apenas uma forma diferente para trabalhar.

Sintaxe

.logo ( shape-outside: url(/path/to/image.png.webp); shape-image-threshold: .6; )

Aplica-se a: flutuadores
Herdado: não
Valor inicial: 0,0
Tipo de animação: número

Valores

A shape-image-thresholdpropriedade aceita um único valor alfa entre 0 e 1, onde 0 é o equivalente a um nível de opacidade de 0% (totalmente transparente) e 1 é o equivalente a um nível de opacidade de 100% (sem transparência). O valor inicial é 0,0.