Una delle funzionalità più preziose di Photoshop, indiscutibilmente, la funzione che l'ha portata avanti rispetto alla concorrenza, è la modalità di fusione. Le modalità di fusione prendono due pixel posizionati uno sopra l'altro e li combinano in modi diversi, ad esempio la modalità di fusione del colore più scura renderà semplicemente il più scuro dei due pixel. Quando vengono espansi su tutta l'immagine, i metodi di fusione possono produrre alcuni effetti sorprendenti.
Sebbene Adobe Photoshop non abbia inventato le modalità di fusione, la sua implementazione è sicuramente la più simulata. Ma ora, non hai bisogno di Photoshop per modellare le tue immagini in questo modo, perché possiamo fare tutto, in modo dinamico, con CSS3.
Così com'è, supporto del browser per CSS la proprietà background-blend-mode sta migliorando. Le versioni precedenti dei browser richiedevano i prefissi dei fornitori e / o l'attivazione di funzionalità sperimentali, ma caniuse.com segnala il supporto nelle versioni correnti di Chrome, Firefox e Opera, con Safari presto disponibile.
Non c'è ancora alcun segno di supporto IE, ma poiché le modalità di fusione sono un miglioramento progressivo, possiamo iniziare a considerare di utilizzarle ora.
Ci sono un certo numero di opzioni di modalità di fusione nelle raccomandazioni dei candidati CSS3, ma la più utile per i nostri scopi è la modalità background-blend . Questa proprietà ci consente di unire due immagini o un'immagine e un colore di sfondo.
Ecco il codice che ci serve:
Ed ecco il nostro CSS di base:
.blend{width:782px;height:540px;background:#3db6b8 url("lighthouse.jpg") no-repeat center center;}Ora siamo pronti per aggiungere le modalità di fusione.
Per fare questo, aggiungeremo un'altra classe al nostro div, ad esempio "moltiplica":
E poi creeremo una seconda regola di stile:
.blend.multiply{background-blend-mode: multiply;}Se vuoi dare un'occhiata al codice che puoi scarica qui i file sorgente.
Moltiplica , come suggerisce il nome, moltiplica il pixel di base per il colore di fusione, risultando in un colore più scuro. Moltiplicando il nero si ottiene il nero e moltiplicando il bianco, l'immagine rimane invariata.
background-blend-mode: multiply;La sovrapposizione è una modalità di fusione complessa. La moltiplicazione dipende dal colore di base: i colori chiari diventano più chiari, i colori scuri diventano più scuri.
background-blend-mode: overlay;L'opposto polare di scurire , schiarire illumina un'immagine confrontando i due pixel sovrapposti e scegliendo l'accendino dei due.
background-blend-mode: lighten;La bruciatura del colore è l'esatto opposto del colore schivata , oscurando il colore di base con conseguente aumento del contrasto.
background-blend-mode: color-burn;La luce morbida è simile alla luce intensa , ma invece di moltiplicare o schermare i colori, la luce soffusa utilizza scherma e brucia per un effetto più sottile.
background-blend-mode: soft-light;L'esclusione è simile alla differenza , ma produce meno contrasto, quindi è un po 'più utilizzabile.
background-blend-mode: exclusion;La saturazione , come la tonalità , unisce due dei valori del colore di base con una proprietà del colore di fusione, in questo caso la saturazione.
background-blend-mode: saturation;La luminosità è l'opposto del colore , combina la tonalità e la saturazione del colore di base e la luminanza del colore di fusione.
background-blend-mode: luminosity;