10 fantastici esempi di maschere CSS, SVG e Canvas in azione

Puoi fare cose incredibili con le maschere SVG. Questa tecnica è in circolazione da anni, ma solo di recente si è fatta strada nello sviluppo web tradizionale.

Ho setacciato il Web per trovare le seguenti demo di maschere di ritaglio personalizzate e maschere SVG/tela. Questi esempi mostrano fino a che punto puoi spingere le maschere sul Web e, in definitiva, cosa potrebbero offrire agli sviluppatori in futuro.

1. Mascheratura del testo

Per un chiaro esempio di mascheramento del testo in azione, controlla la penna sopra. Utilizza il testo della pagina reale in HTML in modo da poter modificare facilmente questo testo per leggere quello che vuoi.

Tutta la magia avviene in CSS con proprietà come background-clip. Puoi applicarli praticamente a qualsiasi testo su qualsiasi pagina, ma non verranno visualizzati a meno che tu non abbia uno sfondo chiaro.

Anche l'effetto di zoom viene creato esclusivamente in CSS, il che rende questo frammento di codice ancora più impressionante.

2. Poligoni della maschera di ritaglio

Nota che questa penna utilizza JavaScript per le animazioni complesse ma tutto il mascheramento viene gestito tramite un elemento canvas. È un'idea sorprendentemente complessa, quindi cercare di seguire il codice sarà difficile.

Ma l'effetto di mascheratura del poligono sopra è uno dei design più unici che ho visto. Prende forme progettate in CSS e utilizza JavaScript per creare queste forme come elementi di pagina per mascherare un'immagine di sfondo.

Questo esegue un'animazione coerente e viene eseguito su un elemento Canvas basato su JS che si comporta come un contenitore per il contenuto SVG/XML. Roba piuttosto pazzesca ma è divertente vedere cosa possono fare le maschere!

3. Mascheratura dell'immagine

Questo esempio taglia e asciuga mostra come appare una maschera immagine CSS. Puoi vedere il prima e il dopo della maschera dell'immagine sopra creata da Vincent De Oliveira.

Nota che l'effettiva maschera con texture nera è solo un file PNG. Ma è sovrapposto dinamicamente a un'immagine in CSS per creare un effetto fotografico mascherato.

Puoi farlo con qualsiasi trama desideri purché sia ​​esportata con trasparenza. Ci sono molti dettagli sulla proprietà mask e sebbene supporti i file .svg, potresti trovare più facile iniziare con i PNG.

4. Pulsante al passaggio del mouse

Hai mai pensato di personalizzare gli effetti al passaggio del pulsante? Bene, questo frammento di codice dimostra che puoi farlo con un po' di creatività e un po' di mascheramento CSS.

Anche in questo caso il codice viene eseguito tutto su una maschera di immagine predefinita e ogni pulsante ha il proprio effetto maschera. La parte più interessante è l'animazione al passaggio del mouse che non mostra solo la maschera, ma piuttosto la anima in vista.

Questo è certamente un codice sperimentale, ma sembra fenomenale nei browser WebKit e si spera che questa tecnica possa diventare un punto fermo in pochi anni.

5. Maschera di testo SVG

Ecco un esempio leggermente diverso di effetto maschera di testo creato dallo sviluppatore Marco Barria.

Invece di definire immagini SVG personalizzate, il codice utilizza effettivamente un elemento SVG. È ancora basato su un semplice contenuto di testo HTML ma funziona con un filtro SVG dinamico.

Questo è un po' più tecnico ma garantisce anche molto più controllo allo sviluppatore. Invece di scherzare con Illustrator per creare file SVG, puoi codificare SVG in linea direttamente nel tuo documento HTML.

6. Maschera di testo su tela

Con questo esempio su tela di Calvin Davis, noterai che utilizza HTML grezzo per il contenuto, ma il testo stesso non è selezionabile.

Viene invece visualizzato nella pagina utilizzando un elemento Canvas che può astrarre il testo al di fuori del DOM. Questo lo fa comportare più come un'immagine, quindi vedrai questo effetto in cui il testo si maschera sullo sfondo, ma non sembra testo.

Ad alcuni designer potrebbe non piacere per mancanza di usabilità, quindi se si desidera un testo selezionabile, non mi preoccuperei di questa configurazione.

Ma è un ottimo esempio di quanto puoi spingere la tipografia con le forme della tela.

7. Gradiente animato

Un altro effetto di testo davvero interessante è questo gradiente animato creato dallo sviluppatore Svante Richter.

Utilizza tutto il codice SVG nella pagina HTML, quindi crea maschere in modo dinamico. Questa configurazione SVG funziona occupando l'intera pagina e assegnandole uno sfondo sfumato, quindi mascherando questo sfondo solo attraverso il testo.

Poiché il gradiente può essere animato tramite CSS, sembrerà che il testo sia l'unica parte animata. Effetto piuttosto interessante ed è qualcosa che potresti considerare di aggiungere a un sito Web sperimentale o a una pagina di destinazione.

8. Maschera di ritaglio animata

Questa animazione di maschera di ritaglio astratta utilizza bolle JS generate casualmente per mascherare un'immagine. Utilizza un elemento canvas insieme a maschere di ritaglio animate messe insieme per formare un blob SVG coeso.

Potrebbe non sembrare molto, ma lo sviluppatore Neil McCallion ha scritto del codice piuttosto carino e il risultato finale è decisamente strano.

Il mascheramento avviene principalmente nell'elemento canvas, ma è controllato tramite JavaScript. È un modo divertente per fondere due immagini con un'animazione SVG astratta.

Ancora una volta questo potrebbe non servire a molti scopi su un sito Web del mondo reale, ma è un fantastico esperimento per armeggiare con le maschere.

9. Maschera SVG BG

Il rovescio della medaglia ecco un effetto di mascheramento che potresti eseguire su quasi tutti i siti Web.

Questo utilizza una sfumatura di sfondo insieme a un'intestazione dell'eroe per creare un effetto di mascheratura complesso che si fonde ancora perfettamente.

Lo sviluppatore Ryna Rudenko ha spinto la busta con questa penna utilizzando un elemento di tela grezza con la maggior parte degli effetti di mascheratura a strati nell'HTML.

Non solo questa maschera è pratica e utilizzabile in un'intestazione di grandi dimensioni, ma è anche molto ben realizzata e funziona esclusivamente su HTML5 e CSS3. Un ottimo esempio di moderni standard web messi a frutto.

10. Maschere CSS e SVG

Questa galleria completa di maschere SVG porta davvero a casa quanto puoi fare con il puro CSS.

È una demo che mostra un sacco di diverse tecniche di mascheratura che utilizzano tutte la stessa foto, formati diversi. Inoltre, ogni esempio include codici di esempio direttamente sulla pagina che puoi testare personalmente, sebbene sia altrettanto facile copiare il codice dall'editor di CodePen.

Ma questa piccola penna si comporta più come un'introduzione guidata ai diversi effetti di mascheramento delle immagini che puoi eseguire. Ottimo punto di partenza se vuoi immergerti in SVG e maschere con semplici demo.