Seuil-image-forme - Astuces CSS

La shape-image-thresholdpropriété CSS définit les pixels inclus dans la forme d'une image lorsqu'elle shape-outsideest utilisée pour définir la zone flottante d'un élément CSS.

Disons que nous utilisons un dégradé linéaire pour définir la zone flottante d'une forme CSS. Quelque chose comme ça où nous passons d'une couleur unie à une transparence à un angle de 45 °:

Normalement, nous définirions cela comme l' background-imageélément d'un élément. Si nous flottons cet élément et déposons du contenu à côté de lui, le dégradé et le contenu se trouveraient côte à côte.

Mais si nous échangeons background-imagepour shape-outside, nous ne voyons plus la pente, mais les enveloppes contenu autour d' elle où les pixels du gradient sont transparents.

Mais disons que nous pensons que le texte doit épouser un peu plus la forme. C'est là que nous pouvons atteindre shape-image-threshold. Nous pouvons l'utiliser pour ajuster l'endroit où le contenu s'enroule naturellement autour des pixels transparents en incluant des pixels semi-transparents. Par exemple, une shape-image-thresholdvaleur de .3 inclura les pixels qui sont opaques à plus de 30% dans la zone flottante de la forme.

Cette fois, nous allons inclure le dégradé pour voir comment cela fonctionne.

Regarde ça? En déclarant shape-image-thresholdsur la deuxième forme et en la définissant sur une valeur de 0,15, nous avons inclus des pixels opaques à plus de 15% dans la zone flottante, ce qui permet au contenu de chevaucher légèrement la forme.

Cela fonctionne également lorsque nous définissons la forme extérieure avec un fichier image réel qui utilise la transparence. Même accord, juste une forme différente pour travailler.

Syntaxe

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

S'applique à: floats
Héritée: non
Valeur initiale: 0,0
Type d'animation: nombre

Valeurs

La shape-image-thresholdpropriété accepte une seule valeur alpha comprise entre 0 et 1, où 0 est l'équivalent d'un niveau d'opacité de 0% (entièrement transparent) et 1 est l'équivalent d'un niveau d'opacité de 100% (pas de transparence). La valeur initiale est de 0,0.