Podcast CSS - 024: Modalità di fusione
.
Duotone è un trattamento cromatico molto diffuso per la fotografia che fa sembrare che un'immagine sia composta solo da due colori contrastanti: una per le alte luci e l'altra per le luci soffuse. Come puoi farlo con il CSS?
Usando 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?
Le modalità di fusione sono comunemente utilizzate in strumenti di progettazione come Photoshop per creare un effetto compositivo mescolando i colori di due o più strati. Cambiando la combinazione dei colori, puoi ottenere effetti visivi davvero interessanti. Puoi anche usare le modalità di fusione come utilità, ad esempio isolare un'immagine con sfondo bianco in modo che abbia uno sfondo trasparente.
Puoi utilizzare la maggior parte delle modalità di fusione disponibili in uno strumento di progettazione con CSS,
utilizzando
mix-blend-mode
o
background-blend-mode
proprietà.
mix-blend-mode
applica la combinazione a un intero elemento
e background-blend-mode
applica la combinazione allo sfondo di un elemento.
Utilizzi background-blend-mode
quando hai più sfondi su un elemento
in modo che si confondano l'uno con l'altro.
mix-blend-mode
influisce sull'intero elemento,
inclusi i suoi pseudo-elementi.
Un caso d'uso è l'esempio iniziale di un'immagine bitonale,
che ha livelli di colore applicati all'elemento attraverso i suoi pseudo-elementi.
Le modalità di fusione si suddividono in due categorie: separabili e non separabili. Una modalità di fusione separabile prende in considerazione ogni componente del colore, ad esempio RGB. Una modalità di fusione non separabile considera tutti i componenti del colore in modo uguale.
Compatibilità del browser
mix-blend-mode
background-blend-mode
Modalità di fusione separabili
Normale
Questa è la modalità di fusione predefinita e non cambia nulla in merito al modo in cui un elemento si fonde con gli altri.
Moltiplica
La modalità di fusione multiply
è come la sovrapposizione di più lucidi uno sull'altro.
I pixel bianchi sono trasparenti,
e quelli neri appariranno neri.
Tutte le parti intermedie moltiplicano i valori di luminosità (luce).
Ciò significa che le luci diventano molto più chiare
e buie.
più scuro: il più delle volte produce un risultato più scuro.
.my-element {
mix-blend-mode: multiply;
}
Schermo
L'uso di screen
moltiplica i valori della luce, un effetto inverso in multiply
,
e molto spesso produrrà risultati migliori.
.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 di fascia media, ad esempio 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 il più scuro dei due.
Per farlo, confronta i valori RGB anziché la luminosità (come dovrebbero fare multiply
e screen
),
per ciascun canale colore.
Con darken
e lighten
, da questa procedura di confronto vengono spesso creati nuovi valori di colore.
.my-element {
mix-blend-mode: darken;
}
Lighten
L'uso di lighten
permette di ottenere esattamente il contrario di darken
.
.my-element {
mix-blend-mode: lighten;
}
Schermatura colore
Se utilizzi color-dodge
, il colore di sfondo si schiarisce in modo da riflettere il colore di origine.
I colori nero puro non notano alcun effetto in questa modalità.
.my-element {
mix-blend-mode: color-dodge;
}
Bruciatura colore
La modalità di fusione color-burn
è molto simile alla modalità di fusione multiply
,
ma aumenta il contrasto, con conseguente aumento della saturazione dei toni medi e delle alte luci.
.my-element {
mix-blend-mode: color-burn;
}
Luce intensa
L'uso di hard-light
crea un contrasto vivido.
Questa modalità di fusione filtra o moltiplica i valori di luminosità.
Se il valore dei pixel è più chiaro del grigio 50%, l'immagine
si schiarisce
come se fosse stato filtrato. 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 più o meno allo stesso modo 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 di foto.
La modalità di fusione difference
prende il valore della differenza di ogni pixel,
invertendo i colori della luce.
Se i valori del colore sono identici, diventano neri.
Le differenze nei valori verranno invertite.
.my-element {
mix-blend-mode: difference;
}
Esclusione
L'utilizzo di exclusion
è molto simile a quello di difference
,
ma invece di restituire nero per pixel identici,
restituisce il 50% di grigio, con un output più morbido con meno contrasto.
.my-element {
mix-blend-mode: exclusion;
}
Modalità di fusione non separabili
Puoi pensare a queste modalità di fusione come ai componenti colore HSL. Ognuno di essi prende un valore specifico del componente dal livello attivo e lo combina con gli 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
Questo comando funziona nel seguente modo: hue
,
ma utilizzando saturation
come modalità di fusione si 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
creerà un colore dalla tonalità e dalla saturazione del colore di origine
e la 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 isolation
avere il valore isolate
,
viene creato un nuovo contesto di sovrapposizione
che impediscono la combinazione con un livello di sfondo.
Come hai appreso nel modulo z-index, quando crei un nuovo contesto di sovrapposizione,
diventa lo strato base.
Di conseguenza, le modalità di fusione a livello padre non verranno più applicate,
ma gli elementi all'interno di un elemento con l'impostazione isolation: isolate
possono ancora fondersi.
Tieni presente che questa opzione non funziona con background-blend-mode
perché la proprietà background è già isolata.
Verifica le tue conoscenze
Verifica le tue conoscenze delle modalità di fusione
Quali delle seguenti sono modalità di fusione CSS?
Se vuoi mescolare colori diversi in modi diversi, quale stile di modalità di fusione hai bisogno?