Come utilizzare le tecniche di ritaglio e mascheramento CSS e SVG

Gli SVG sono ottimi per lavorare sul Web e il ritaglio e il mascheramento consentono alcuni modi interessanti per mostrare o nascondere parti della tua grafica web. L'utilizzo di queste tecniche consente inoltre una maggiore flessibilità con i progetti, poiché non è necessario apportare modifiche manualmente e creare nuove immagini: tutto avviene con il codice. Utilizzando una combinazione di tecniche di ritaglio e mascheramento CSS, avrai molte opzioni per la grafica del tuo sito web.

Per aiutare a chiarire le cose, il mascheramento e il ritaglio sono due modi diversi per manipolare le immagini con CSS. Iniziamo con il ritaglio.

Nozioni di base sul ritaglio

Se hai mai usato Photoshop, probabilmente hai già familiarità con le maschere di ritaglio. È un tipo di approccio simile. Il ritaglio comporta la posa di una forma vettoriale, come un cerchio o un triangolo, sopra un'immagine o un elemento. Qualsiasi parte dell'immagine dietro la forma sarà visibile, mentre tutto ciò che si trova al di fuori dei confini della forma sarà nascosto.

Ad esempio, se una maschera di ritaglio del triangolo si trova sopra l'immagine di una foresta, vedrai l'immagine della foresta all'interno della forma del triangolo. Il limite della forma è chiamato percorso di ritaglio, da non confondere con la proprietà di clip deprezzata. Il percorso di clip viene creato utilizzando la proprietà clip-path .

Nota: non provarlo sul tuo sito live

Ricorda: non dovresti mai modificare il codice direttamente sul tuo sito, per assicurarti che nulla si rompa. La nostra app di sviluppo locale gratuita, Local, ti aiuterà a configurare un ambiente di test in cui puoi seguire in sicurezza questo tutorial.

Ritaglio in azione

Le clip sono sempre percorsi vettoriali. Può essere fonte di confusione da capire, ma qualsiasi cosa al di fuori del percorso sarà nascosta, mentre qualsiasi cosa all'interno del percorso sarà visibile. Per ottenere una migliore comprensione e per testarlo tu stesso, vedere l'esempio su CodePen.

Ecco uno snippet della struttura HTML dall'esempio:

<svg class="clip-svg">
	<defs>
		<clipPath id="polygon-clip-triangle-equilateral" clipPathUnits="objectBoundingBox">
			<polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" />
		</clipPath>
	</defs>
</svg>

Questo è il CSS per fare in modo che il ritaglio avvenga:

.polygon-clip-triangle-equilateral {
	-webkit-clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	clip-path: polygon(0% 87%, 50% 0%, 50% 0%, 100% 87%);
	-webkit-clip-path: url("#polygon-clip-triangle-equilateral");
	clip-path: url("#polygon-clip-triangle-equilateral");
}

Puoi vedere dove viene fatto riferimento clipPath nell'HTML e come utilizza l'URL clip-path per eseguire il ritaglio.

Strumento scattante

Clippy è un ottimo strumento per generare percorsi di clip CSS. Ci sono un'ampia varietà di forme e dimensioni iniziali che possono essere personalizzate.

Nozioni di base sulla mascheratura

La mascheratura viene eseguita utilizzando un'immagine PNG, un gradiente CSS o un elemento SVG per nascondere parte di un'immagine o un altro elemento sulla pagina. Ci concentreremo sulla grafica SVG, ma tieni presente che questo può essere fatto con altri tipi o stili di immagine.

La proprietà mask e l'elemento mask

