Opgelost Met CSS! Inkleuren SVG-Achtergronden

0
59

CSS wordt steeds krachtiger, en met functies zoals een CSS grid en aangepaste eigenschappen (ook bekend als CSS-variabelen), we zien wat echt creatieve oplossingen ontstaan. De mogelijkheden worden nog onderzocht op welke CSS kunt doen om het schrijven van UI is eenvoudiger, en dat is opwindend!

Een van hen is nu een van mijn favoriete CSS eigenschappen: filters. Laten we eens kijken hoe we gebruik kunnen maken van filters een probleem op te lossen die je tegenkomt bij het werken met SVG als een achtergrond afbeelding op een element.

CSS-Filters

Eerste, laten we beginnen met een overzicht van filters. Zij omvatten de volgende functies:

  • blur()
  • helderheid()
  • contrast()
  • drop-shadow()
  • grijstinten()
  • hue-rotate()
  • invert()
  • dekking()
  • verzadigen()
  • sepia()

Deze effecten kunnen ook worden bereikt met SVG filters of WebGL shaders, maar CSS-filters zijn de gemakkelijkste manier om het implementeren van elementaire transformaties in de meeste browser-efficiënte manier. Omdat ze zijn snelkoppelingen SVG-filtereffecten kunt u ook gebruik maken van het filter: url() en geef een filter-effect-ID op elk element. Als u wilt om te spelen met aangepaste filters, adviseer ik het controleren van cssfilters.co.

Het Probleem: het Bewerken SVG-Achtergronden

Ik hou van het gebruik van het SVG (scalable vector graphics) formaat voor het web design. SVG is een groot beeld formaat voor het web, en omdat het is gebaseerd op de code, het staat voor hoge kwaliteit responsieve en interactieve inhoud. Wanneer u het injecteren van SVG op de pagina hebt u toegang tot elk van de interne elementen en hun eigenschappen, zodat u om te animeren ze, update waarden (zoals kleur), en dynamisch injecteren van extra informatie. SVG is ook een grote icoon-formaat, vooral in plaats van het pictogram lettertypen, en in kleinere onderdelen van de GEBRUIKERSINTERFACE door de hoge kwaliteit (denk: retina-schermen) en klein formaat afbeelding (denk aan: performance).

Ik vind dat vaak, wanneer SVG is gebruikt voor deze kleinere elementen, of als een groot gedeelte van de afbeelding, het is opgenomen als een achtergrond afbeelding voor eenvoud. Het nadeel hiervan is dat de plugin werkt niet meer onder controle hebt als ontwikkelaar. Kunt u niet aanpassen individuele eigenschappen, zoals de vulkleur van een SVG-achtergrond, omdat het is behandeld, net als een afbeelding. Deze kleur raadsel opgelost kan worden met CSS! Filters aan de redding!

Helderheid Aanpassen

De eerste keer ontdekte ik de SVG achtergrond uitdaging was toen ik bezig was met een website die had witte SVG-pictogrammen voor het sociale deel pictogrammen die woonde op een achtergrond bepaald overeen te komen met die toepassing. Wanneer deze pictogrammen werden verplaatst op een witte achtergrond, ze waren niet meer zichtbaar. In plaats van het creëren van een nieuw icoon, of het wijzigen van de opmaak te injecteren inline SVG, kunt u gebruik maken van het filter: (helderheid).

Met de helderheid van het filter, een waarde groter dan 1 wordt het element helderder, en een waarde kleiner dan 1, wordt donkerder. Dus, we kunnen die licht SVG-de donkere, en vice versa!

Wat ik hierboven deed, was een donkere klasse met filter: voor de helderheid(0.1). U kunt ook het tegenovergestelde doen voor de donkere pictogrammen. Je kunt verlichten pictogrammen door het creëren van een lichte klasse met iets als filter: helderheid(100) of wat is geschikt voor uw behoeften.

Pictogrammen met een vulkleur van #000, – of rgb(0,0,0) zal niet oplichten. U moet een waarde groter dan 0 in elk van de rgb-kanalen. vullen: rgb(1,1,1) werkt prima met een hoge lichtsterkte, zoals helderheid(1000), maar zelfs helderheid(1000) zal niet werken op pure black. Dit is niet een probleem met lichte kleuren en wit.

Kleur Aanpassen

We hebben nu gezien hoe aan te passen lichte en donkere waarden met een helderheid() filter, maar dat betekent niet altijd voor ons het gewenste effect. Wat als we willen injecteren wat kleur in deze pictogrammen? Met CSS-filters, kunnen we dat doen. Een kleine hack is het gebruik van het sepia-filter samen met de hue-draaien, de helderheid en de verzadiging te maken elke kleur die we willen.

Van de witte, kunt u gebruik maken van de volgende mengsels te krijgen van de marine, blauw en roze kleuren hierboven:

.kleuren-roze {
filter: helderheid(0.5) sepia(1) hue-draaien(-70deg) verzadigen(5);
}

.inkleuren-navy {
filter: helderheid(0.2) sepia(1) hue-draaien(180deg) verzadigen(5);
}

.kleuren-blauw {
filter: helderheid(0.5) sepia(1) hue-draaien(140deg) verzadigen(6);
}

De wereld is jouw oester hier. SVG is slechts één use case voor meerdere filters. Je kunt dit toepassen op elk type media—afbeeldingen, gif ‘ s, video, iframes, enz., en de support is erg goed ook:

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
18* 15* 35 Geen 17 6*

Mobiele / Tablet

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

Een laatste opmerking hier is je te herinneren aan de gebruiker! Filters werken niet in Internet Explorer, dus stuur een zichtbaar beeld te stellen voor alle gebruikers (dus niet gebruik maken van een witte SVG-met een filter toegepast op een witte achtergrond, omdat je IE-gebruikers zal niets zien). Vergeet ook niet gebruik te maken van alternatieve tekst pictogram voor toegankelijkheid, en u zult golden deze techniek te gebruiken in uw eigen toepassingen!