Redigering av bilder i CSS Blandingsmodus

I den forrige veiledningen i denne serien diskuterte vi hvordan du bruker CSS-filtre til å redigere bilder. Mens filtre kan gi gode resultater, er de begrenset til bare ett lag.

La oss si at du har et bilde, og du vil overlappe det med rød farge. Du kan ikke gjøre det med filtre. Men blandingsmodusene er perfekte for denne jobben. De er faktisk ment å ta forgrunns- og bakgrunnsfargeverdier, utføre noen beregninger, og deretter returnere en endelig farge. Det endelige bildet du får er resultatet av alle slike beregninger over hver overlappende piksel.

Blendingsmodus lar deg blande bilder og farger, men også tekst og bilder. I denne opplæringen vil jeg vise hvordan du bruker blandemoduser til å manipulere bilder og lage noen kule effekter.

Tilgjengelige blandemoduser

• Normal: I denne modusen vil den endelige fargen være toppfargen. Verdien av bunnfarge vil ikke ha noen effekt på sluttresultatet.
• Multiplisere: I denne modusen multipliseres de øverste og nederste fargene for å få den endelige fargen. Den resulterende fargen vil alltid være minst like mørk som en av bestanddelene. Dette innebærer at med et svart lag vil det endelige resultatet alltid være svart. Å bruke et hvitt lag har ingen effekt på det endelige resultatet.
• Skjerm: I denne modusen oppnås den endelige fargen ved å invertere topp- og bunnfargen, multiplisere dem, og deretter omvendt resultatet. Den endelige fargen vil alltid være like lys som topp- eller bunnfargen. Dette innebærer at bruk av et hvitt lag vil slå alt hvitt, og et svart lag har ingen effekt på sluttresultatet.
• overlegg: I denne modusen oppnås den endelige fargen ved å enten multiplisere eller vise de opprinnelige fargene basert på bunnfargen. Hvis den nederste farge er mørkere, blir de opprinnelige fargene multiplisert, og hvis den er lettere, blir de skjermet. Høydepunktene og skyggene i bunnfargen blir bevaret i denne modusen.
• mørkere: Denne er ganske grunnleggende. Den endelige fargen i denne modusen er den mørkere fargen mellom topp- og bunnlag.
• lysere: Dette er omvendt av mørkere, og den endelige fargen er derfor den lettere fargen mellom topp- og bunnlagene.
• Farge dodge: I denne modusen er den nederste farge dividert med den inverse av toppfargen for å få den endelige verdien. Du vil ikke se noen endringer med en svart bakgrunn i denne modusen. Hvis toppfargen er den inverse av bunnfargen, vil den endelige fargen være en fullstendig opplyst versjon av toppfargen.
• Farge-burn: Den endelige fargen i denne modusen er produsert ved å dividere den inverse av bunnfarge med den øverste fargeværdien og invertere den resulterende verdien. Hvis toppfargen er hvit, vil du ikke se noen endringer. En toppfarge som er den inverse av bunnfargen, vil resultere i et helt svart bilde.
• Hardt lys: Hard-light-modus er den inverse overleggsmodus. I dette tilfellet, hvis toppfargen er mørkere, blir de opprinnelige fargene multiplisert, og hvis den er lettere, blir de skjermet. Det er i utgangspunktet overleggsmodus med lagene byttet.
• Mykt lys: Denne modusen er akkurat som hardt, men gir mykere endelige resultater.
• Forskjell: Denne modusen trekker verdien av den mørkere fargen fra lysere fargen for å få den endelige verdien. Dette innebærer at fargesvart vil ha ingen effekt, mens hvitt vil invertere fargen på det andre laget.
• Utelukkelse: Denne blandingsmodus ligner forskjellen, men det endelige resultatet har en lavere kontrast.
• Hue: Denne blandingsmodusen bruker fargen på toppfarge og metning og lysstyrke i bunnfargen for å skape den endelige fargen.
• metning: I denne modusen har den endelige fargen metningen av toppfargen og fargetone og lysstyrke i bunnfargen.
• Farge: Denne blandemodus gir en endelig farge med fargetone og metning av toppfargen og lysstyrken på bunnfargen. Denne modusen bevarer de grå nivåene i bunnfargen og kan brukes til å tynne fargede bilder.
• lysstyrken: Den endelige fargen i denne modusen har lysstyrken på toppfargen, mens fargen og metningsverdiene kommer fra bunnfargen. Det er akkurat som fargemodus, men med lagene byttes.

