Löst Med CSS! Färglägga SVG Bakgrund

0
64

CSS är att få allt starkare, och med funktioner som CSS nätet och anpassade egenskaper (även känd som CSS variabler), ser vi några riktigt kreativa lösningar att växa fram. Möjligheterna är fortfarande utforskas på vad CSS kan göra för att göra skriva UI är enklare, och det är spännande!

En av dem är nu en av mina favorit CSS-funktioner: filter. Låt oss titta på hur vi kan använda filter för att lösa ett problem som du kan ha stött på när man arbetar med SVG bilden som bakgrundsbild på ett element.

CSS-Filter

Låt oss först börja med att med en översikt av filter. De har följande funktioner:

  • blur()
  • ljusstyrka()
  • kontrast()
  • drop-shadow()
  • gråskala()
  • hue-rotera()
  • invertera()
  • opacitet()
  • mätta()
  • sepia()

Dessa effekter kan också uppnås med SVG-filter eller WebGL shaders, men CSS-filter är det enklaste sättet att genomföra grundläggande förändringar i de flesta webbläsare-effektivt sätt. Eftersom de är genvägar SVG-filter, du kan också använda filter: url() och ange ett filter effekt ID på alla element. Om du vill leka med anpassade filter, rekommenderar jag att kolla in cssfilters.co.

Problemet: Redigera SVG Bakgrund

Jag älskar att använda SVG (scalable vector graphics) format för webbdesign. SVG är ett bra bildformat för webben, och eftersom den är baserad på koden, gör det möjligt för hög kvalitet lyhörd och interaktivt innehåll. När du injicerar SVG på sidan, du har tillgång till var och en av dess inre delar och deras egenskaper, så att du kan animera dem, uppdatera värden (som färg), och dynamiskt skjuta till ytterligare information. SVG är också en stor ikon-format, särskilt istället för ikonen typsnitt, och i mindre UI-element på grund av sin höga kvalitet (tänk: retina-skärmar) och små bildstorlek (tänk: prestanda).

Jag tycker att det ofta, när SVG används för dessa mindre element, eller ett stort område av bilden, det ingår som en bakgrundsbild för enkelhet. Nackdelen med detta är att SVG är inte längre under din kontroll som utvecklare. Du kan inte anpassa enskilda egenskaper, som fyllningsfärg, av en SVG bakgrund eftersom det behandlas precis som vilken bild som helst. Denna färg gåta kan vara löst med CSS! Filter till undsättning!

Justera Ljusstyrka

Första gången jag upptäckte SVG bakgrund utmaning var när jag arbetade på en hemsida som hade vita SVG-ikoner för sociala aktie ikoner som bodde på en bakgrund bestämmas så att det motsvarar ansökan. När dessa ikoner var flyttat till en vit bakgrund, de var inte längre synlig. Istället för att skapa en ny ikon eller ändra kod för att injicera inline SVG, kan du använda filter: ljusstyrkan().

Med ljusstyrkan filtret, något värde som är större än 1 gör elementet ljusare och något värde som är mindre än 1 gör det mörkare. Så, vi kan göra dessa ljus SVG är mörkt, och vice versa!

Vad jag gjorde ovan var att skapa en mörk klass med filter: ljusstyrka(0.1). Du kan också göra tvärtom för mörkare ikoner. Du kan lätta ikoner genom att skapa en lätt klass med något som filter: ljusstyrka(100) eller vad som är lämpligt för dina behov.

Ikoner med en fylla färgen #000, eller rgb(0,0,0) kommer inte att lysa. Du måste ha ett värde större än 0 i någon av rgb-kanaler. fyllning: rgb(1,1,1) fungerar bra med en hög ljusstyrka som ljusstyrka(1000), men även ljusstyrkan(1000) kommer inte att fungera på rent svart. Detta är inte en fråga med ljusa färger och vitt.

Justera Färg

Vi har nu sett hur du vill justera ljus och mörka värden med en ljusstyrka() filter, men som inte alltid får önskad effekt. Vad händer om vi vill tillföra lite färg till de ikoner? Med CSS-filter, kan vi göra det. En liten hacka på är att använda sepia filter tillsammans med nyans-rotera, ljusstyrka och färgmättnad för att skapa vilken färg vi vill ha.

Från vit, kan du använda följande blandningar för att få navy, blå och rosa färger ovan:

.färga-rosa {
filter: ljusstyrka(0.5) sepia(1) hue-rotera(-70deg) mätta(5);
}

.färga-navy {
filter: ljusstyrka(0.2) sepia(1) hue-rotera(180deg) mätta(5);
}

.färga-blå {
filter: ljusstyrka(0.5) sepia(1) hue-rotera(140deg) mätta(6);
}

Världen är din oyster här. SVG är bara en användning fallet för flera filter. Du kan tillämpa detta till någon typ av media—bilder, gif-bilder, video, iframes, etc., och stöd är ganska bra också:

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
18* 15* 35 Inga 17 6*

Mobil / Surfplatta

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

En sista anmärkning här är att komma ihåg ditt användar! Filter kommer inte att fungera i Internet Explorer, så skicka en synlig bild till alla dina användare (dvs inte använda en vit SVG med ett filter tillämpas på en vit bakgrund, eftersom din IE-användare kommer inte att se någonting alls). Kom också ihåg att använda alternativ text för ikonen tillgänglighet, och du kommer att vara golden för att använda denna teknik i dina egna program!