Share
Negli ultimi due tutorial di questa serie, abbiamo discusso di come i filtri e le modalità di fusione possono cambiare completamente l'aspetto delle immagini. In questo tutorial illustrerò le basi della modifica delle immagini utilizzando entrambe queste proprietà insieme.
Qualsiasi modifica di immagini non primitive di solito richiede più di un singolo elemento. Questo può essere realizzato con pseudo elementi. Sfortunatamente, c'è un'altra complicazione. Il img elemento rientra negli elementi sostituiti. Di conseguenza, :prima e :dopo non funzionerà con i tag immagine. Per risolvere questo problema, avremo bisogno di un wrapper attorno alla nostra immagine e il figura il tag sembra il miglior candidato in questo caso. Pertanto, il nostro markup dovrebbe assomigliare a questo:
Tutti gli effetti di modifica che creeremo avranno alcuni core CSS comuni.
figura posizione: relativa; figure: before, figure: after content: "; height: 100%; width: 100%; top: 0; left: 0; position: absolute; img width: 100%; height: 100%; margin: 0; padding: 0;
Ho usato il :prima e :dopo pseudo elementi in modo che io possa applicare varie modalità di fusione. Si noti che ho impostato il larghezza e altezza al 100% per coprire il figura correttamente, e ho usato il posizionamento assoluto per un perfetto allineamento.
Nella maggior parte dei casi applicheremo i filtri alle immagini e useremo le modalità di fusione e altri effetti sugli elementi pseudo. L'immagine sotto è l'immagine originale che modificheremo.
Per creare un'immagine ad alto contrasto, puoi semplicemente impostare il contrasto su un valore più alto, ma aumentare la luminosità rende l'effetto più drammatico. Se dovessi semplicemente usare i filtri, è tutto quello che potresti fare. Tuttavia, con i metodi di fusione puoi anche aggiungere un riquadro con ombra copertura miscelazione dell'immagine per risultati migliori. Ecco il CSS per questo effetto:
img filtro: contrasto (1,8) luminosità (1,5) scala di grigi (1); figure: before z-index: 3; mix-blend-mode: overlay; box-shadow: 0 0 200px nero inserito;
L'aggiunta di uno z-index mantiene i nostri pseudo elementi sopra l'immagine. Ho usato la modalità di fusione sovrapposizione per mantenere l'immagine leggermente scura dopo l'applicazione dell'ombra della scatola.
Prova a passare il mouse sull'immagine qui sotto per vedere la differenza tra i filtri e una combinazione di filtri e modalità di fusione.
Per esercitarti, puoi provare diversi valori per il box-ombra proprietà nella demo CodePen.
Il colore nella maggior parte delle vecchie foto generalmente svanisce, e hanno una fodera esterna rosso-marrone. Per ricreare lo stesso effetto, dovremo usare più elementi e filtri. Ecco il nostro CSS:
img filter: saturare (0.6); figura filtro: contrasto (1.1) saturo (1.9) seppia (0.7) scala di grigi (0.3); figure: before z-index: 2; mix-blend-mode: moltiplica; box-shadow: 0 0 250 px marrone inserto; background: rgba (125, 100, 0, 0,3); figura: dopo z-index: 3; mix-blend-mode: hard-light; box-shadow: 0 0 150px inserto rosa; sfondo: rgba (198, 155, 0, 0,3);
Questa volta, ho applicato filtri sia sull'immagine che nella figura. Fondamentalmente, vogliamo che l'immagine sia meno colorata. Ciò si ottiene utilizzando il filtro saturo con un valore inferiore a 1. I filtri di figura vengono applicati dopo tutto il blending. Se non si applicano questi filtri, il risultato finale avrà sfumature di marrone molto più pronunciate, il che è indesiderabile.
Dovresti notare che ho applicato anche uno sfondo rossastro semitrasparente su entrambi gli elementi pseudo. Questo conferisce alle immagini il loro aspetto bruno-rossastro. L'ombra della scatola viene utilizzata per mantenere il contorno relativamente più marrone.
Dovresti provare diverse proprietà nella demo per vedere se puoi ottenere risultati migliori.
Questa volta cercheremo di dare alla nostra immagine una tonalità blu. Rispetto ai colori caldi, l'aggiunta di una tonalità di colori freddi come il blu rende le immagini facili ai nostri occhi.
Questo è il CSS che dobbiamo applicare:
img filter: luminosità (1,1) contrasto (1,3); figure: before z-index: 2; mix-blend-mode: moltiplica; box-shadow: 0 0 100px rgba (100, 150, 200, 1) riquadro, 0 0 300px rgba (100, 150, 200, 1) riquadro; figura: dopo z-index: 3; mix-blend-mode: difference; background: rgba (0, 0, 255, 0,3);
Comincio aumentando la luminosità e il contrasto della nostra immagine. Ciò assicurerà che la nostra immagine non perda colori meno evidenti e diventi troppo noiosa durante la modifica.
Generalmente devi usare multipli box-ombras con colori più chiari per cambiamenti evidenti. Ecco perché aggiungo due bluastri box-ombras alla nostra immagine. Basta usare a box-ombra limita la tonalità blu al confine della nostra immagine. Per diffondere il colore blu su tutta la nostra immagine, lo uso come sfondo sul :dopo pseudo elemento. Ecco il risultato finale di tutti questi filtri:
Prova ad aggiungere una tonalità verde o rossa all'immagine nella demo.
Hai mai assistito ad una serata leggermente nuvolosa con particelle di sabbia sospese nell'atmosfera a causa del vento? In quelle condizioni meteorologiche, tutto ha una tonalità giallastra, e gli oggetti sembrano un po 'noiosi. Per ricreare lo stesso effetto, abbiamo bisogno del seguente CSS:
img filter: saturare (0,2); figura filtro: contrasto (1,8) luminosità (1,1) saturo (1,5); figure: before z-index: 2; mix-blend-mode: moltiplica; box-shadow: 0 0 100px rgba (0,0,0,0,5) inserito; background: rgba (125, 100, 0, 0,3); figura: dopo z-index: 3; mix-blend-mode: hard-light; box-shadow: 0 0 500px rgba (0,0,0,0,6) inserito; sfondo: rgba (198, 155, 0, 0,3);
La prima cosa che faccio è ridurre la saturazione dell'immagine. Sia il :prima e :dopo gli elementi pseudo hanno sfondi gialli traslucidi per aggiungere la tonalità desiderata. Usando il luce forte modalità di fusione attivata :dopo rende la foschia più prominente.
Il box-ombra su pseudo elementi aumenta l'attenzione sul motociclista. Infine, applicando in alto contrasto, luminosità e saturazione filtri ai nostri figura elemento rinforza la foschia.
Nella demo, puoi provare diversi valori per varie proprietà per vedere come influenzano il risultato finale.
Non è così difficile modificare le immagini in CSS. Se mantieni in mente i punti di cui ho parlato in questo tutorial, sarai in grado di creare dei fantastici filtri personalizzati.
Per esercitarti, puoi sperimentare con le demo in questo tutorial o provare a ricreare i popolari filtri di Instagram. Puoi anche controllare la varietà di animazioni ed effetti disponibili nel Marketplace Envato nel caso in cui hai bisogno di alcuni filtri pronti all'uso.
Accentsconagua
