Informazioni sulle maschere

Una maschera nasconde una parte di un elemento in base a un livello di forma o trasparenza. Gli elementi host possono essere immagini, div, contenitori di testo e componenti.

Ogni elemento può avere una sola maschera, ma puoi sovrapporre le maschere aggregando l'elemento host in un div e applicando una maschera al div contenitore. Puoi anche nidificare un altro elemento all'interno dell'elemento host e aggiungere una maschera all'elemento secondario.

Tipi di maschere

Maschera dell'immagine
Maschera della sfumatura
Maschera del percorso di ritaglio

Compatibilità del browser

Le versioni di Microsoft Edge 40 e precedenti supportano solo le maschere del percorso di ritaglio rettangolari. Gli altri tipi e forme di maschere verranno ignorati.

Maschera dell'immagine

Le maschere dell'immagine utilizzano le aree trasparenti di un'immagine per nascondere l'elemento host.

Per aggiungere una maschera dell'immagine, procedi nel seguente modo:

Fai clic con il pulsante destro del mouse sull'elemento da mascherare.
Seleziona Aggiungi maschera dell'immagine… dal menu di scelta rapida.
Importa o seleziona l'immagine che vuoi utilizzare come maschera.

Puoi regolare le dimensioni e la posizione della maschera utilizzando lo strumento Selezione o il riquadro Proprietà.

Nota: le maschere dell'immagine non possono utilizzare il posizionamento basato sulla percentuale.

Maschera della sfumatura

Le maschere della sfumatura nascondono l'elemento host in base a un gradiente di livelli di trasparenza.

Google Web Designer supporta entrambi i tipi di sfumatura per le maschere:

Sfumatura lineare
Sfumatura radiale

Per aggiungere una maschera della sfumatura, procedi nel seguente modo:

Fai clic con il pulsante destro del mouse sull'elemento da mascherare.
Seleziona Aggiungi maschera della sfumatura dal menu di scelta rapida.
Fai clic sul campione della sfumatura nel riquadro delle proprietà per personalizzare il tipo di sfumatura, i colori, l'opacità e l'angolo (solo per le sfumature lineari).

Per impostazione predefinita, la maschera della sfumatura ha le stesse dimensioni dell'elemento host, ma puoi regolare le proprietà di posizione e dimensione della maschera utilizzando lo strumento Selezione o il riquadro Proprietà.

Nota: le maschere della sfumatura non possono utilizzare il posizionamento basato sulla percentuale.

Maschere del percorso di ritaglio

Le maschere del percorso di ritaglio utilizzano una forma geometrica per definire quale parte dell'elemento host mostrare.

Puoi selezionare il tipo di forma della maschera facendo clic e tenendo premuto lo strumento della maschera del percorso di ritaglio nella barra degli strumenti per visualizzare un menu popup:

Maschera rettangolare (impostazione predefinita)
Maschera ovale
Maschera poligonale

Compatibilità del browser

Internet Explorer e Microsoft Edge supportano solo le maschere del percorso di ritaglio di forma rettangolare con la posizione e le dimensioni specificate in pixel. Le maschere basate sulla percentuale e altre forme di maschera, inclusi gli angoli arrotondati per le maschere rettangolari, verranno ignorate.
Firefox e Safari potrebbero non eseguire il rendering corretto delle maschere rettangolari con angoli arrotondati a causa degli ampi valori del raggio d'angolo (rispetto alle dimensioni della maschera).
Safari non supporta le maschere del percorso di ritaglio su forme tracciate utilizzando lo strumento Rettangolo. Come soluzione alternativa, utilizza un elemento div anziché una forma rettangolare e posiziona la maschera sull'elemento div.
Chrome e Opera: il rendering delle maschere del percorso di ritaglio non è corretto quando l'elemento host contiene un elemento secondario trasformato in 3D.
Il rendering delle maschere rettangolari con angoli arrotondati impostati utilizzando un raggio basato sulla percentuale potrebbe essere effettuato in modo leggermente diverso in base al browser.

Per aggiungere una maschera del percorso di ritaglio:

Seleziona l'elemento che vuoi mascherare.
Seleziona lo strumento maschera per la forma desiderata.
Imposta opzioni aggiuntive per la forma della maschera.
- Solo maschere rettangolari: per gli angoli arrotondati, imposta il raggio d'angolo nella barra delle opzioni dello strumento in alto. Utilizza il pulsante Mantieni uguale per utilizzare lo stesso raggio per tutti e quattro gli angoli.
- Solo maschere poligonali: seleziona la forma desiderata dalla barra di opzioni dello strumento in alto. Usa l'opzione A mano libera per disegnare la tua forma. Se selezioni l'opzione Poligono regolare, inserisci il numero di lati del poligono desiderato.
Traccia la maschera sopra l'elemento host.
- Tieni premuto il tasto Maiusc mentre tracci per limitare lo spostamento della maschera in modo che abbia la stessa larghezza e altezza. Il tasto Maiusc non influisce sulle maschere tracciate a mano libera o su alcune forme preimpostate che verranno sempre tracciate con lati della stessa lunghezza: triangolo, rombo, pentagono, esagono e stella.
- Tieni premuto il tasto Alt per utilizzare la posizione di tracciamento iniziale come punto centrale della maschera.

