Share
Abbiamo creato una guida completa per aiutarti a imparare i CSS, se hai appena iniziato con le nozioni di base o se vuoi esplorare CSS più avanzati.
Potresti avere familiarità con i "metodi di fusione" se sei un utente di Photoshop; ti permettono di combinare i livelli in diversi modi e sono molto divertenti da giocare. Le modalità di fusione in CSS, tuttavia, non sono supportate universalmente, ma sono sicuramente in arrivo.
In questo tutorial, impareremo come funzionano i metodi di fusione e i diversi modi in cui puoi implementare i metodi di fusione usando i CSS.
Se non hai mai incontrato modalità di fusione, il loro modo di lavorare potrebbe sembrare un po 'sfuggente. Scopriamolo.
Le modalità di fusione sono disponibili da anni nel software di progettazione, ma il concetto di modalità di fusione è stato effettivamente utilizzato per molto più tempo, anche prima dell'invenzione dei computer.
La parte "miscelazione" di modalità di fusione si riferisce a prendere due colori e combinarli in qualche modo per fare un colore. Più precisamente, prendiamo due mappe pixel e le mescoliamo insieme.
Come che la fusione avviene è la parte "modalità" di modalità di fusione. Come interagiscono questi colori? Poiché stiamo lavorando con lo spazio digitale, possiamo prendere qualsiasi formula matematica e applicarla ai due input per ricavare un output.
Un'immagine non trattata di una medusa
La stessa medusa con un solido strato arancione (la nostra "fonte") è posizionata sopra di essa
Ecco il nostro livello sorgente con la modalità di fusione "schermo" applicataSe ti senti veramente ambizioso, date un'occhiata al documento di compositing ufficiale del W3C FX Task Force che spiega le implementazioni matematiche di ognuna delle diverse modalità di fusione. Dimostra una formula usata per calcolare la miscelazione di più.
Cm = B (Cb, Cs)
Accentsconagua
Centimetro è il colore risultante dopo la fusione. B si riferisce alla funzione di fusione. Cb variabile è il colore di sfondo. cs variabile è il colore di origine. Tutti i colori sono basati su una scala 0-1, che mappa direttamente su un valore rgb 0-255.
Esistono due categorie di metodi di fusione. I primi sono considerati "non separabili", e il secondo (non sorprendentemente) sono considerati "separabili". Se una modalità di fusione è considerata separabile o meno è determinata dall'algoritmo sottostante. Se l'algoritmo tratta ugualmente tutti i canali di colore separati (rosso, verde e blu), è considerato non separabile. Se utilizza singolarmente ciascuno dei canali di colore, è considerato separabile.
Tutti i metodi di fusione possono restituire solo colori compresi nell'intervallo tra 0 e 255. Qualsiasi punto oltre questo intervallo in entrambe le direzioni verrà ritagliato nell'intervallo. Quando si vedono ampie aree di bianco o nero su un'area mista, è probabile che tali aree vengano ritagliate.
Le modalità di fusione CSS, se supportate, funzionano in due modi diversi. Viene chiamato il primo tipo di modalità di fusione background-blend-mode. Questa proprietà ti consente di fondere tutti gli sfondi all'interno di un elemento l'uno con l'altro.
Se hai definito, ad esempio, più immagini di sfondo (supportate in tutti i browser oltre a IE8), la prima immagine di sfondo verrà considerata come il livello di origine e qualsiasi immagine aggiunta in seguito verrà trattata come livello di sfondo, sotto.
L'aggiunta di un colore di sfondo (che deve essere l'ultimo dell'elenco) posiziona un altro livello nella parte inferiore. Il colore verrà trattato come il livello di sfondo e le immagini come livelli di origine. Prendi la seguente regola di stile, ad esempio:
div background: url (img / pattern.png), url (img / jellyfish.jpg), # f07e32;
Questo ci dà:
E possiamo quindi aggiungere le modalità di fusione nel mix:
div background: url (img / pattern.png), url (img / jellyfish.jpg), # f07e32; background-blend-mode: schermo;
Ecco due div che usano questi stili, uno senza la modalità di fusione, il secondo con:
Un tipo di metodo di fusione secondario, mix-mix-mode, consente di combinare elementi indipendenti. La specifica è più specifica dell'implementazione, ma la fusione si verifica in "contesti di impilamento".
Questo è quello che succede quando usiamo mix-mix-mode, tentare di ottenere l'immagine di sfondo e il colore all'interno dello stesso elemento per fondere (molto poco):
.my-overlay-element background-color: # f07e32; background-image: url (img / jellyfish.jpg); // Nota: questa immagine non si fonde con il colore di sfondo. mix-blend-mode: color-dodge;
Di seguito, puoi trovare una demo interattiva per esplorare gli effetti di una determinata modalità di fusione.
Diamo un'occhiata alle modalità di fusione disponibili, esaminando la formula utilizzata e applicandole al cerchio rosso posto sopra la nostra medusa.
Nessuna modalità di fusione applicataB (Cb, Cs) = 1 - [(1 - Cb) x (1 - Cs)]
Lo schermo prende il nome dal concetto di proiettare più esposizioni fotografiche contemporaneamente su uno schermo. Il colore risultante è sempre leggero almeno quanto uno dei livelli miscelati.
Modalità di fusione schermoB (Cb, Cs) = min (Cb, Cs)
Seleziona il più scuro dei due colori.
Scurisci la modalità di fusioneB (Cb, Cs) = max (Cb, Cs)
Seleziona il più leggero dei due colori.
Alleggerisci la modalità di fusioneif (Cb == 0) B (Cb, Cs) = 0 else if (Cs == 1) B (Cb, Cs) = 1 altro B (Cb, Cs) = min (1, Cb / (1 - Cs) )
Schivata del colore schiarisce il colore dello sfondo per riflettere il colore della fonte.
Colore schiva modalità di fusioneif (Cb == 1) B (Cb, Cs) = 1 else if (Cs == 0) B (Cb, Cs) = 0 else B (Cb, Cs) = 1 - min (1, (1 - Cb) / Cs)
La bruciatura del colore scurisce il colore dello sfondo, aumentando il contrasto tra la sorgente e lo sfondo.
Modalità fusione colore bruciaif (Cs <= 0.5) B(Cb, Cs) = Multiply(Cb, 2 x Cs) else B(Cb, Cs) = Screen(Cb, 2 x Cs -1)
Applica "moltiplica" su colori chiari e "schermo" su colori più scuri. In sostanza, "luce dura" è l'opposto di "sovrapposizione", che vedremo in seguito.
Modalità fusione luce duraB (Cb, Cs) = HardLight (Cs, Cb)
Applica "schermo" a colori chiari e "moltiplica" su colori più scuri; scritto come lo stesso di "luce dura", tranne con gli argomenti alla funzione invertita.
Sovrapposizione modalità di fusioneif (Cs <= 0.5) B(Cb, Cs) = Cb - (1 - 2 x Cs) x Cb x (1 - Cb) else B(Cb, Cs) = Cb + (2 x Cs - 1) x (D(Cb) - Cb) with if(Cb <= 0.25) D(Cb) = ((16 * Cb - 12) x Cb + 4) x Cb else D(Cb) = sqrt(Cb)
Questa modalità di fusione applica una variante di "moltiplicazione" su valori scuri e una variante di "schermo" su valori più chiari (simile allo schermo).
In questo algoritmo, vediamo una funzione secondaria D che è impostato nel con clausola basata sul valore blu presente nel colore. Il risultato finale è in genere un effetto molto più morbido rispetto a "sovrapposizione".
Modalità Sof leggeraB (Cb, Cs) = | Cb - Cs |
Differenza prende il valore di differenza assoluta tra i due colori, che ha l'effetto di una foto negativa.
Modalità di fusione delle differenzeB (Cb, Cs) = Cb + Cs - 2 x Cb x Cs
La modalità di esclusione ha lo stesso effetto di base della modalità "differenza", ad eccezione del fatto che colori simili producono un valore medio di contrasto inferiore (anziché un valore più scuro).
Modalità di fusione di esclusioneLe modalità di fusione "non separabili" utilizzano alcune funzioni extra, tra cui a ClipColor funzione, SetLum funzione, e Sat funzione.
Nota importante: Nessuna versione di Safari supporta i modi di fusione "hue", "saturazione", "colore" o "luminosità" con mix-mix-mode o background-blend-mode.
ClipColor (C) l = Lum (C) n = min (Cred, Cgreen, Cblue) x = max (Cred, Cgreen, Cblue) se n < 0.0 Cred = l + (((Cred - l) * l) / (l - n)) Cgreen = l + (((Cgreen - l) * l) / (l - n)) Cblue = l + (((Cblue - l) * l) / (l - n)) if x > 1.0 Cred = l + (((Cred - l) * (1 - l)) / (x - l)) Cgreen = l + ((Cgreen - l) * (1 - l)) / (x - l) ) Cblue = l + (((Cblue - l) * (1 - l)) / (x - l)) restituisce C SetLum (C, l) d = l - Lum (C) Cred = Cred + d Cgreen = Cgreen + d Cblue = Cblue + d return ClipColor (C) Sat (C) = max (Cred, Cgreen, Cblue) - min (Cred, Cgreen, Cblue)
Notare la min, medio, e max le funzioni di utilità si riferiscono ai valori minimo, medio e massimo. (Mid è non la media dei tre valori). I valori cred, Cgreen, e Cblue fare riferimento a valori rossi, verdi e blu presenti a colori C.
Con queste definizioni, ora possiamo guardare le modalità di fusione non separabili.
B (Cb, Cs) = SetLum (SetSat (Cs, Sat (Cb)), Lum (Cb))
Questa modalità applica la tonalità del livello sorgente alla luminanza e alla saturazione del colore di sfondo.
Modalità sfumatura tonalitàB (Cb, Cs) = SetLum (SetSat (Cb, Sat (Cs)), Lum (Cb))
Questa modalità fa la stessa cosa della modalità "hue", ma applica la saturazione del primo piano alla tonalità e la luminanza dello sfondo.
Saturazione modalità di fusioneB (Cb, Cs) = SetLum (Cs, Lum (Cb))
Applica la tonalità e la saturazione del primo piano alla luminanza dello sfondo.
Modalità di fusione del coloreB (Cb, Cs) = SetLum (Cb, Lum (Cs))
Questa modalità applica la luminosità del livello sorgente con la tonalità e la saturazione del livello di sfondo.
Modalità di fusione di luminositàLe modalità di fusione in CSS offrono una nuova ed entusiasmante flessibilità per il design e esperienze estetiche uniche. Comprendere la matematica e la teoria del colore che si applica a ciascuna delle modalità di fusione disponibili fornisce un set di strumenti più olistico.
Cosa farai mentre i browser continuano ad aggiungere supporto per le modalità di fusione?