Solo un aggiornamento per aiutare a visualizzare, è importante tenere presente che l'elemento mascherato è l'immagine "originale" (prima dell'applicazione della maschera). Potresti non voler vedere l'intera immagine, quindi nascondere parti di essa viene fatto con la proprietà della mask CSS. La mask è la scorciatoia CSS per un gruppo di singole proprietà, di cui ci analizzeremo tra un secondo. L'elemento SVG <mask> viene utilizzato all'interno di un elemento grafico SVG per aggiungere effetti di mascheratura. In questo esempio, la maschera è un cerchio e viene applicata anche una sfumatura.

Utilizzo dell'elemento maschera SVG su un elemento grafico SVG

Per avere un'idea della <mask> SVG, maschereremo con una grafica SVG.

Potrebbe essere un po' complesso a prima vista, ma funziona tutto insieme per mascherare l'immagine sottostante. Abbiamo un'immagine reale come sfondo, quindi dove entra in gioco l'SVG? A differenza degli esempi di ritaglio, questa immagine di sfondo è tecnicamente all'interno di un elemento SVG. Useremo i CSS per applicare questa maschera all'immagine. Le proprietà proverranno dall'elemento maschera SVG e gli daremo l'id di masked-element nel nostro CSS.

Per vederlo in azione, dai un'occhiata a questo esempio di Codepen. Ecco il codice di lavoro per la grafica SVG mascherata:

<svg class="masked-element" width="300" height="300" viewBox="0 0 300 300">
	<image xlink:href="image link" width="300px" height="300px" />
</svg>

Con questo CSS, stiamo specificando dove trovare la maschera. Cercherà l'ID di #mask-this:

/* Here’s the CSS for masking */
.masked-element image {
  mask: url(#mask1);
}

Noti un gradiente nella forma del cerchio? È stata applicata una sfumatura, oltre a impostare la forma del cerchio per la maschera.

<svg class="svg-mask">
 	<defs>
 		<mask id="mask1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <linearGradient id="grad" gradientUnits="objectBoundingBox" x2="0" y2="1">
      <stop stop-color="white" offset="0"/>
      <stop stop-color="green" stop-opacity="0" offset="1"/>
    </linearGradient>
    <circle cx="0.50" cy="0.50" r="0.50" id="circle" fill="url(#grad)"/>
  	</mask>
 	</defs>
</svg>

Mascheratura del testo SVG

La mascheratura del testo può fare alcune cose piuttosto interessanti, come mostrare un'immagine attraverso un blocco di testo. La buona notizia è che un elemento di testo può essere utilizzato all'interno di una maschera SVG. Con l'aumento del supporto del browser in futuro, questo potrebbe essere un modo davvero interessante per combinare immagini e tipografia.

Ecco una spiegazione di base di ciò che sta accadendo. C'è un elemento di testo SVG all'interno della maschera SVG. Abbiamo specificato il valore RGB per il bianco, che crea l'area ovale attorno al testo mascherato. Qualsiasi cosa dietro l'area ovale si vede attraverso il testo, dando una sensazione di ritaglio.

<div class="text-wrap">
    <svg class="text-demo" viewBox="0 0 600 400" width="600" height="400">
    <defs>
      <mask id="myMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="50" y="200" id="myText">My Text</text>
        <text x="125" y="293" id="mySubtext">SVG</text>
      </mask>
    </defs>
    <ellipse class="masked" cx="300" cy="200" rx="300" ry="150" fill="rgba(255, 255, 255, 0.8)" />
  </svg>
  </div>

/* Here’s the CSS for text element */
#myText {
font-size: 125px;
font-style: bold;
fill: #000;
}

/* Here’s the CSS for masking */
.masked {
mask: url("#myMask");
}

Per comprendere appieno, è utile giocare e sperimentare con il codice. Prova a cambiare i colori, cambiare il testo e regolare le dimensioni in questo Codepen.

La proprietà mask-image

È possibile dichiarare un'immagine e impostare l' mask-image un valore URL. L' mask-image può essere un PNG, SVG o un riferimento a un elemento mask SVG, come ho dimostrato nell'esempio precedente.

Poiché la mascheratura viene utilizzata per nascondere parzialmente o completamente parti di un oggetto o elemento, per prima cosa vorrai un collegamento immagine a un file per l'elemento che verrà mascherato. Ecco come appare quell'immagine. È colorato per rendere molto evidente quale parte mostra e nasconde la maschera.

<img class="mask-img example-mask" src="https://linktoimage.com/img/image-example.jpg" alt="Masked image">

Finora c'è stato molto codice SVG, ma questo esempio è leggermente diverso poiché ci sarà un'immagine raster mascherata con un SVG.

.example-mask {
  mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/browser-icon-01.svg);
  mask-mode: alpha;
  webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  webkit-mask-repeat: no-repeat;
  mask-size: 200px;
  webkit-mask-size: 200px;
  mask-position: center;
  webkit-mask-position: center;
}

La proprietà mask-image è dove verrà dichiarata la forma della maschera. In questo caso, l'immagine della maschera è un elemento grafico SVG. Avere il collegamento URL incluso è il modo in cui viene creata la maschera.

Eccolo su Codepen.

Combinazione di più immagini di maschera

Proprio quando pensavi che la mascheratura non potesse essere migliore, c'è la possibilità di impostare più di un livello immagine maschera. Tutto quello che devi fare è aggiungere due valori URL (o più se ti senti ambizioso) separati da una virgola.

Per espandere la maschera semplice dall'alto, ci sarà una freccia aggiunta alla grafica originale. Ecco come si combinano due maschere.

