Oblik-slika-prag - CSS-trikovi

shape-image-thresholdSvojstvo CSS postavlja koji se pikseli uključuju u oblik slike kada shape-outsidese koristi za definiranje plutajućeg područja CSS elementa.

Recimo da pomoću linearnog gradijenta definiramo plutajuće područje CSS oblika. Nešto slično ovome gdje od pune boje prelazimo u prozirnu pod kutom od 45 °:

Obično bismo to definirali kao background-imageelement. Ako plutamo po ovom elementu i ispustimo malo sadržaja pored njega, gradijent i sadržaj smjestit će se jedan pored drugog.

Ali ako zamijenimo background-imageza shape-outside, više nećemo vidjeti gradijent, već se sadržaj obavija tamo gdje su pikseli u gradijentu prozirni.

Ali recimo da mislimo da tekst treba malo bliže zagrliti oblik. Tu možemo posegnuti shape-image-threshold. Pomoću njega možemo prilagoditi mjesto na kojem se sadržaj prirodno obavija oko prozirnih piksela uključujući piksele koji su poluprozirni. Na primjer, shape-image-thresholdvrijednost .3 uključivat će piksele koji su više od 30% neprozirni u plutajućem području oblika.

Ovaj put ćemo uključiti gradijent da vidimo kako to funkcionira.

Vidi to? Deklariranjem shape-image-thresholddrugog oblika i postavljanjem na vrijednost .15, u plutajuće smo područje uvrstili piksele veće od 15% neprozirnih, što omogućuje sadržaju da oblik prekriva mrvicu.

To također radi kada definiramo vanjski oblik stvarnom slikovnom datotekom koja koristi prozirnost. Isti posao, samo drugačiji oblik za rad.

Sintaksa

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

Odnosi se na: pluta
Naslijeđeno: ne
Početna vrijednost: 0,0
Vrsta animacije: broj

Vrijednosti

shape-image-thresholdObjekt prihvaća jednu alfa vrijednosti između 0 i 1, pri čemu je 0 ekvivalent razinu neprozirnosti od 0% (potpuno transparentno) i 1 je ekvivalent razini neprozirnosti od 100% (bez transparentnost). Početna vrijednost je 0,0.