Gelöst Mit CSS! Einfärben der SVG-Hintergründe

0
29

CSS wird heute immer leistungsfähiger, und mit features wie CSS-raster und benutzerdefinierte Eigenschaften (auch bekannt als CSS-Variablen), sehen wir einige wirklich kreative Lösungen entstehen. Die Möglichkeiten werden derzeit noch untersucht, was CSS tun können, um das schreiben von UI ‘ s einfacher, und das ist spannend!

Einer von denen ist jetzt einer meiner Lieblings-CSS-Funktionen: Filter. Schauen wir, wie wir können Filter verwenden, um ein problem zu lösen, die Sie haben können festgestellt werden, wenn die Arbeit mit SVG als Hintergrundbild auf ein element.

CSS-Filter

Erste, beginnen wir mit einer übersicht über die Filter. Sie beinhaltet folgende Funktionen:

  • blur()
  • Helligkeit (Brightness)
  • Kontrast()
  • drop-shadow()
  • Graustufen – ()
  • hue-rotate()
  • invert()
  • Deckkraft()
  • sättigen()
  • sepia()

Diese Effekte können auch erzielt werden mit SVG-filtern oder WebGL-Shadern, aber CSS-Filter sind am einfachsten zu implementieren sind grundlegende Veränderungen in den meisten browser-effiziente Art und Weise. Weil Sie Verknüpfungen von SVG-filter-Effekte, Sie können auch filter: url() und geben Sie einen filter-Effekt-ID auf jedem element. Wenn Sie wollen spielen, um mit benutzerdefinierten filtern, die ich empfehlen, Check-out cssfilters.co.

Das Problem: das Bearbeiten von SVG-Hintergründe

Ich Liebe die Verwendung von SVG (scalable vector graphics) format für web-design. SVG ist ein tolles Bild-format für das web, und seit es ist basierend auf code, der es ermöglicht hohe Qualität ansprechende und interaktive Inhalte. Wenn Sie Spritzen SVG auf die Seite, haben Sie Zugriff auf jedes Ihrer internen Elemente und deren Eigenschaften, so dass Sie zu animieren, update-Werte (wie Farbe) und dynamisch injizieren zusätzliche Informationen. SVG ist auch ein großes Symbol-format, vor allem anstelle von icon fonts und in kleineren UI-Elementen durch die hohe Qualität (denke: retina-Bildschirme) und dem kleinen Bild der Größe (denke: performance).

Ich finde, dass oft, wenn SVG ist für diese kleineren Elemente, oder als eine große Fläche der Abbildung, ist es als hintergrund Bild für Einfachheit. Der Nachteil hierbei ist, dass der SVG nicht mehr unter Kontrolle, wie ein Entwickler. Sie können nicht einstellen, einzelne Eigenschaften wie Füllfarbe, ein SVG-hintergrund, weil es behandelt wird wie jede Bild. Diese Farb-Rätsel gelöst werden kann mit CSS! Filter zur Rettung!

Einstellen Der Helligkeit

Das erste mal entdeckte ich den SVG-hintergrund Herausforderung war, als ich an einer website arbeiten, die hatten weiße SVG-icons für social share icons, die lebte auf einem hintergrund bestimmt zu entsprechen, die Anwendung. Wenn diese Symbole verschoben wurden, auf einem weißen hintergrund, Sie waren nicht mehr sichtbar. Anstelle der Erstellung eines neuen symbols oder das ändern der markup-Code zu injizieren, die inline-SVG, können Sie filter verwenden: Helligkeit().

Mit der Helligkeit filter, wird jeder Wert größer als 1 bewirkt, dass das element heller, und beliebigen Wert kleiner als 1 dunkelt. Also, wir können diese Licht SVG ist dunkel, und Umgekehrt!

Was ich Tat, war schaffen eine dunkel-Klasse mit filter: Helligkeit(0.1). Sie können auch das Gegenteil tun für dunklere icons. Sie können aufhellen Symbole durch die Schaffung einer light-Klasse mit so etwas wie filter: Helligkeit(100) – oder was auch immer geeignet ist, um Ihre Bedürfnisse.

Symbole mit einer Füllfarbe #000, oder rgb(0,0,0) nicht erhellen. Sie müssen einen Wert größer als 0 in jedem der rgb-Kanäle. fill: rgb(1,1,1) funktioniert Super mit einem high-brightness-Wert, wie die Helligkeit(1000), aber auch die Helligkeit(1000) funktioniert nicht auf reines schwarz. Dies ist nicht ein Problem mit hellen Farben und weiß.

Justierung Der Farbe

Wir haben nun gesehen, wie Sie Licht und dunkel-Werte mit einer Helligkeit (- filter), aber das bedeutet nicht immer, uns den gewünschten Effekt. Was ist, wenn wir wollen, injizieren Sie etwas Farbe in die icons? Mit CSS-filtern, können wir das tun. Ein kleiner hack ist die Verwendung des sepia-filter zusammen mit hue-drehen, Helligkeit, und Sättigung für jede Farbe, die wir wollen.

Von weiß, können Sie die folgenden Mischungen zu erhalten, die Marine, blau und rosa Farben vor:

.Kolorieren-pink {
filter: Helligkeit(0.5) sepia(1) hue-rotate(-70deg) zu sättigen(5);
}

.Kolorieren-navy {
filter: Helligkeit(0.2) sepia(1) hue-rotate(180GRAD) zu sättigen(5);
}

.Kolorieren-blau {
filter: Helligkeit(0.5) sepia(1) hue-rotate(140deg) sättigen(6);
}

Die Welt ist Ihre Auster hier. SVG ist nur ein Anwendungsfall für mehrere Filter. Sie können in jedem media-Art—Bilder, gifs, Videos, iframes usw., und support ist auch ganz gut:

Dieser browser support-Daten von Caniuse, welche hat mehr Details. Eine Zahl zeigt an, dass browser die Funktion unterstützt in dieser version.

Desktop

ChromeOperaFirefoxIEEdgeSafari
18* 15* 35 Keine 17 6*

Mobile / Tablet

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

Eine Letzte Anmerkung hier ist daran zu erinnern, Ihre user! Filter funktioniert nicht in Internet Explorer, so senden Sie bitte ein sichtbares Bild um, um alle Ihre Benutzer (d.h. nicht mit einem weißen SVG mit einem angewendeten filter auf einem weißen hintergrund, weil Ihr IE-Benutzer werden nichts sehen). Auch, vergessen Sie alternativen text für das Symbol der Zugänglichkeit, und Sie werden golden verwenden Sie diese Technik in eigene Anwendungen!