Accentsconagua

Schneller Tipp CSS3-Farbverläufe verstehen

Code
Share

Das Erstellen eines Bildes nur zum Anzeigen eines Farbverlaufs ist unflexibel und wird schnell zu einer schlechten Praxis. Zum Zeitpunkt der Abfassung dieses Artikels waren sie leider möglicherweise noch erforderlich, aber hoffentlich nicht mehr lange. Dank Firefox und Safari / Chrome können wir jetzt mit minimalem Aufwand leistungsstarke Farbverläufe erstellen. In diesem Kurztipp zum Video werden einige Unterschiede in der Syntax untersucht, wenn Sie mit den Herstellerpräfixen -moz und -webkit arbeiten.


Abonniere unsere YouTube-Seite, um alle Video-Tutorials anzusehen!

Webkit

Mozilla und Webkit verwenden zwar in der Regel die gleiche Syntax für CSS3-Eigenschaften, stimmen jedoch bei Farbverläufen leider nicht ganz überein. Webkit war zuerst auf Steigungen ausgerichtet und verwendet die folgende Struktur:

 / * Syntax, entnommen aus: http://webkit.org/blog/175/introducing-css-gradients/ * / -webkit-gradient (,  [, ]?,  [, ] [, ] *) / * In der Praxis… * / background: -webkit-gradient (linear, 0 0, 0 100%, von (rot) bis (blau));

Machen Sie sich keine Sorgen, wenn Ihre Augen bei dieser Syntax glänzen. Meiner hat es auch getan! Beachten Sie, dass wir eine durch Kommas getrennte Liste von Parametern benötigen.

  • Welche art von gradienten? (linear)
  • X- und Y-Achsenkoordinaten, wo Sie beginnen sollen (0 0 - oder linke obere Ecke)
  • X- und Y-Achsenkoordinaten des Ziels (0 100% - oder linke untere Ecke)
  • Mit welcher Farbe? (von (rot))
  • Mit welcher Farbe schließen Sie ab? (bis (blau))

Mozilla

Firefox, das mit Version 3.6 Gradientenunterstützung implementiert hat, bevorzugt eine etwas andere Syntax.

 / * Syntax, entnommen aus: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ * / -moz-linearer Gradient ([ || ,]? ,  [, ] *) / * In der Praxis * / background: -moz-linearer Gradient (oben, rot, blau);
  • Beachten Sie, wie wir die Art des Verlaufs linear in die Herstellererweiterung eingefügt haben.
  • Wo soll der Farbverlauf beginnen? (oben - wir könnten auch in Grad gehen, wie in -45 Grad)
  • Mit welcher Farbe soll ich anfangen? (rot)
  • Mit welcher Farbe schließen Sie ab? (Blau)

Farbstopps

Was ist, wenn Sie keinen 100% Farbverlauf von einer Farbe zur anderen benötigen? Hier kommen Farbstopps ins Spiel. Eine übliche Designtechnik ist das Anwenden eines kurzen und subtilen Farbverlaufs wie folgt:

Beachten Sie den subtilen weiß-weißen Farbverlauf oben.

In der Vergangenheit bestand die Standardimplementierung darin, ein Bild zu erstellen, es als Hintergrund eines Elements festzulegen und es so einzustellen, dass es horizontal wiederholt wird. Mit CSS3 ist dies jedoch ein Kinderspiel. 

 Hintergrund: weiß; / * Fallback für ältere / nicht unterstützende Browser * / background: -moz-linear-gradient (top, #dedede, white 8%); Hintergrund: -webkit-gradient (linear, 0 0, 0 8%, von (#dedede), bis (weiß)); Bordüre: 1px durchgehend weiß;

Diesmal setzen wir den Farbverlauf auf 8% statt auf 100% (Standardeinstellung). Beachten Sie, dass wir auch einen oberen Rand anwenden, um den Kontrast zu erhöhen. das ist sehr verbreitet.

Wenn wir eine dritte (oder n-te) Farbe hinzufügen möchten, können wir Folgendes tun: 

 Hintergrund: weiß; / * Fallback für ältere / nicht unterstützende Browser * / background: -moz-linearer Farbverlauf (oben, #dedede, weiß 8%, rot 20%); Hintergrund: -Webkit-Gradient (linear, 0 0, 0 100%, von (#dedede)), Farbstopp (8%, Weiß), Farbstopp (20%, Rot);
  • Mit der -moz-Version geben wir an, dass wir bei 20% der Elementhöhe jetzt die Farbe Rot haben sollten.
  • Für -webkit verwenden wir color-stop und übergeben zwei Parameter: Wo soll der Stopp erfolgen und wie die Farbe aussehen soll.

Wichtige Hinweise zu CSS-Farbverläufen

  • Verwenden Sie sie so oft wie möglich. Wenn es für IE-Benutzer in Ordnung ist, eine durchgehende Farbe anzuzeigen, empfiehlt es sich, diese Methode zu verwenden.
  • IE6 / 7/8, Opera, Safari 3 und Firefox 3 können keine CSS3-Farbverläufe darstellen. Firefox- und Safari-Benutzer werden in der Regel häufig aktualisiert, daher ist dies kein so großer Deal.
  • Wenden Sie immer einen standardmäßigen, einfarbigen Hintergrund für Browser an, die die Herstellerpräfixe nicht verstehen.
  • Verwenden Sie niemals einen Rot-zu-Blau-Verlauf, wie ich es für die Beispiele getan habe.
  • Webseiten müssen nicht in jedem Browser gleich aussehen! :)

Danke fürs Lesen / Anschauen!

Code
×