CSS mask, shape-outside e prospettiva 3D, con demo dal vivo | We.Inc
Sfuma le immagini con gradienti mask-image, ritaglia forme con maschere SVG, fai scorrere il testo attorno a cerchi con shape-outside, confronta clip-path con mask e costruisci una scena 3D in prospettiva.
Una maschera CSS nasconde parti di un elemento usando la trasparenza di un'immagine: mask-image: linear-gradient(black, transparent) lo sfuma verso il basso. shape-outside fa scorrere il testo vicino attorno a un cerchio o a un poligono invece che a un rettangolo. perspective su un genitore dà ai figli ruotati una vera profondità. Crea una maschera nel playground e copiala.
Quale strumento per quale scopo
Obiettivo
Proprietà
Bordo
Sfumatura morbida o spotlight
mask-image con un gradiente
Morbido, qualsiasi opacità
Ritaglio a forma di icona o logo
mask-image con un SVG
Segue l'alpha dell'immagine
Taglio geometrico netto
Sempre netto
Testo che scorre attorno a una forma
shape-outside su un float
Influisce sul layout del testo
Profondità per le rotazioni 3D
perspective sul genitore
Non è affatto un taglio
Inizia dal playground delle maschere: scegli una sfumatura, uno spotlight o una forma ritagliata, spostala su un'immagine di esempio e copia il CSS con il prefisso -webkit- già incluso. Sotto trovi esempi modificabili per il testo che scorre attorno alle forme, clip-path a confronto con mask e una piccola scena 3D, tutti senza JavaScript.
Scegli un tipo di maschera: sfumatura lineare, spotlight radiale o una forma SVG.
Regola direzione, posizione, dimensione e morbidezza. L'anteprima si aggiorna subito.
Copia il CSS. Include sia mask-image sia -webkit-mask-image, così funziona anche con le versioni meno recenti di Safari e Chromium.
Scorri in basso per shape-outside, i confronti con clip-path e la scena in prospettiva, e modifica ciascuno direttamente sulla pagina.
In mask-image per impostazione predefinita conta solo il canale alpha. Il nero e qualsiasi altro colore opaco significano visibile, il trasparente significa nascosto.
Usa mask-size, mask-position e mask-repeat proprio come le proprietà background. Una maschera SVG si ripete a meno che tu non imposti mask-repeat: no-repeat.
shape-outside funziona solo sugli elementi float. Abbinalo allo stesso clip-path se vuoi che anche l'elemento stesso abbia quella forma.
Aggiungi shape-margin per tenere il testo che scorre un po' lontano dalla curva.
Domande frequenti
Qual è la differenza tra clip-path e mask?
clip-path disegna un contorno geometrico e tutto ciò che resta fuori viene tagliato con un bordo netto. mask-image usa un'immagine o un gradiente, quindi i bordi possono essere morbidi e parzialmente trasparenti. I clip path sono più semplici per poligoni e cerchi; le maschere sono la scelta giusta per sfumature, spotlight sfumati e ritagli a forma di logo.
Serve ancora -webkit-mask-image?
Le proprietà mask senza prefisso sono diventate Baseline alla fine del 2023. Aggiungere anche la versione -webkit- non costa nulla e mantiene l'effetto funzionante per chi visita il sito con versioni meno recenti di Safari e Chromium.
Perché il mio shape-outside non funziona?
Controlla tre cose: l'elemento deve essere float, deve avere larghezza e altezza, e se usi un'immagine come forma deve essere sulla stessa origine o servita con header CORS. Inoltre il testo scorre solo sul lato opposto al float.
Come sfumo il bordo di un elenco scorrevole?
Metti una maschera sul contenitore scorrevole: mask-image: linear-gradient(to bottom, black 85%, transparent). Le ultime righe sfumano per suggerire che ci sono altri contenuti, e la maschera scorre con il contenitore e non con il contenuto.
Che valore deve avere perspective?
È la distanza tra chi guarda e il piano z = 0. Tra circa 600px e 1200px l'effetto sembra naturale per le card. Valori più piccoli come 300px esagerano la profondità e deformano molto i bordi più vicini.
Come una maschera decide cosa mostrare
Il browser sovrappone l'immagine della maschera all'elemento e ne legge la trasparenza pixel per pixel. Dove la maschera è del tutto opaca l'elemento si vede normalmente, dove è del tutto trasparente l'elemento scompare, e una trasparenza parziale dà una visibilità parziale.
Dato che i gradienti sono immagini, qualsiasi gradiente lineare, radiale o conico è una maschera già pronta. Si possono sovrapporre più maschere separandole con virgole e combinarle con mask-composite, ad esempio per aprire un buco in una sfumatura.
Far scorrere il testo attorno alle forme
shape-outside accetta forme di base come circle(), ellipse(), polygon() e inset(), una parola chiave di box come margin-box, oppure un'immagine i cui pixel trasparenti definiscono la forma. Solo il contenuto inline che scorre accanto al float segue la curva.
Il float continua comunque a occupare il suo box rettangolare per il proprio disegno. Per far sembrare rotonda una foto oltre a spingere il testo in cerchio, aggiungi clip-path: circle(50%) o border-radius: 50% allo stesso elemento.
Maschere con gradienti: sfumature e spotlight
Sfumare la parte bassa di un blocco
Completamente visibile fino al 50 per cento dell'altezza, poi una sfumatura morbida fino a sparire.
Spotlight radiale
Un gradiente radiale lascia visibile un cerchio morbido e nasconde il resto del motivo.
Maschere SVG e data URI
Ritagliare un elemento a forma di stella
L'SVG è inserito come data URI, quindi non serve un file aggiuntivo. mask-size: contain mantiene l'intera stella nel riquadro.
Ricolorare un file di icona con una maschera
Il file dell'icona fornisce solo la forma; background-color imposta il colore, così un solo SVG serve per ogni tema e stato di hover.
shape-outside: testo che scorre attorno alle forme
Far scorrere il testo attorno a un cerchio
Il float spinge il testo con shape-outside e sembra rotondo grazie a border-radius. shape-margin aggiunge un po' di respiro.
Far scorrere il testo lungo un poligono diagonale
Lo stesso poligono determina sia il taglio visibile (clip-path) sia lo scorrimento del testo (shape-outside).
clip-path a confronto con mask
Stesso cerchio, bordo netto e bordo morbido
A sinistra si usa clip-path: circle(). A destra una maschera con gradiente radiale e bordo sfumato, cosa che clip-path non può fare.
clip-path e mask a confronto
Input
Forma di base o <clipPath> SVG
Qualsiasi immagine: gradiente, PNG, SVG
Bordi
Netti
Morbidi o netti
Trasparenza parziale
No
Sì
Animabile
Forme con lo stesso numero di punti
mask-position e mask-size
Una piccola scena 3D in prospettiva
Card inclinate in uno spazio 3D condiviso
perspective sul palco e preserve-3d sul gruppo mettono le tre card in un unico spazio; translateZ porta ciascuna a una profondità diversa.
Riferimento delle proprietà mask
Le proprietà estese di mask e cosa fanno
Proprietà
Predefinito
Scopo
L'immagine o il gradiente usato come maschera
Usare l'alpha o la luminanza della maschera
Dimensione della maschera, come background-size
Dove si trova la maschera
Ripetizione dell'immagine della maschera
Box da cui si misura la posizione
Area su cui agisce la maschera
Come si combinano le maschere sovrapposte: add, subtract, intersect, exclude
Cerchio
Stella
Cuore
Macchia
Playground delle maschere
Tipo di maschera
Sfumatura lineare
Spotlight
Forma SVG
Elemento mascherato. La scacchiera mostra dove è nascosto.