Forma-immagine-soglia - Trucchi CSS

La shape-image-thresholdproprietà CSS imposta quali pixel sono inclusi nella forma di un'immagine quando shape-outsideviene utilizzata per definire l'area float di un elemento CSS.

Supponiamo di utilizzare un gradiente lineare per definire l'area mobile di una forma CSS. Qualcosa di simile in cui passiamo da un colore solido a trasparente con un angolo di 45 °:

Normalmente, lo definiremmo come l' background-imageelemento di un elemento. Se fluttuiamo questo elemento e rilasciamo del contenuto accanto ad esso, il gradiente e il contenuto si troverebbero fianco a fianco.

Ma se scambiamo background-imageper shape-outside, non vedremo più il gradiente, ma il contenuto si avvolge attorno ad esso dove i pixel nel gradiente sono trasparenti.

Ma diciamo che pensiamo che il testo debba abbracciare la forma un po 'più da vicino. Ecco dove possiamo arrivare shape-image-threshold. Possiamo usarlo per regolare dove il contenuto si avvolge naturalmente intorno ai pixel trasparenti includendo pixel semitrasparenti. Ad esempio, un shape-image-thresholdvalore di .3 includerà pixel che sono più del 30% opachi nell'area fluttuante della forma.

Questa volta includeremo il gradiente per vedere come funziona.

Guarda quello? Dichiarando shape-image-thresholdsulla seconda forma e impostandola su un valore di .15, abbiamo incluso pixel che sono più opachi del 15% nell'area fluttuante, consentendo al contenuto di sovrapporsi alla forma un po '.

Funziona anche quando definiamo la forma esterna con un file immagine effettivo che utilizza la trasparenza. Stesso accordo, solo una forma diversa con cui lavorare.

Sintassi

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

Si applica a: float
Ereditato: no
Valore iniziale: 0,0
Tipo di animazione: numero

Valori

La shape-image-thresholdproprietà accetta un singolo valore alfa compreso tra 0 e 1, dove 0 è l'equivalente di un livello di opacità dello 0% (completamente trasparente) e 1 è l'equivalente di un livello di opacità del 100% (nessuna trasparenza). Il valore iniziale è 0,0.