Podcast su CSS - 024: Modalità di fusione
Duotone è un trattamento cromatico molto diffuso nella fotografia che consente a un'immagine di sembrare composta solo da due colori contrastanti: uno per le alte luci e l'altro per le luci soffuse. Tuttavia, come puoi ottenere questo risultato con il CSS?
Utilizzando le modalità di fusione e altre tecniche che hai imparato, come filtri e pseudo-elementi, puoi applicare questo effetto a qualsiasi immagine.
Che cos'è una modalità di fusione?
I modi di fusione sono comunemente utilizzati in strumenti di progettazione come Photoshop per creare un effetto compositivo mescolando i colori di due o più livelli. Cambiando la combinazione dei colori, puoi ottenere effetti visivi davvero interessanti. Puoi anche utilizzare le modalità di fusione come utilità, ad esempio isolare un'immagine con sfondo bianco, in modo che sembri trasparente.
Puoi utilizzare la maggior parte delle modalità di fusione disponibili in uno strumento di progettazione con CSS,
utilizzando le proprietà
mix-blend-mode o
background-blend-mode.
mix-blend-mode applica la combinazione a un intero elemento,
mentre background-blend-mode applica una combinazione allo sfondo di un elemento.
Utilizzi background-blend-mode quando hai più sfondi su un elemento
e vuoi che tutti si confondano tra loro.
mix-blend-mode influisce sull'intero elemento,
inclusi i suoi pseudo-elementi.
Un caso d'uso è quello iniziale di un'immagine a due tonalità, con livelli di colore applicati all'elemento attraverso i suoi pseudo-elementi.
Le modalità di fusione rientrano in due categorie: separabili e non separabili. Una modalità di fusione separabile considera singolarmente ogni componente di colore, ad esempio RGB. Una modalità di fusione non separabile prende in considerazione tutti i componenti di colore in modo uniforme.
Compatibilità del browser
mix-blend-mode
background-blend-mode
Modalità di fusione separabile
Normale
Questa è la modalità di fusione predefinita e non cambia nulla sulla combinazione di un elemento con gli altri.
Moltiplica
La modalità di fusione multiply è come sovrapporre più lucidi.
I pixel bianchi appariranno trasparenti
e i pixel neri appariranno neri.
I valori intermedi si moltiplicano per i valori di luminosità (luce).
Ciò significa che le luci diventano molto più chiare e le ombre,
più scure, il più delle volte producendo un risultato più scuro.
.my-element {
mix-blend-mode: multiply;
}
Schermo
L'uso di screen moltiplica i valori della luce, un effetto inverso di multiply e il più delle volte produce un risultato più luminoso.
.my-element {
mix-blend-mode: screen;
}
Overlay
Questa modalità di fusione overlay combina multiply e screen.
I colori scuri di base diventano più scuri e i colori chiari di base diventano più chiari.
I colori della fascia media, ad esempio il grigio 50%, non sono interessati.
.my-element {
mix-blend-mode: overlay;
}
Scurisci
La modalità di fusione darken confronta la luminosità del colore scuro dell'immagine di origine e dell'immagine di sfondo e seleziona la più scura tra le due.
A tal fine, confronta i valori RGB anziché la luminosità (come sarebbe multiply e screen),
per ciascun canale di colore.
Con darken e lighten, questo processo di confronto spesso crea nuovi valori di colore.
.my-element {
mix-blend-mode: darken;
}
Schiarisci
L'uso di lighten consente di ottenere l'esatto opposto di darken.
.my-element {
mix-blend-mode: lighten;
}
Schermatura colore
Se utilizzi color-dodge, il colore di sfondo viene schiarito in modo da riflettere il colore di origine.
Questa modalità non mostra alcun effetto sui colori nero puro.
.my-element {
mix-blend-mode: color-dodge;
}
Brucia colori
La modalità di fusione color-burn è molto simile alla modalità fusione multiply, ma aumenta il contrasto, generando mezzitoni più saturi e alte luci ridotte.
.my-element {
mix-blend-mode: color-burn;
}
Luce intensa
L'uso di hard-light crea un contrasto intenso.
Questa modalità di fusione filtra o moltiplica i valori di luminosità.
Se il valore dei pixel è più chiaro del grigio 50%, l'immagine viene illuminata, come se fosse stata filtrata. Se è più scuro, viene moltiplicato.
.my-element {
mix-blend-mode: hard-light;
}
Luce tenue
La modalità di fusione soft-light è una versione meno rigida di overlay.
Funziona in modo molto simile, con meno contrasto.
.my-element {
mix-blend-mode: soft-light;
}
Differenza
Un buon modo per capire come funziona difference è un po' come funziona un negativo fotografico.
La modalità di fusione difference acquisisce il valore della differenza di ogni pixel, invertendo i colori della luce.
Se i valori sono identici, diventano neri.
Le differenze nei valori verranno invertite.
.my-element {
mix-blend-mode: difference;
}
Esclusione
L'uso di exclusion è molto simile a quello di difference, ma invece di restituire il nero per pixel identici, ne restituisce il 50% di grigio, il che significa un output più basso con meno contrasto.
.my-element {
mix-blend-mode: exclusion;
}
Modalità di fusione non separabili
Queste modalità di fusione sono paragonabili ai componenti color HSL. Ciascun componente acquisisce un valore specifico del componente dal livello attivo e lo combina con i valori di altri componenti.
Tonalità
La modalità di fusione hue prende la tonalità del colore di origine e la applica alla saturazione e alla luminosità del colore di sfondo.
.my-element {
mix-blend-mode: hue;
}
Saturazione
Funziona come hue, ma l'utilizzo di saturation come modalità di fusione applica la saturazione del colore di origine alla tonalità e alla luminosità del colore di sfondo.
.my-element {
mix-blend-mode: saturation;
}
Colore
La modalità di fusione color crea un colore dalla tonalità e dalla saturazione del colore di origine e dalla luminosità del colore di sfondo.
.my-element {
mix-blend-mode: color;
}
Luminosità
Infine, luminosity è l'opposto di color.
Crea un colore con la luminosità del colore di origine e la tonalità e la saturazione del colore di sfondo.
.my-element {
mix-blend-mode: luminosity;
}
La proprietà isolation
Se imposti la proprietà isolation sul valore isolate, verrà creato un nuovo contesto di impilamento, che gli impedirà di fondersi con un livello di sfondo.
Come hai appreso nel modulo z-index, quando crei un nuovo contesto di stacking, questo livello diventa il livello di base.
Ciò significa che le modalità di fusione a livello principale non verranno più applicate,
ma gli elementi all'interno di un elemento con un insieme isolation: isolate possono ancora fondersi.
Tieni presente che questo non funziona con background-blend-mode
perché la proprietà background è già isolata.
Verifica la tua comprensione
Verifica le tue conoscenze delle modalità di fusione
Quali delle seguenti sono modalità di fusione CSS?
Per fondere colori diversi in modi diversi, quale modalità di combinazione hai bisogno?