Mascheramento CSS - mask

Ciao a tutti, futuri maestri di CSS! Oggi esploreremo il mondo affascinante del mascheramento CSS. Immagina di essere un mago e di voler far scomparire o rivelare parti del tuo sito web in modi interessanti. Ecco esattamente ciò che il mascheramento CSS ci permette di fare! Allora, mettiamoci il cappello da mago e impariamo alcuni trucchi di CSS!

Cos'è il mascheramento CSS?

Il mascheramento CSS è come usare un stencil invisibile sui tuoi elementi web. Ti permette di nascondere o mostrare parzialmente parti di un elemento in base a un'altra immagine o forma. È una tecnica potente che può creare effetti davvero fantastici!

Valori possibili

Prima di iniziare a codificare, esaminiamo i diversi valori che possiamo usare con la proprietà mask. Pensa a questi come a diversi tipi di bacchette magiche, ciascuna creando un effetto unico:

Valore	Descrizione
none	Nessun mascheramento applicato
<mask-reference>	Si riferisce a un'immagine di maschera
<masking-mode>	Determina come viene applicata la maschera
<position>	Imposta la posizione della maschera
<bg-size>	Definisce la dimensione della maschera
<repeat-style>	Specifica come la maschera si ripete
<geometry-box>	Definisce la casella della maschera
no-clip	Impedisce il ritaglio della maschera

Non preoccuparti se questi sembrano confusionari ora. Esploreremo ciascuno con esempi!

Applica a

La proprietà mask può essere applicata a qualsiasi elemento. È come avere una bacchetta magica che funziona su tutto!

Sintassi

La sintassi di base per la proprietà mask è questa:

.element {
mask: <value>;
}

Ora, esaminiamo ciascun valore nel dettaglio.

Valore CSS mask - none

Il valore none è straightforward. Significa che nessun mascheramento è applicato. È come decidere di non usare la tua bacchetta magica affatto.

.no-mask {
mask: none;
}

Questo codice dice semplicemente al browser: "Non applicare alcuna maschera a questo elemento."

CSS mask - <mask-reference>

Qui inizia la magia vera e propria! Un <mask-reference> può essere un'immagine o un gradiente CSS che definisce quali parti dell'elemento devono essere visibili.

.image-mask {
mask-image: url('mask.png');
mask: url('mask.png');
}

.gradient-mask {
mask-image: linear-gradient(to right, transparent, black);
mask: linear-gradient(to right, transparent, black);
}

In questi esempi, stiamo usando sia un file di immagine ('mask.png') che un gradiente lineare come nostra maschera. Le parti nere della maschera mostreranno l'elemento, mentre le parti trasparenti lo nasconderanno.

CSS mask - <masking-mode>

Il modo di mascheramento determina come viene applicata la maschera. Ci sono due valori: alpha e luminance.

.alpha-mask {
mask-mode: alpha;
}

.luminance-mask {
mask-mode: luminance;
}

• alpha: Usa il canale alpha dell'immagine di maschera.
• luminance: Usa la luminosità (brillantezza) dell'immagine di maschera.

CSS mask - <position>

Come con le immagini di sfondo, puoi posizionare la tua maschera:

.positioned-mask {
mask-position: center;
/* o */
mask: url('mask.png') center;
}

Questo centra la maschera sull'elemento. Puoi usare qualsiasi valore di posizionamento CSS valido qui.

CSS mask - <bg-size>

Puoi anche controllare la dimensione della tua maschera:

.sized-mask {
mask-size: cover;
/* o */
mask: url('mask.png') cover;
}

Questo fa coprire l'intero elemento dalla maschera. Puoi usare dimensioni specifiche troppo, come 100px 200px.

CSS mask - <repeat-style>

Se la tua maschera è più piccola dell'elemento, puoi controllare come si ripete:

.repeating-mask {
mask-repeat: repeat-x;
/* o */
mask: url('mask.png') repeat-x;
}

Questo ripete la maschera orizzontalmente lungo l'elemento.

CSS mask - <geometry-box>

La casella geometrica definisce l'area che la maschera copre:

.box-mask {
mask-clip: padding-box;
/* o */
mask: url('mask.png') padding-box;
}

Questo applica la maschera alla casella di padding dell'elemento.

CSS mask - <geometry-box> | no-clip

Il valore no-clip impedisce che la maschera venga ritagliata ai confini dell'elemento:

.no-clip-mask {
mask-clip: no-clip;
/* o */
mask: url('mask.png') no-clip;
}

Questo permette alla maschera di estendersi oltre i confini dell'elemento.

Proprietà correlate al CSS mask

Ci sono diverse proprietà correlate a mask che ti danno ancora più controllo:

Proprietà	Descrizione
mask-image	Specifica l'immagine di maschera
mask-mode	Imposta il modo di mascheramento
mask-repeat	Controlla come la maschera si ripete
mask-position	Imposta la posizione della maschera
mask-clip	Determina l'area di pittura della maschera
mask-origin	Imposta l'origine della maschera
mask-size	Specifica la dimensione della maschera
mask-composite	Definisce come le maschere vengono combinate

Ogni una di queste proprietà corrisponde a una parte della proprietà abbreviata mask che abbiamo utilizzato.

Ecco tutto, miei giovani maghi di CSS! Avete appena imparato le basi del mascheramento CSS. Ricorda, come ogni trucco magico, padroneggiare il mascheramento CSS richiede pratica. Quindi non abbiate paura di sperimentare e creare i vostri progetti web magici!

Nel corso degli anni di insegnamento, ho scoperto che il miglior modo per imparare è fare. Quindi, ecco un esercizio divertente per voi: provate a creare un effetto "rivelazione" su un'immagine utilizzando una maschera a gradiente. Fate in modo che quando passate il mouse sull'immagine, essa sia completamente rivelata. È come tirare indietro una tenda per mostrare un'immagine nascosta!

Buon codice, e che le vostre maschere siano sempre perfette!

Credits: Image by storyset