The CSS Podcast - 024: Blend Modes
Il duotone è un trattamento di colore molto utilizzato per la fotografia che fa sembrare un'immagine composta solo da due colori a contrasto: uno per le alte luci e l'altro per le ombre. Come si fa con CSS?
Utilizzando le modalità di miscela e altre tecniche che hai imparato, come i filtri e i pseudo-elementi, puoi applicare questo effetto a qualsiasi immagine.
Che cos'è una modalità di fusione?
Le modalità di miscela vengono comunemente utilizzate in strumenti di progettazione come Photoshop per creare un effetto compositivo mescolando i colori di due o più livelli. Modificando il modo in cui i colori si combinano, puoi ottenere effetti visivi davvero interessanti. Puoi anche utilizzare le modalità di miscela come utilità, ad esempio per isolare un'immagine con uno sfondo bianco in modo che abbia uno sfondo trasparente.
Puoi utilizzare la maggior parte delle modalità di miscela disponibili in uno strumento di progettazione con CSS, utilizzando le proprietà mix-blend-mode
o background-blend-mode
.
mix-blend-mode
applica la miscela a un intero elemento
e background-blend-mode
applica la miscela allo sfondo di un elemento.
Utilizza background-blend-mode
quando hai più sfondi in un elemento
e vuoi che si fondano tra loro.
mix-blend-mode
influisce sull'intero elemento, inclusi i relativi pseudo-elementi.
Un caso d'uso è nell'esempio iniziale di un'immagine duotone,
che ha livelli di colore applicati all'elemento tramite i relativi pseudo-elementi.
Le modalità di miscela rientrano in due categorie: separabili e non separabili. Una modalità di miscela separabile prende in considerazione ogni componente di colore, come RGB, singolarmente. Una modalità di miscelazione non separabile considera tutti i componenti di colore allo stesso modo.
Compatibilità del browser
mix-blend-mode
background-blend-mode
Modalità di fusione separabili
Normale
Si tratta della modalità di fusione predefinita e non cambia il modo in cui un elemento si fonde con gli altri.
Moltiplica
La modalità di miscela multiply
è simile all'accatastamento di più trasparenze una sopra l'altra.
I pixel bianchi saranno trasparenti e quelli neri neri.
Qualsiasi valore intermedio moltiplica i valori di luminosità (luce).
Ciò significa che le tonalità chiare diventano molto più chiare e quelle scure più scure, producendo il più delle volte un risultato più scuro.
.my-element {
mix-blend-mode: multiply;
}
Schermo
L'utilizzo di screen
moltiplica i valori di luce, un effetto inverso rispetto a multiply
,
e produrrà più spesso un risultato più luminoso.
.my-element {
mix-blend-mode: screen;
}
Overlay
Questa modalità di miscela, overlay
, combina multiply
e screen
.
I colori di base scuri diventano più scuri e i colori di base chiari diventano più chiari.
I colori di media tonalità, come il grigio al 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 delle due.
Lo fa confrontando i valori RGB anziché la luminosità (come farebbero multiply
e screen
), per ogni canale di colore.
Con darken
e lighten
, spesso vengono creati nuovi valori di colore da questa procedura di confronto.
.my-element {
mix-blend-mode: darken;
}
Schiarimento
L'utilizzo di lighten
fa l'esatto contrario 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.
I colori neri puri non sono interessati da questa modalità.
.my-element {
mix-blend-mode: color-dodge;
}
Bruciatura colore
La modalità di miscela color-burn
è molto simile alla modalità di miscela multiply
, ma aumenta il contrasto, con un risultato di mezzitoni più saturi e luci ridotte.
.my-element {
mix-blend-mode: color-burn;
}
Luce intensa
L'utilizzo di hard-light
crea un contrasto vivido.
Questa modalità di miscelazione attenua o moltiplica i valori di luminosità.
Se il valore del pixel è più chiaro del grigio al 50%, l'immagine viene schiarita, come se fosse schermata. Se è più scuro, viene moltiplicato.
.my-element {
mix-blend-mode: hard-light;
}
Luce tenue
La modalità di miscela soft-light
è una versione meno marcata di overlay
.
Funziona in modo molto simile, ma con meno contrasto.
.my-element {
mix-blend-mode: soft-light;
}
Differenza
Un buon modo per capire come funziona difference
è pensare a come funziona una foto negativa.
La modalità di miscela difference
prende il valore della differenza di ogni pixel,
inversione dei colori chiari.
Se i valori di colore sono identici, diventano neri.
Le differenze nei valori si invertono.
.my-element {
mix-blend-mode: difference;
}
Esclusione
L'utilizzo di exclusion
è molto simile a difference
, ma anziché restituire il nero per i pixel identici, restituirà il grigio al 50%, con un output più morbido e meno contrasto.
.my-element {
mix-blend-mode: exclusion;
}
Modalità di fusione non separabili
Puoi considerare queste modalità di miscelazione come componenti di colore HSL. Ognuno prende un valore del componente specifico dal livello attivo e lo mescola con altri valori del componente.
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'inverso 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
su un valore isolate
, verrà creato un nuovo contesto di impilamento che impedirà l'unione con un livello di sfondo.
Come hai appreso nel modulo sull'indice z, quando crei un nuovo contesto di impilamento, quel livello diventa il livello di base.
Ciò significa che le modalità di fusione a livello di elemento principale non verranno più applicate, ma gli elementi all'interno di un elemento con isolation: isolate
impostato possono ancora essere fusi.
Tieni presente che questo non funziona con background-blend-mode
perché la proprietà sfondo è già isolata.
Verificare di aver compreso
Verifica le tue conoscenze sulle modalità di miscela
Quali delle seguenti sono modalità di miscelazione CSS?
Se vuoi fondere colori diversi in modi diversi, di quale stile di modalità di miscelazione hai bisogno?