Darstellungs-Effekte aus CSS3 werden alltagstauglich – Teil 3

Im heutigen Post zum Thema CSS 3 Effekte beschäftigen wir uns mit Farbverläufen. Diese sind ebenfalls beliebte Mittel, um auf Websites optische Auflockerung zu erzielen, etwa bei Hintergründen, bestimmten Inhalts-Containern oder Schaltflächen.

Musste der Webdesigner bisher auf Hintergrundgrafiken zurückgreifen um solche Effekte zu erzielen, kann zumindest im Safari -Browser, ebenso in Chrome und seit der Version 3.6 auch im Firefox eine entsprechende CSS Anweisung verwendet werden, um Farbverläufe zu erzielen. Die beiden Anweisungen für Safari/Chrome einerseits und Firefox andererseits unterscheiden sich ein wenig in ihrer Syntax, weshalb hier in erster Linie die Syntax basierend auf Firefox vorgestellt wird. Die Ergebnisse in der Ansicht sind jedoch identisch.

Die generische Anweisung für einen Farbverlauf im Firefox sieht wie folgt aus:


background:-moz-linear-gradient(position winkel farbe(n) stoppunkt(e));


Nacheinander:

• die Position gibt an, wo der Farbverlauf beginnt (ähnlich wie bei anderen Hintergrund-Anweisungen). Das kann top, left, bottom oder ein Pixelwert sein
• Der Winkel (in deg = degree = Grad) kann optional angeben werden, um die Art der Neigung des Farbverlaufs anzugeben
• Farbe(n) sind die Verlaufsfarben. Es können beliebig viele durch Kommata getrennt hintereinander geschrieben werden und sowohl Hexadezimalwerte, RGB-Werte oder reservierte Farbnamen benutzt werden
• Stoppunkte gibt das Ende des Farbverlaufs relativ zur Höhe oder Breite des Elements an, das den Farbverlauf besitzt. Sie werden direkt hinter die Farbe geschrieben und können Prozentwerte oder Pixel enthalten.

Schauen wir uns also mal das folgende Beispiel an:


.linear-gradient-container {
width: 450px;
height: 91px;
border: 1px solid #bbb;
background: -moz-linear-gradient(top left, blue 50px, green, yellow 80%, orange);
}


Der Farbverlauf beginnt in der linken oberen Ecke (ist damit diagonal), besteht aus 4 Farben (Blau, Grün, Gelb und Orange), wobei Blau einen Farbstopp nach 50% und Gelb bei 80% der Diagonalen hat.

Das Ergebnis ist dann dieser nette regenbogenfarbige Kasten unten:

Neben dem linearen Verlauf gibt es auch noch radiale Verläufe. Diese werden über die Anweisung


moz-radial-gradient


erzeugt und funktionieren ansonsten von der Syntax her analog wie die linearen Verläufe. Nehmen wir unsere Anweisung von oben und ersetzen linear durch gradient sowie top und left durch center, erhalten wir folgenden psychedelischen Kasten.

Zuletzt gibt es noch die Möglichkeit, wiederkehrende Muster mittels


-moz-repeating-linear-gradient()
-moz-repeating-radial-gradient()


zu erzeugen. Nehmen wir also unser erstes Beispiel und ersetzen die Attribute wie folgt


background: -moz-repeating-linear-gradient(top 45deg, #aaa, #aaa 5px, #ffc 5px, #ffc 10px);


bekommen wir dieses Muster.

Auf einer Website würde man natürlich so krasse Farbverläufe nicht zwingend einsetzen, sondern zurückhaltendere Kontraste verwenden. Möglich ist damit aber eine ganze Menge.

Für diejenigen, die die Farbverläufe gerne über eine schöne "Klicki-Bunti"-Oberfläche zusammenstellen, gibt es auf http://gradients.glrzad.com/#g-generator einen schönen Online-Generator für Farbverläufe. Dieser liefert dann neben der Mozilla-Version auch gleich die Syntax für Webkit, also Google und Safari mit.

Have fun!

Ach, und noch was: die IE Nutzer gucken auch hier leider mal wieder in die Röhre.
Daher sind die Kästen oben auch kein direktes Rendering, sondern Grafiken (die aber die exakte Ausgabe im Firefox zeigen) - man muss den armen Menschen mit dem falschen Browser ja zeigen, was sie verpassen.