Share
I de to siste opplæringsprogrammene i denne serien har vi diskutert hvordan filtre og blandemoduser kan forandre utseendet på bilder helt. I denne opplæringen vil jeg dekke grunnleggende om å redigere bilder ved å bruke begge disse egenskapene sammen.
Eventuell ikke-primitiv bilderedigering krever vanligvis mer enn bare et enkelt element. Dette kan oppnås med pseudoelementer. Dessverre er det en komplikasjon. De img Elementet kommer under erstattede elementer. Som et resultat, :før og :etter vil ikke fungere med bilde koder. For å løse dette problemet trenger vi en wrapper rundt bildet vårt, og figur tag er den beste kandidaten i dette tilfellet. Derfor bør vår oppslag se slik ut:
Alle redigeringseffekter som vi vil opprette, vil ha noen felles kjerne CSS.
figur posisjon: relativ; figur: før, figur: etter innhold: "; høyde: 100%; bredde: 100%; topp: 0; venstre: 0; posisjon: absolutt; img bredde: 100%; høyde: 100%; 0; polstring: 0;
Jeg har brukt :før og :etter pseudoelementer slik at jeg kan bruke forskjellige blandemoduser. Legg merke til at jeg har satt bredde og høyde til 100% for å dekke figur riktig, og jeg har brukt absolutt posisjonering for perfekt justering.
I de fleste tilfeller vil vi bruke filtre på bilder og bruke blandemoduser og andre effekter på pseudoelementene. Bildet under er det opprinnelige bildet som vi skal redigere.
Hvis du vil opprette et høy kontrastbilde, kan du bare sette kontrasten til en høyere verdi, men økende lysstyrke gjør effekten mer dramatisk. Hvis du bare skulle bruke filtre, så er det alt du kan gjøre. Men med blandemodus kan du også legge til en innboks bokseskygge med overlegg blending til bildet for bedre resultater. Her er CSS for denne effekten:
img filter: kontrast (1.8) lysstyrke (1.5) gråtoner (1); figur: før z-indeks: 3; mix-blend-modus: overlay; boks-skygge: 0 0 200px svart innskudd;
Å legge til en z-indeks holder våre pseudoelementer over bildet. Jeg har brukt overleggsmiksemodus for å holde bildet litt mørkt etter bruk av bokseskyggen.
Prøv å sveve over bildet under for å se forskjellen mellom filtre og en kombinasjon av filtre og blandemoduser.
For øvelse kan du prøve forskjellige verdier for box-shadow eiendom i CodePen-demoen.
Farge i de fleste gamle bilder fader vanligvis bort, og de har en rødbrun ytre fôr. For å gjenopprette samme effekt, må vi bruke flere elementer og filtre. Her er vår CSS:
img filter: mettet (0,6); figur filter: kontrast (1,1) mettet (1.9) sepia (0,7) gråtoner (0.3); figur: før z-indeks: 2; mix-blend-modus: multiplisere; boks-skygge: 0 0 250px brunt innskudd; bakgrunn: rgba (125, 100, 0, 0.3); figur: etter z-indeks: 3; blandings-modus: hardt lys; boks-skygge: 0 0 150px rosa innskudd; bakgrunn: rgba (198, 155, 0, 0.3);
Denne gangen har jeg brukt filtre på både bildet og figuren. I utgangspunktet vil vi at bildet skal være mindre fargerikt. Dette oppnås ved å bruke metningsfilteret med en verdi lavere enn 1. Tallfiltene blir brukt etter all blanding. Hvis du ikke bruker disse filtrene, vil det endelige resultatet ha mye mer fremtredende nyanser av brun, noe som er uønsket.
Du bør merke at jeg også har brukt en halv gjennomsiktig rødlig bakgrunn på begge pseudoelementene. Dette gir bildene deres rødbrune utseende. Boksen-skyggen brukes til å holde oversikten relativt brune.
Du bør eksperimentere med ulike egenskaper i demoen for å se om du kan få bedre resultater.
Denne gangen vil vi prøve å gi bildet vårt en blå nyanse. Sammenlignet med varme farger, legger du en nyanse av kule farger som blå, gjør bildene enkle på øynene.
Dette er CSS som vi må bruke:
img filter: lysstyrke (1.1) kontrast (1.3); figur: før z-indeks: 2; mix-blend-modus: multiplisere; boksskygge: 0 0 100px rgba (100, 150, 200, 1) innsett, 0 0 300px rgba (100, 150, 200, 1) innsett; figur: etter z-indeks: 3; mix-blend-modus: forskjell; bakgrunn: rgba (0, 0, 255, 0.3);
Jeg begynner med å øke lysstyrken og kontrasten til bildet vårt. Dette vil sikre at bildet vårt ikke mister mindre fremtredende farger og blir for kjedelig under redigering.
Du må vanligvis bruke flere box-shadows med lettere farger for merkbare endringer. Derfor legger jeg til to blåaktige box-shadows til vårt bilde. Bare å bruke en box-shadow begrenser den blå nyansen til grensen av bildet vårt. For å spre den blå fargen over hele bildet, bruker jeg det som bakgrunn på :etter pseudo-element. Her er det endelige resultatet av alle disse filtrene:
Prøv å legge til en grønn eller rød fargetone på bildet i demoen.
Har du noen gang vært vitne til en litt overskyet kveld med sandpartikler suspendert i atmosfæren på grunn av vinden? I disse værforholdene har alt en gulaktig nyanse, og objekter ser ut til å være litt kjedelige. For å gjenskape den samme effekten trenger vi følgende CSS:
img filter: mettet (0.2); figur filter: kontrast (1.8) lysstyrke (1.1) mettet (1,5); figur: før z-indeks: 2; mix-blend-modus: multiplisere; boks-skygge: 0 0 100px rgba (0,0,0,0,5) innsett; bakgrunn: rgba (125, 100, 0, 0.3); figur: etter z-indeks: 3; blandings-modus: hardt lys; boks-skygge: 0 0 500px rgba (0,0,0,0,6) innsett; bakgrunn: rgba (198, 155, 0, 0.3);
Det første jeg gjør er å redusere bildemetningen. Begge :før og :etter pseudoelementer har gjennomsiktig gulaktig bakgrunn for å legge til ønsket fargetone. Bruker hardt lys blande modus på :etter gjør disen mer fremtredende.
De box-shadow På pseudoelementer øker fokuset på syklisten. Til slutt, søker høy kontrast, lysstyrke og metning filtrerer til vår figur elementet forsterker uklarheten.
I demonstrasjonen kan du prøve forskjellige verdier for ulike egenskaper for å se hvordan de påvirker sluttresultatet.
Det er ikke så vanskelig å redigere bilder i CSS. Hvis du holder poengene jeg diskuterte i denne opplæringen i tankene, vil du kunne lage noen fantastiske filtre på egen hånd.
For øvelse kan du eksperimentere med demoene i denne opplæringen eller prøve å gjenskape populære Instagram-filtre. Du kan også sjekke ut de forskjellige animasjonene og effektene som er tilgjengelige på Envato Marketplace, hvis du trenger noen bruksklare filtre.
Accentsconagua
