Vorm-afbeelding-drempel - CSS-trucs

De CSS- shape-image-thresholdeigenschap stelt in welke pixels worden opgenomen in de vorm van een afbeelding wanneer shape-outsidewordt gebruikt om het zwevende gebied van een CSS-element te definiëren.

Laten we zeggen dat we een lineair verloop gebruiken om het zwevende gebied van een CSS-vorm te definiëren. Zoiets als dit waarbij we van een effen kleur naar transparant gaan onder een hoek van 45 °:

Normaal gesproken definiëren we dat als de background-imagevan een element. Als we dit element laten zweven en wat inhoud ernaast laten vallen, zouden het verloop en de inhoud naast elkaar staan.

Maar als we ruilen background-imagevoor shape-outside, zien we het verloop niet meer, maar de inhoud wordt eromheen gewikkeld waar de pixels in het verloop transparant zijn.

Maar laten we zeggen dat we denken dat de tekst de vorm een beetje dichter moet omsluiten. Dat is waar we naar kunnen reiken shape-image-threshold. We kunnen het gebruiken om aan te passen waar de inhoud van nature om de transparante pixels loopt door pixels op te nemen die semi-transparant zijn. Een shape-image-thresholdwaarde van .3 omvat bijvoorbeeld pixels die meer dan 30% ondoorzichtig zijn in het zwevende gedeelte van de vorm.

Deze keer voegen we het verloop toe om te zien hoe dit werkt.

Zie dat? Door shape-image-thresholdop de tweede vorm te declareren en deze in te stellen op een waarde van .15, hebben we pixels opgenomen die meer dan 15% ondoorzichtig zijn in het zwevende gebied, waardoor de inhoud de vorm een beetje kan overlappen.

Dit werkt ook wanneer we de buitenvorm definiëren met een echt afbeeldingsbestand dat transparantie gebruikt. Dezelfde deal, alleen een andere vorm om mee te werken.

Syntaxis

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

Geldt voor: drijvers
Overgenomen: nee
Oorspronkelijke waarde: 0,0
Animatietype: nummer

Waarden

De shape-image-thresholdeigenschap accepteert een enkele alpha-waarde tussen 0 en 1, waarbij 0 het equivalent is van een ondoorzichtigheidsniveau van 0% (volledig transparant) en 1 het equivalent is van een ondoorzichtigheidsniveau van 100% (geen transparantie). De beginwaarde is 0,0.