Forma-imagen-umbral - Trucos CSS

La shape-image-thresholdpropiedad CSS establece qué píxeles se incluyen en la forma de una imagen cuando shape-outsidese utiliza para definir el área flotante de un elemento CSS.

Digamos que estamos usando un degradado lineal para definir el área flotante de una forma CSS. Algo como esto donde pasamos de un color sólido a transparente en un ángulo de 45 °:

Normalmente, lo definiríamos como el background-imagede un elemento. Si flotamos este elemento y colocamos algo de contenido junto a él, el degradado y el contenido se colocarían uno al lado del otro.

Pero si cambiamos background-imagepor shape-outside, ya no veremos el degradado, pero el contenido lo envuelve donde los píxeles en el degradado son transparentes.

Pero digamos que pensamos que el texto debe abrazar la forma un poco más. Ahí es donde podemos alcanzar shape-image-threshold. Podemos usarlo para ajustar dónde el contenido se envuelve naturalmente alrededor de los píxeles transparentes al incluir píxeles que son semitransparentes. Por ejemplo, un shape-image-thresholdvalor de .3 incluirá píxeles que son más del 30% de opacidad en el área flotante de la forma.

Esta vez, incluiremos el degradado para ver cómo funciona.

¿Mira eso? Al declarar shape-image-thresholdla segunda forma y establecerla en un valor de .15, hemos incluido píxeles que son más de un 15% de opacidad en el área flotante, lo que permite que el contenido se superponga un poco con la forma.

Esto también funciona cuando definimos la forma exterior con un archivo de imagen real que usa transparencia. Mismo trato, solo una forma diferente para trabajar.

Sintaxis

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

Se aplica a: flotadores
Heredado: no
Valor inicial: 0.0
Tipo de animación: número

Valores

La shape-image-thresholdpropiedad acepta un único valor alfa entre 0 y 1, donde 0 es el equivalente a un nivel de opacidad del 0% (totalmente transparente) y 1 es el equivalente a un nivel de opacidad del 100% (sin transparencia). El valor inicial es 0.0.