I tillegg er det to måter å bruke blandemodi. Du kan bruke mix-blanding-modus, som bestemmer hvordan et elements innhold blandes med innholdet i elementet under det, så vel som med elementets bakgrunn. De Bakgrunnen-blanding-modus, på den annen side bestemmer hvordan et elements bakgrunnsbilder blander seg med hverandre og med elementets bakgrunnsfarge.

Du kan spille med denne demoen for å se hvordan forskjellige bilder og farger interagerer, basert på blandingsmodusene som brukes. Jeg har også vedlagt et bilde nedenfor som viser blanding av en gulaktig farge med kildebildet.

Opprette uregelmessige grenser

Mens bildene generelt er mest rektangulære, kan bilder med uregelmessige grenser gjøre dem visuelt mer tiltalende og gi dem en helt annen betydning. Tenk på dette bildet av en skallet ørn blandet med kartet over USA. Det betyr de amerikanske verdiene som er representert av den skallede ørnen. Du kan også kombinere noen andre bilder på samme måte.

Her har jeg kombinert to bilder på en slik måte at sluttresultatet har formen på det første bildet og farger på det andre bildet. Hvilken blandingstilstand (er) tror du kan oppnå denne effekten? 

Et hint her er at kartet er alt svart og hvitt. Så, hvilken blandingstilstand vi bestemmer oss for å bruke, må gjemme hele delen over den hvite delen og vise hele delen over den svarte delen. Lighten-blendmodus gjør denne jobben perfekt. Siden fargen hvit er lettere sammenlignet med fargene i ørnen, skjuler den ørnen når den strekker seg utover USAs kart. 

Du bør prøve å gjette den andre blandingsmodusen som kan oppnå denne effekten som en øvelse. Du kan prøve forskjellige blandemoduser i denne øredemoen for å se om du gjettet blandemodus på riktig måte. 

Blending fargerike gradienter

Tro det eller ikke, det fargerike bildet nedenfor er resultatet av nøye utvalgte gradienter og blandemoduser. Du kan sveve over bildet for å se originalversjonen.

Hvis du vil gjenskape denne effekten, må du begynne med et bilde som har en mørk bakgrunn for best resultat. Deretter bestemmer du fargene du vil blande inn og lager en lineær gradient med alle de fargene. Du kan eventuelt legge til flere gradienter i forskjellige vinkler. Til slutt, sett den første Bakgrunnen-blanding-modus til lysstyrke. Din siste CSS bør se slik ut:

div (bakgrunn: url ('image-url'), lineær gradient (rød, oransje, gul, grønn, blå, indigo, fiolett), lineær gradient (til høyre, rød, oransje, gul, grønn, blå, indigo , fiolett); bakgrunnsmessig modus: lysstyrke, overlegg; // Flere CSS-regler

Du bør eksperimentere med forskjellige blandingstilstander og bilder i den opprinnelige demoen for å finne ut den beste kombinasjonen av blandemoduser for forskjellige typer bilder.

Blending tekst sammen

Blandingsmodus er ikke begrenset til bilder. Du kan også bruke blandemodi på et stykke tekst også. I bildet nedenfor har jeg brukt en blandemodus til alle tegnene samt bakgrunnsbildet.

Tegnene bruker mix-blanding-modus eiendom, og kroppen bruker Bakgrunnen-blanding-modus. Her er relevant CSS:

kropp bakgrunn: # D63 url ('image-url') no-repeat; bakgrunnsblandingsmodus: multiplisere; bakgrunnsstørrelse: deksel;  h1 span mix-blend-modus: hardt lys;  

Som med tidligere demoer, vil jeg foreslå at du eksperimenterer med ulike blandemoduser i denne demoen også.

Siste tanker

Med litt fantasi er mulighetene med blandingsmodus uendelige. Jeg håper denne opplæringen har lært deg noe nyttig om blandingstilstander og bilderedigering. Fortsett å praktisere, og du vil bli veldig god til å bruke forskjellige blandemoduser.

Hvis du har opprettet noe interessant med blandemoduser, vennligst del arbeidet ditt i kommentarene nedenfor.