.combined-mask {
   mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
  webkit-mask-image: url(https://linktoimage.com/arrow-01.svg), url(https://linktoimage.com/browser-icon-01.svg);
}

Tutto quello che devi fare è sommare i due valori (con una virgola) e ora ci sono due maschere combinate, rendendo infinite le possibilità di mascheramento.

Eccolo su Codepen.

Crea un semplice gradiente con mask-image

Non tutte le maschere devono avere una forma complessa. A volte non è un'immagine particolare che è la maschera, ma piuttosto una semplice maschera come un gradiente. Se stai cercando un modo rapido per raggiungere questo obiettivo, la proprietà mask-image è un'opzione, che è abbastanza facile da implementare.

In questo esempio, è stata applicata una classe a un set di sfumature come proprietà mask-image . Con questa semplice dichiarazione, è stato facile creare una maschera sfumatura sull'immagine.

mask-image: linear-gradient(black, white, transparent);
-webkit-mask-image: linear-gradient(black, white, transparent);

Vedi questo su Codepen.

La proprietà di ripetizione della maschera

Dopo aver creato una maschera, è abbastanza facile crearne di più. Questo è davvero utile se stai cercando di creare un modello personalizzato. La proprietà mask-repeat consente la ripetizione della maschera. Se hai mai realizzato uno sfondo piastrellato prima, questo è simile a quello.

Ci sono alcune cose importanti da tenere a mente, come il dimensionamento e il tipo di ripetizione della maschera che deve essere dichiarato per creare il modello perfetto.

La mask-size è abbastanza facile da visualizzare, specialmente con il valore pixel impostato qui.

mask-size: 200px;
webkit-mask-size: 200px;

Ci sono alcune altre opzioni di ripetizione della maschera se stai cercando un effetto diverso per il pattern:

• repeat-x si ripete lungo la coordinata x.
• Repeat-y si ripete lungo la coordinata y.
• space si ripete e si estende nell'area disponibile.
• round si ripete un numero di volte nell'area disponibile (il ridimensionamento lo aiuterà a riempire lo spazio se necessario)

Supporto browser

Prima di impegnarsi in questo nuovo modo di lavorare con la grafica, è importante notare che il supporto del browser non è coerente con il ritaglio e il mascheramento. Il ritaglio è più supportato del mascheramento, ma Internet Explorer non supporta completamente il ritaglio. Anche l'attuale supporto del browser per le maschere CSS è piuttosto limitato, quindi si suggerisce di usarlo come miglioramento su alcuni elementi decorativi. In questo modo, se non è supportato dal browser dell'utente, non influisce sull'esperienza di visualizzazione dei contenuti.

Per testare le cose e vedere se le tue maschere e i tuoi ritagli sono supportati, ti consiglio di creare un JSFiddle o Codepen e quindi provarlo in browser diversi. Il supporto del browser è aumentato negli ultimi anni e alla fine arriverà a un punto in cui sarà completamente supportato. Non lasciarti abbattere dai limiti: è sempre bello essere all'avanguardia e una volta che il supporto sarà più mainstream, saprai esattamente come rivoluzionare la tua grafica. In caso di dubbio, assicurati di fare riferimento al affidabile Can I Use.

Dopo aver sperimentato questi esempi, questo dovrebbe fornire una buona introduzione al mascheramento e al ritaglio. Sebbene il supporto del browser sia limitato in questo momento, probabilmente diventerà una pratica tradizionale in futuro. È sempre divertente pensare a come queste tecniche possono essere utilizzate per creare immagini interessanti. Il futuro della grafica web ci renderà meno dipendenti dagli editor di immagini e consentirà metodi più efficaci per creare e modificare le immagini direttamente nel browser.

Avanti: Progetta siti ancora più velocemente!

Capisci l'importanza di un processo di progettazione web semplificato. Tutto ciò che puoi fare per progettare un sito Web più velocemente significa più soldi in tasca. Ecco perché Flywheel ha progettato la nostra piattaforma di hosting per farti risparmiare tempo e farti lavorare al meglio! Con questi suggerimenti e strumenti di web design, puoi completare più progetti e dedicare più tempo alla crescita della tua attività.

In questa guida, tratteremo suggerimenti su come lavorare più velocemente e velocizzare il flusso di lavoro di WordPress. Dalla configurazione iniziale del sito alla pubblicazione in diretta, scopri come puoi ridurre le ore di lavoro dal tuo lavoro quotidiano! Scaricalo oggi.

Questo articolo è stato originariamente pubblicato il 3 agosto 2016. È stato aggiornato l'ultima volta il 6 novembre 2018.