Løst Med CSS! Colorizing SVG-Bakgrunner

0
71

CSS er å få stadig kraftigere, og med funksjoner som CSS rutenett og egendefinerte egenskaper (også kjent som CSS variabler), vi ser noen virkelig kreative løsninger dukker opp. Mulighetene er fortsatt bli utforsket på hva CSS kan gjøre for å gjøre skriftlig UI er enklere, og det er spennende!

En av disse er nå en av mine favoritt CSS funksjoner: – filtre. La oss se på hvordan vi kan bruke filtre til å løse et problem du har kanskje møtt når du arbeider med SVG som bakgrunnsbilde på et element.

CSS-Filtre

La oss først starte med en oversikt over filtre. De inkluderer følgende funksjoner:

  • blur()
  • lysstyrke()
  • kontrast()
  • drop-shadow()
  • gråtoner()
  • hue-rotate()
  • inverter()
  • dekkevne()
  • mette()
  • sepia()

Disse effektene kan også oppnås med SVG-filtre eller WebGL shaders, men CSS-filtre er den enkleste måten å gjennomføre grunnleggende endringer i den mest nettleser-effektiv måte. Fordi de er snarveier til SVG filtereffekter, du kan også bruke filter: url (), og angi et filter effekt ID på hvilket som helst element. Hvis du ønsker å spille rundt med tilpassede filtre, anbefaler jeg å sjekke ut cssfilters.co.

Problemet: Redigering av SVG-Bakgrunner

Jeg elsker å bruke SVG (scalable vector graphics) format for web-design. SVG er et flott bilde format for web, og siden den er basert på kode, det gir mulighet for høy kvalitet responsiv og interaktivt innhold. Når du injiserer SVG over på siden, og du har tilgang til hver sin interne elementer og deres egenskaper, slik at du kan animere dem, oppdatere verdier (for eksempel farge), og dynamisk injisere mer informasjon. SVG er også en stor ikon format, spesielt i stedet for ikon skrifter, og i mindre UI-elementer på grunn av sin høye kvalitet (tenk: retina-skjermer) og små bildestørrelse (tenk: ytelse).

Jeg finner det ofte, når SVG er brukt for disse mindre elementer, eller som et stort område av illustrasjonen, det er inkludert som et bakgrunnsbilde for enkelhets skyld. Ulempen her er at SVG er ikke lenger under din kontroll som en utvikler. Du kan ikke justere individuelle egenskaper, som å fylle farge, en SVG-bakgrunn, fordi det er behandlet akkurat som en hvilken som helst bilde. Denne fargen conundrum kan løses med CSS! Filtre til unnsetning!

Justere Lysstyrke

Første gang jeg oppdaget SVG bakgrunn utfordringen var da jeg jobbet på en nettside som hadde hvit SVG-ikoner for sosiale dele ikoner som bodde på bakgrunn fast bestemt på å matche programmet. Når disse ikonene ble flyttet over på en hvit bakgrunn, de var ikke lenger synlig. I stedet for å opprette et nytt ikon, eller endre markup for å injisere inline SVG, kan du bruke filter: lysstyrke().

Med lysstyrken filter, en verdi som er større enn 1 gjør element lysere, og noen verdi mindre enn 1 gjør det mørkere. Så, vi kan gjøre disse lett SVG er mørkt, og vice versa!

Hva jeg gjorde ovenfor var å lage en mørk klasse med filter: lysstyrke(0.1). Du kan også gjøre det motsatte for mørkere ikoner. Du kan lette ikoner ved å lage en lys klasse med noe sånt filter: lysstyrke(100) eller hva som er egnet til dine behov.

Ikoner med en fyllfarge av #000, – eller en rgb(0,0,0) vil ikke lyse. Du må ha en verdi som er større enn 0 i noen av rgb-kanalane. fyll: rgb(1,1,1) fungerer bra med en høy lysstyrke verdi slik som lysstyrke(1000), men selv lysstyrke(1000) ikke vil fungere på ren svart. Dette er ikke et problem med lyse farger og hvit.

Justering Av Farge

Vi har nå sett hvordan å justere lys og mørke verdier med en lysstyrke () – filter, men som ikke alltid får med oss den ønskede effekten. Hva hvis vi ønsker å tilføre litt farge inn i disse ikonene? Med CSS-filtre, kan vi gjøre det. En liten hack er å bruke sepia-filter sammen med hue-rotere, lysstyrke og fargemetning for å lage alle farger vi vil ha.

Fra hvitt, kan du bruke følgende blandinger for å få marinen, blå og rosa farger ovenfor:

.fargelegge-rosa {
filter: lysstyrke(0.5) sepia(1) hue-rotate(-70deg) mette(5);
}

.fargelegge-navy {
filter: lysstyrke(0.2) sepia(1) hue-rotate(180deg) mette(5);
}

.fargelegge-blå {
filter: lysstyrke(0.5) sepia(1) hue-rotate(140deg) mette(6);
}

Verden er din østers her. SVG er bare en use case for flere filtre. Du kan bruke denne til en annen medietype—bilder, gif-bilder, video, iframes, etc., og støtte er ganske bra, for:

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
18* 15* 35 Ingen 17 6*

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
6.0-6.1* 37* Ingen 4.4* 64 57

En endelig notat her er å huske din bruker! Filtre vil ikke fungere i Internet Explorer, så vennligst send et synlig bilde til alle brukerne (dvs. ikke bruk en hvit SVG-med en anvendt filter på en hvit bakgrunn, fordi IE-brukere vil ikke se noe som helst). Husk også å bruke alternativ tekst for ikon tilgjengelighet, og du vil være i golden til å bruke denne teknikken i dine egne programmer!