Modalità di fusione

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