Muoto-kuva-kynnys - CSS-temppuja

CSS- shape-image-thresholdominaisuus määrittää, mitkä pikselit sisältyvät kuvan muotoon, kun shape-outsidesitä käytetään CSS-elementin kelluvan alueen määrittämiseen.

Oletetaan, että käytämme lineaarista gradienttia CSS-muodon kelluvan alueen määrittämiseen. Jotain tällaista, kun siirrymme yksivärisestä läpinäkyväksi 45 ° kulmassa:

Normaalisti määrittelemme background-imagesen elementin. Jos kellutamme tämän elementin ja pudotamme sisältöä sen viereen, kaltevuus ja sisältö istuvat vierekkäin.

Mutta jos me vaihtaa background-imagevarten shape-outside, emme enää näe kaltevuus, mutta sisältö kiertyy se missä pikseleiden kaltevuus ovat läpinäkyviä.

Mutta sanotaan, että mielestämme tekstin on halattava muotoa hieman lähempänä. Sieltä voimme tavoittaa shape-image-threshold. Voimme käyttää sitä säätämään, missä sisältö kiertyy luonnollisesti läpinäkyvien pikselien ympärille sisällyttämällä pikselit, jotka ovat läpinäkyviä. Esimerkiksi shape-image-thresholdarvo 0,3 sisältää pikselit, jotka ovat yli 30% läpinäkymättömiä muodon kelluvalla alueella.

Tällä kertaa sisällytämme liukuvärin, jotta voimme nähdä, miten tämä toimii.

Näetkö tuon? Ilmoittamalla shape-image-thresholdtoisesta muodosta ja asettamalla sen arvoksi 0,15, olemme sisällyttäneet pikseleitä, jotka ovat yli 15% läpinäkymättömiä kellukealueella, jolloin sisältö päällekkäin muodon kanssa.

Tämä toimii myös, kun määritämme ulkomuodon todellisella kuvatiedostolla, joka käyttää läpinäkyvyyttä. Sama sopimus, vain erilainen muoto työskennellä.

Syntaksi

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

Koskee seuraavia: kellukkeita
Peritty: ei
Alkuarvo: 0,0
Animaation tyyppi: numero

Arvot

shape-image-thresholdOmaisuuden hyväksyy yhden alfa-arvo välillä 0 ja 1, missä 0 on sama kuin opasiteetti taso 0% (täysin avoin) ja 1 on sama kuin opasiteetti on 100% (ei läpinäkyvyyttä). Alkuarvo on 0,0.