Share
Tenk på en situasjon der du må ha høy kontrast, sløret eller lysere versjoner av bestemte bilder på nettstedet ditt. Før CSS-filtre var dine eneste alternativer enten å laste opp forskjellige versjoner av disse bildene eller manipulere bildene med JavaScript.
Med mindre du vil manipulere pikslene i det opprinnelige bildet, gir CSS-filtre en enkel vei ut. La oss starte denne opplæringen med en kort diskusjon av alle tilgjengelige filtre.
Dette filteret vil bruke en gaussisk sløret til bildene dine. Du må gi en lengdeverdi som bestemmer hvor mange piksler som må blandes inn i hverandre. Dette innebærer at en større verdi vil gi et mer uklart bilde. Husk at du ikke kan bruke prosentandel for å bestemme uklarheten. Hvis du ikke angir en parameter, blir verdien 0 brukt. Den riktige syntaksen for bruk av dette filteret er:
filter: uskarphet)
De uklarhet() filteret godtar ikke negative verdier.
Dette filteret vil bruke en lineær multiplikator til bildene dine, noe som gjør dem lysere eller dimmere enn de opprinnelige bildene. Den aksepterer et tall så vel som en prosentverdi. Ved 0% får du et helt svart bilde. Ved 100% får du det opprinnelige bildet uten endringer. Høyere verdier vil resultere i lysere bilder. En tilstrekkelig høy verdi vil gjøre bildet stort sett hvitt. Den riktige syntaksen for å bruke dette filteret er:
filter: lysstyrke ([| ])
Dette filteret godtar heller ikke noen negative verdier.
Dette filteret endrer kontrasten på bildene dine. På samme måte som lysstyrkefilteret, aksepterer det et tall så vel som prosentverdier. En 0% verdi vil resultere i et helt grå bilde. Innstilling av verdien til 100% har ingen effekt. Verdier over 100% vil produsere bilder med høy kontrast. Du har ikke lov til å bruke negative verdier med kontrast() filter. Den riktige syntaksen for å bruke dette filteret er:
filter: kontrast ([| ])
Nesten alle av dere har kanskje brukt bokseskygger minst en gang. Problemet med bokseskygger er at de er boxete. Du kan ikke bruke dem til å lage skygger av uregelmessige former. På den annen side, slagskygge filter skaper skygger rundt grensen til et bilde. Det er i utgangspunktet en sløret versjon av alfaskanalen til inngangsbildet. Den riktige syntaksen som skal brukes slagskygge er:
filter: drop-shadow (2,3 ? )
De to første lengdeverdiene kreves, og de stiller horisontal og vertikal skyggeforskyvning. Den tredje
Dette filteret vil gjøre bildene dine gråtoner. En 0% verdi vil la bildet være uendret, mens en 100% verdi vil gjøre bildet fullstendig gråtoner. Enhver verdi mellom disse to effektene vil være en lineær multiplikator på denne effekten. Du kan ikke bruke negative verdier med gråtoner () filter. Den riktige syntaksen for å bruke dette filteret er:
filter: gråtoner ([| ])
Dette filteret vil bruke en fargetrykk på bildene dine. Parameteren (bestått som en vinkel) bestemmer antall grader rundt fargesirkelen bildene vil bli justert. Med en 0deg-verdi blir det endelige bildet uendret. Hvis du angir en verdi utover 360deg, brytes filteret bare rundt. Den riktige syntaksen for å bruke dette filteret er:
filter: hue-rotere ()
Dette filteret vil invertere bildene dine. Mengden inversjon avhenger av verdien av parameteren du passerte. En 0% inversjon har ingen effekt på bildet. På den annen side vil en verdi på 100% helt invertere bildet. En 50% verdi vil gi et helt grått bilde. Enhver verdi mellom ekstremerne vil være en lineær multiplikator av effekten. Dette filteret godtar ikke negative verdier. Den riktige syntaksen for å bruke inverterer () filteret er:
filter: invert ([| ])
Opacity-filteret gjelder gjennomsiktighet for å legge inn bilde. En verdi på 0% innebærer at du vil ha 0% opasitet, noe som resulterer i fullstendig gjennomsiktighet. På samme måte resulterer en 100% verdi i et helt ugjennomsiktig bilde.
Filteret ligner opacitetsegenskapen i CSS. Den eneste forskjellen er at i noen tilfeller kan noen nettlesere gi maskinvareakselerasjon for bedre ytelse. Den riktige syntaksen for å bruke dette filteret er:
filter: opasitet ([| ]);
Dette filteret bestemmer metningen av bildene dine. Metningen i seg selv avhenger av verdien av parameteren. Du kan ikke bruke negative verdier med dette filteret. Ved 0%, den minste mulige verdien, vil bildet bli fullstendig umettet. Med en metningsverdi på 100%, forblir bildet uendret. For å få supermette bilder må du bruke verdier over 100%. Den riktige syntaksen for å bruke dette filteret er:
filter: saturate ([| ])
Dette filteret vil forvandle dine originale bilder til sepia. Ved 100% verdi får du en komplett sepia, og en 0% verdi vil ikke ha noen effekt på bildet. Alle andre verdier som ligger i mellom vil være lineære multiplikatorer av dette filteret. Du har ikke lov til å bruke negative verdier med dette filteret. Den riktige syntaksen for å bruke sepia () filteret er:
filter: sepia ([| ])
Det kan være situasjoner når du vil bruke dine egne filtre på bilder. De url filteret tar plass til en XML-fil som angir et SVG-filter. Det aksepterer også et anker til et bestemt filterelement. Her er et eksempel som resulterer i posterisering av bildet vårt:
// Filtret // Kreves CSS for å bruke dette filterfilteret: url (#posterize);
Det endelige resultatet etter bruk av filteret vil se ut som det følgende bildet:
Hvis du ikke er fornøyd med utgangen av et enkelt filter, kan du bruke en kombinasjon av dem på et enkelt bilde. Ordren der du bruker filtrene, kan produsere marginalt forskjellige resultater. Flere filtre kan brukes på følgende måte:
filter: sepia (0,8) kontrast (2); filter: mettet (0,5) fargetone (90deg) lysstyrke (1,8);
Når du bruker flere filtre sammen, brukes den første filterfunksjonen i listen på originalbildet. Senere filtre blir brukt på utgangen av de forrige filtre. Denne demonstrasjonen viser to andre filterkombinasjoner i aksjon.
I noen spesielle tilfeller kan rekkefølgen på filtre produsere helt forskjellige resultater. For eksempel bruker sepia () etter gråtoner () vil produsere en sepia-utgang, og bruke gråtoner () etter sepia () vil resultere i en gråskalautgang.
Filteregenskapen kan animeres. Med den riktige kombinasjonen av bilde og filtre kan du utnytte denne funksjonen for å skape noen fantastiske effekter. Vurder kodestykket nedenfor:
@keyframes day-night 0% filter: hue-rotate (0deg) lysstyrke (120%); 10% filter: hue-rotate (0deg) lysstyrke (120%); 20% filter: hue-rotate (0deg) lysstyrke (150%); 90% filter: hue-roter (180deg) lysstyrke (10%); 100% filter: hue-roter (180deg) lysstyrke (5%);
Jeg bruker hue rotering () og lyshet () filtrere sammen for å lage en illusjon av dag og natt. Det opprinnelige bildet selv har en oransje fargetone. For opptil 20% av animasjonen øker jeg lysstyrken gradvis og holder nyanse-rotasjonen null. Dette skaper effekten av en solfylt dag. Når animasjonen avsluttes, roterer jeg fargen med 180 grader. Dette resulterer i en blå nyanse. Kombinere dette med svært lav lysstyrke skaper effekten av natten.
I tillegg til de 11 filtre vi diskuterte ovenfor, er det også a tilpasset() filter. Det lar deg lage helt forskjellige typer effekter ved hjelp av shaders. Det er noen problemer med tilpasset() filtre som har stanset deres utvikling. Adobe jobber aktivt for å finne løsninger på problemer som oppstår når du bruker tilpasset() filtre. Forhåpentligvis vil de snart være tilgjengelige for utviklere å bruke i sine prosjekter.
La oss nå komme tilbake på sporet. Filtre brukes på alle delene av målelementet, inkludert tekst, bakgrunn og grenser. Her er en grunnleggende demonstrasjon for deg å prøve ut en kombinasjon av filtre på ulike bilder.
Som du så i de to siste seksjonene, kan CSS-filtre helt endre bildene de blir brukt på. Men noen ganger er det ikke nok. I neste del av denne serien diskuterer jeg hvordan du bruker blandemoduser til å redigere bilder.
Accentsconagua