Nota: dopo aver tracciato una maschera poligonale, puoi modificarne la forma della maschera trascinando i vertici, ma non puoi modificare il numero di lati.

Forme delle maschere poligonali

	A mano libera (consente di tracciare una forma personalizzata)
	Poligono regolare (consente di impostare il numero di lati; i lati vengono tracciati della stessa lunghezza)
	Triangolo
	Rettangolo
	Cornice
	Rombo
	Pentagono
	Esagono
	Freccia di espansione rivolta a destra
	Freccia di espansione rivolta a sinistra
	Croce
	Stella
	Freccia destra
	Freccia sinistra

Selezionare le maschere

Sullo stage: seleziona l'elemento host, quindi fai clic sulla maschera. La maschera verrà evidenziata in verde.
Nella sequenza temporale della modalità avanzata: seleziona il livello maschera sotto il livello dell'elemento host. I livelli maschera sono indicati dal simbolo davanti al nome livello.

Puoi nascondere e bloccare i livelli maschera nella sequenza temporale della modalità avanzata per lavorare più facilmente con gli elementi host.

Selezionare più maschere

Tieni premuto Ctrl e fai clic per selezionare più livelli maschera nella sequenza temporale della modalità avanzata se vuoi eliminarli tutti contemporaneamente. Non puoi invece modificare più di una maschera alla volta.

Puoi eliminare una selezione mista di elementi e maschere solo se gli elementi host delle maschere sono inclusi nella selezione.

Modificare le maschere

Puoi modificare le maschere direttamente sullo stage o utilizzando il riquadro Proprietà. Le proprietà CSS per le maschere non sono disponibili nel riquadro CSS.

Le maschere possono essere modificate nei seguenti modi:

Tagliare, copiare e incollare una maschera
Spostare una maschera
Ridimensionare una maschera
Ruotare una maschera
Modificare l'origine di una maschera dell'immagine
Modificare la sfumatura di una maschera della sfumatura
Modificare la curvatura degli angoli di una maschera rettangolare
Modificare la forma di una maschera poligonale

Tagliare, copiare e incollare una maschera

Puoi tagliare o copiare e incollare una maschera su un altro elemento, o persino su un altro documento, utilizzando uno dei seguenti metodi:

Sullo stage o nella sequenza temporale della modalità avanzata:
- Fai clic con il pulsante destro del mouse sulla maschera e seleziona Taglia o Copia.
- Fai clic con il pulsante destro del mouse sull'elemento su cui vuoi applicare la maschera e seleziona Incolla o Sostituisci maschera.
Nella modalità avanzata della sequenza temporale:
- Trascina il livello maschera su un livello elemento per passare la maschera a un altro elemento host (non disponibile per la sostituzione di una maschera).
- Tieni premuto il tasto Alt mentre trascini un livello maschera per copiare la maschera su un altro elemento (non disponibile per la sostituzione di una maschera).
Scorciatoie da tastiera:
- Taglia: Ctrl+X (Windows) o ⌘+X (Mac)
- Copia: Ctrl+C (Windows) o ⌘+C (Mac)
- Incolla: Ctrl+V (Windows) o ⌘+V (Mac)
Comandi di menu:
- Modifica > Taglia
- Modifica > Copia
- Modifica > Incolla o Sostituisci maschera

Verrà incollata anche qualsiasi animazione della maschera.

Limitazioni relative alle azioni copia e incolla delle maschere

Puoi selezionare una singola maschera da tagliare o copiare e un singolo elemento su cui incollare la maschera.
Se incolli una maschera a un elemento che ne ha già una, la maschera esistente verrà sostituita.
Le maschere non possono essere tagliate, copiate o incollate nelle regole multimediali.

Spostare una maschera

Seleziona la maschera che vuoi spostare, quindi utilizza uno dei seguenti metodi:

Modifica le proprietà di posizione superiore e sinistra nel riquadro Proprietà. Questi valori si riferiscono all'angolo in alto a sinistra dell'elemento host.
Utilizza i tasti Freccia per spostare la maschera di un pixel alla volta. Per spostare la maschera di 10 pixel, tieni premuto il tasto Maiusc mentre premi un tasto Freccia.
Utilizza lo strumento Selezione per trascinare la maschera con il mouse. Tieni premuto il tasto Maiusc durante il trascinamento per spostare la maschera lungo un solo asse.

Le maschere possono essere posizionate fuori dai confini dell'elemento host.

Nota: le maschere dell'immagine e le maschere della sfumatura non possono utilizzare il posizionamento basato sulla percentuale.

Ridimensionare una maschera

Seleziona la maschera da ridimensionare, quindi:

Modifica le proprietà di larghezza e altezza nel riquadro Proprietà.
Utilizza lo strumento Selezione con l'opzione Comando Trasforma attivata nella barra delle opzioni dello strumento in alto.
- Tieni premuto il tasto Maiusc durante il trascinamento per mantenere le proporzioni.
- Tieni premuto il tasto Alt (Windows) o Opzione (Mac) durante il trascinamento per ridimensionare la maschera senza modificarne il punto centrale.

