Form-bilde-terskel - CSS-triks

CSS- shape-image-thresholdegenskapen angir hvilke piksler som er inkludert i formen på et bilde når de shape-outsidebrukes til å definere flyteområdet til et CSS-element.

La oss si at vi bruker en lineær gradient for å definere flyteområdet til en CSS-form. Noe som dette der vi går fra en solid farge til gjennomsiktig i en 45 ° vinkel:

Normalt vil vi definere det som background-imageet element. Hvis vi flyter dette elementet og slipper noe innhold ved siden av det, vil gradienten og innholdet sitte side om side.

Men hvis vi bytter background-imagefor shape-outside, ser vi ikke lenger gradienten, men innholdet brytes rundt den der pikslene i gradienten er gjennomsiktige.

Men la oss si at vi tror teksten trenger å klemme formen litt nærmere. Det er der vi kan strekke oss etter shape-image-threshold. Vi kan bruke den til å justere hvor innholdet naturlig brytes rundt de gjennomsiktige pikslene ved å inkludere piksler som er halvt gjennomsiktige. For eksempel vil en shape-image-thresholdverdi på 3 inneholde piksler som er mer enn 30% ugjennomsiktige i flyteområdet til formen.

Denne gangen inkluderer vi gradienten for å se hvordan dette fungerer.

Se det? Ved å erklære shape-image-thresholdden andre formen og sette den til en verdi på .15, har vi tatt med piksler som er større enn 15% ugjennomsiktige i flyteområdet, slik at innholdet kan overlappe formen som en smidge.

Dette fungerer også når vi definerer den ytre formen med en faktisk bildefil som bruker gjennomsiktighet. Samme avtale, bare en annen form å jobbe med.

Syntaks

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

Gjelder: flyter
Arvet: nei
Startverdi: 0,0
Animasjonstype: nummer

Verdier

Det shape-image-thresholdaksepteres en enkelt alfa-verdi mellom 0 og 1, hvor 0 er det samme som en opasitet nivå på 0% (helt gjennomsiktig) og en tilsvarer en dekkevne på 100% (ingen gjennomsiktighet). Startverdien er 0,0.