CSS-mask, shape-outside en 3D-perspectief, met live demo's | We.Inc
Laat afbeeldingen vervagen met mask-image-gradiënten, snijd vormen uit met SVG-maskers, laat tekst om cirkels lopen met shape-outside, vergelijk clip-path met mask en bouw een 3D-perspectiefscène.
Een CSS-masker verbergt delen van een element op basis van de transparantie van een afbeelding: mask-image: linear-gradient(black, transparent) laat het naar onderen toe vervagen. shape-outside laat aangrenzende tekst om een cirkel of veelhoek lopen in plaats van om een rechthoek. perspective op een ouder geeft gedraaide kinderen echte diepte. Bouw een masker in de speeltuin en kopieer het.
Welk hulpmiddel voor welke taak
Doel
Eigenschap
Rand
Zachte fade of spotlight
mask-image met een gradiënt
Zacht, elke dekking
Uitgesneden icoon- of logovorm
mask-image met een SVG
Volgt de alfa van de afbeelding
Harde geometrische snede
Altijd scherp
Tekst die om een vorm loopt
shape-outside op een float
Beïnvloedt de lay-out van tekst
Diepte voor 3D-rotaties
perspective op de ouder
Helemaal geen snede
Begin met de maskerspeeltuin: kies een fade, een spotlight of een uitgesneden vorm, verplaats die over een voorbeeldafbeelding en kopieer de CSS inclusief het voorvoegsel -webkit-. Daaronder staan bewerkbare voorbeelden voor tekstomloop, clip-path tegenover mask en een kleine 3D-scène, allemaal zonder JavaScript.
Kies een maskertype: lineaire fade, radiale spotlight of een SVG-vorm.
Pas richting, positie, grootte en zachtheid aan. Het voorbeeld wordt direct opnieuw getekend.
Kopieer de CSS. Die bevat zowel mask-image als -webkit-mask-image, zodat oudere versies van Safari en Chromium ook werken.
Scrol omlaag voor shape-outside, vergelijkingen met clip-path en de perspectiefscène, en bewerk ze ter plekke.
In mask-image telt standaard alleen het alfakanaal. Zwart en elke andere dekkende kleur betekenen zichtbaar, transparant betekent verborgen.
Gebruik mask-size, mask-position en mask-repeat net als de background-eigenschappen. Een SVG-masker herhaalt zich, tenzij u mask-repeat: no-repeat instelt.
shape-outside werkt alleen op zwevende elementen (float). Combineer het met dezelfde clip-path als u wilt dat het element zelf ook die vorm krijgt.
Voeg shape-margin toe om omlopende tekst iets van de curve af te houden.
Veelgestelde vragen
Wat is het verschil tussen clip-path en mask?
clip-path tekent een geometrische omtrek en alles daarbuiten wordt met een harde rand weggesneden. mask-image gebruikt een afbeelding of gradiënt, dus randen kunnen zacht en deels transparant zijn. Clip paths zijn eenvoudiger voor veelhoeken en cirkels; maskers zijn de keuze voor fades, zachte spotlights en uitsneden in de vorm van een logo.
Heb ik -webkit-mask-image nog nodig?
De mask-eigenschappen zonder voorvoegsel werden eind 2023 Baseline. De -webkit-versie ernaast toevoegen kost niets en houdt het effect werkend voor bezoekers met oudere versies van Safari en Chromium.
Waarom werkt mijn shape-outside niet?
Controleer drie dingen: het element moet zweven (float), het heeft een breedte en hoogte nodig, en als u een afbeelding als vorm gebruikt, moet die van dezelfde origin komen of met CORS-headers worden geleverd. Tekst loopt bovendien alleen om aan de kant die van de float af ligt.
Hoe laat ik de rand van een scrollende lijst vervagen?
Zet een masker op de scrollcontainer: mask-image: linear-gradient(to bottom, black 85%, transparent). De laatste regels vervagen als hint dat er meer content volgt, en het masker scrolt met het vak mee in plaats van met de content.
Welke waarde moet perspective hebben?
Het is de afstand van de kijker tot het vlak z = 0. Ongeveer 600px tot 1200px ziet er natuurlijk uit voor kaarten. Kleinere waarden zoals 300px overdrijven de diepte en vervormen de nabije randen sterk.
Hoe een masker bepaalt wat zichtbaar is
De browser legt de maskerafbeelding over het element en leest de transparantie pixel voor pixel. Waar het masker volledig dekkend is, wordt het element normaal getoond, waar het volledig transparant is, verdwijnt het element, en gedeeltelijke transparantie geeft gedeeltelijke zichtbaarheid.
Omdat gradiënten afbeeldingen zijn, is elke lineaire, radiale of conische gradiënt een kant-en-klaar masker. Meerdere maskers kunt u met komma's stapelen en combineren met mask-composite, bijvoorbeeld om een gat uit een fade te ponsen.
Tekst om vormen laten lopen
shape-outside accepteert basisvormen zoals circle(), ellipse(), polygon() en inset(), een box-sleutelwoord zoals margin-box, of een afbeelding waarvan de transparante pixels de vorm bepalen. Alleen inline content die naast de float loopt, volgt de curve.
De float neemt voor zijn eigen weergave nog steeds zijn rechthoekige vak in. Wilt u een foto rond laten lijken en de tekst er ook rond omheen duwen, voeg dan clip-path: circle(50%) of border-radius: 50% toe aan hetzelfde element.
Gradiëntmaskers: fades en spotlights
De onderkant van een blok laten vervagen
Volledig zichtbaar tot 50 procent van de hoogte, daarna een vloeiende fade naar niets.
Radiale spotlight
Een radiale gradiënt houdt een zachte cirkel zichtbaar en verbergt de rest van het patroon.
SVG- en data-URI-maskers
Een element uitsnijden als ster
De SVG staat inline als data-URI, dus er is geen extra bestand nodig. mask-size: contain houdt de hele ster binnen het vak.
Een iconbestand opnieuw kleuren met een masker
Het iconbestand levert alleen de vorm; background-color bepaalt de kleur, zodat één SVG werkt voor elk thema en elke hover-toestand.
shape-outside: tekst die om vormen loopt
Tekst om een cirkel laten lopen
De float duwt tekst weg met shape-outside en ziet er rond uit dankzij border-radius. shape-margin geeft wat ademruimte.
Tekst langs een diagonale veelhoek laten lopen
Dezelfde veelhoek stuurt zowel de zichtbare snede (clip-path) als de tekstloop (shape-outside).
clip-path tegenover mask
Dezelfde cirkel, harde en zachte rand
Links gebruikt clip-path: circle(). Rechts gebruikt een radiaal gradiëntmasker met een zachte rand, iets wat clip-path niet kan.
clip-path en mask vergeleken
Invoer
Basisvorm of SVG <clipPath>
Elke afbeelding: gradiënt, PNG, SVG
Randen
Hard
Zacht of hard
Gedeeltelijke transparantie
Nee
Ja
Animeerbaar
Vormen met hetzelfde aantal punten
mask-position en mask-size
Een kleine 3D-perspectiefscène
Gekantelde kaarten in een gedeelde 3D-ruimte
perspective op het podium en preserve-3d op de groep plaatsen de drie kaarten in één ruimte; translateZ duwt elke kaart naar een andere diepte.