Ruotare una maschera

Le maschere non possono essere ruotate direttamente, ma puoi ottenere lo stesso effetto seguendo questi passaggi prima di aggiungere la maschera:

Aggrega l'elemento da mascherare.
Aggiungi la maschera al contenitore div.
Ruota il contenitore div. Anche la maschera ruoterà.
Ruota l'elemento originale nella direzione opposta.

Modificare l'origine di una maschera dell'immagine

Per sostituire l'immagine utilizzata per una maschera dell'immagine, procedi nel seguente modo:

Seleziona la maschera.
Nel riquadro Proprietà fai clic sul pulsante Imposta maschera dell'immagine nel campo Origine.
Seleziona un'immagine dalla raccolta o fai clic sul pulsante Importa asset per utilizzare un'altra immagine.
Fai clic su OK.

Modificare la sfumatura di una maschera della sfumatura

Puoi personalizzare la sfumatura utilizzata per una maschera della sfumatura.

Seleziona la maschera.
Nel riquadro Proprietà fai clic sul campione della sfumatura.
Modifica la sfumatura:
- Tipo di sfumatura: seleziona il pulsante Sfumatura lineare o Sfumatura radiale .
- Distanza di transizione: trascina un indicatore di trasparenza lungo la parte superiore della barra delle sfumature per modificare la distanza di transizione.
- Trasparenza: gli indicatori di trasparenza impostano il livello di opacità in un punto specifico lungo la sfumatura. 100% indica che l'elemento host è completamente visibile e 0% indica che invece è completamente nascosto. Fai clic su un indicatore di trasparenza per modificarne il livello di opacità nel campo della percentuale a destra.
- Ulteriori indicatori di trasparenza: per aggiungere più indicatori di trasparenza, fai clic sulla barra delle sfumature. Per rimuovere un indicatore di trasparenza, trascinalo verso il basso.
- Angolo: per le sfumature lineari, puoi regolare l'angolo.
- Predefinita: fai clic sul pulsante Sfumatura predefinita per ripristinare le impostazioni predefinite della sfumatura (una sfumatura lineare da 0% a 100% a 90°).

Modificare la curvatura degli angoli di una maschera rettangolare

Puoi modificare gli angoli di una maschera rettangolare in modo che siano squadrati o arrotondati e, per questi ultimi, rettificare il raggio di curvatura.

Seleziona la maschera.
Nel riquadro Proprietà, imposta il raggio d'angolo in pixel o in percentuale. Se imposti il raggio su 0, gli angoli saranno squadrati.
Quando il pulsante Mantieni uguale è attivo, lo stesso valore viene applicato a tutti e quattro gli angoli. Disattiva il pulsante per configurare ogni angolo separatamente.

Modificare la forma di una maschera poligonale

Puoi regolare la forma di una maschera poligonale sullo stage:

Seleziona la maschera.
Seleziona lo strumento Maschera poligonale dalla barra degli strumenti. A ogni vertice appare un punto di manipolazione.
Trascina ciascun vertice nel punto desiderato.
- Tieni premuto il tasto Maiusc durante il trascinamento per spostare il vertice lungo un solo asse (verticale o orizzontale).

Nota: non puoi modificare il numero di lati di una maschera poligonale esistente.

Animare le maschere

Puoi animare le dimensioni e la posizione di una maschera. Puoi anche utilizzare gli intervalli di visibilità per controllare quando una maschera viene visualizzata o scompare. L'animazione della maschera è indipendente da qualsiasi animazione dell'elemento host.

Per le maschere rettangolari, puoi animare gli angoli arrotondati. Per le maschere del percorso di ritaglio poligonale, puoi anche animare la forma della maschera (ma non il numero di lati) riposizionando i vertici in un fotogramma chiave.

Le maschere non possono essere modificate su più fotogrammi. Seleziona un fotogramma chiave alla volta per modificare l'animazione della maschera.

Nota: quando si animano le maschere dell'immagine a velocità inferiori, è possibile notare un tremolio in quanto i valori dei pixel frazionari tra i fotogrammi chiave vengono arrotondati.

Compatibilità del browser

Se il documento contiene elementi <canvas>, ad esempio per il componente Galleria con transizione, Effetto immagine o Effetti delle particelle, l'animazione della maschera del percorso di ritaglio non verrà riprodotta in Safari.

Maschere nei layout adattabili

Le regole multimediali consentono di sostituire le proprietà e l'animazione della maschera per intervalli di dimensioni di viewport specifici. Per le maschere dell'immagine, puoi anche sostituire l'origine in modo da utilizzare un'immagine diversa. Per le maschere della sfumatura, puoi modificare la sfumatura.

Nota: la rimozione della sostituzione di una proprietà di posizione o dimensione reimposta automaticamente entrambe le proprietà di posizione (in alto e a sinistra) o entrambe le proprietà di dimensione (larghezza e altezza). Per le maschere del percorso di ritaglio, vengono ripristinate tutte le proprietà di posizione e dimensione.

È stato utile?

Come possiamo migliorare l'articolo?