CSS3 Gradienten

Gradienten sind einer der besten Effekte, die Sie informationellen Webseiten hinzufügen können, da sie nicht ablenken sind. Sie könne Gradienten für Safari, Chrome und Firefox hinzufügen; damit haben Sie die Hälfte Ihrer Besucher abgedeckt.

Hier ist eine Schnappschuss von Firefox mit dem CSS3 Gradienten-Effekt:

Die Syntax für CSS3 Lineare Gradienten unterscheidet sich zwischen Firefox und Safari/Chrome.
   Firefox Linearer Gradient:
-moz-linear-gradient(<point> || <angle>, color-stops)
   Safari, Chrome Linearer Gradient
-webkit-gradient(linear, <point>, color-stops )

* Punkt oder Winkel: Das wird benutzt, um den Startpunkt des Gradienten zu bestimmen. Der Wert kann Prozent (%), Pixeln, oder "left", "center" oder "rechts" für horizontale und "top", "center" oder "bottom" für vertikale Position sein. Wenn eine horizontale oder vertikale Position nicht angegeben wird, ist der Wert automatisch "center" oder 50%. In Firefox werden auch Winkelwerte akzeptiert, wie z.B. 45deg.
* Color-stops: Farben die den Start und das Ende des Verlaufs des Gradienten angeben. Wenn mehr als zwei Farben ohne expliziten Stopp-Wert angegeben werden, wird der Gradient von einer Farbe bis zur nächsten gleichmäßig verlaufen bis zu endgültigen Stopp-Farbe.
      - In Firefox befolgt jeder Farbstopp die folgenden Syntax: <Farbe> [ <Prozent> | <Länge> ]. Wenn ein Prozentwert (0 bis 100%) oder ein Längenwert (0.0 bis 1.0) nach dem Farbnamen angegeben wird, wird die vorherige Farbe zu der Stoppfarbe an diesem Stopp-Punkt verlaufen. Wenn kein Wert angegeben wird, wird die Farbe gleichmäßig von der Startfarbe bis zur Stoppfarbe verlaufen.
      - In Safari befolgt jeder Farbstopp die folgenden Syntax: color-stop(Wert, Farbe). Wert ist entweder eine Prozentangabe (0 bis 100%) oder Längenwert (0 bis 1.0) oder from(Farbe) und to(Farbe). Die beiden letzten sind Kurz-Funktionen gleichbedeutend mit color-stop(0, Farbe) und color-stop(1.0, Farbe).

Der folgende Code wird für gradient in CSS3 Menu generiert:
background-image: -moz-linear-gradient(50% 0%,rgba(255,255,255,0.38),rgba(255,255,255,0.16));
background-image: -webkit-gradient(linear,50% 0%,50% 100%, from(rgba(255,255,255,0.38)), to(rgba(255,255,255,0.16)));

CSS Gradienten wird unterstützt in FF3.6+, Opera 10.50, Safari 2+ und Google Chrome.

Sehen Sie auch:
CSS3 abgerundete Ecken, CSS3 Schatten, CSS3 Animationen, CSS3 Textschatten, CSS3 Gradient, CSS3 Übergang

Download

• Kostenlose Version herunterladen
  für Windows & Mac
• Kommerzielle Version herunterladen
  für Windows & Mac - $59

CSS3 Gradientfarben auf Objekten und Hintergründen mit CSS3 Menu

Gleichmäßige Farben gibt es immer weniger im Web, da Sie bei den meisten Internetnutzern als altmodisch betrachtet werden. Während weltbekannte Online-Ressourcen wie Wikipedia Ihren minimalistischen Designstil fortführen können, müssen die meisten anderen Webseiten mit allen Mitteln um die Aufmerksamkeit ihrer Besucher kämpfen.

CSS3, die neueste Version der bereichernden Webseiten-Programmiersprache, die auf Stil und Design-Merkmale konzentriert ist, unterstützt Gradientfarben, die zu verschiedenen Objekten und Seitenelementen hinzugefügt werden können oder als Hintergrund fungieren. Alles ist bereits im Code eingebaut und kompatibel mit den neuesten Versionen der meisten Browser, wie z.B. Internet Explorer, Firefox und Opera.

Das ist eine große Innovation seitens der CSS3 Entwickler, da früher Webdesigner gezwungen waren Bilder zu benutzen, um den Effekt von Farbverläufen auf ihrer Seite zu bekommen. Schaltflächen und Sektionen von Webseiten wurden vorgefertigt in Bildbearbeitungs-Programmen wie Photoshop. Das gleich galt für Hintergründe, nur, dass diese in kacheln gruppiert oder über den ganzen Bildschirm gestreckt wurden, was in einer etwas ungehobelten Darstellung eines Farbverlaufs endete. Alternativ haben Webentwickler einen großen Farbverlauf-Hintergrund erstellt, der den ganzen Bildschirm einnahm aber in einem kleinen, jedoch unnötigen, Anstieg der Ladezeiten für Besucher und die Traffic-Kosten des Webmasters resultierte.