SchreibMalWas

CSS-Farbverlauf

"Im Folgendem möchte ich Ihnen die CSS3-eigenschaft linear-gradient, mit der Sie Farbverläufe erzeugen können, näher bringen.

Hierfür wird das Atribut background-image: verwendet. Anstatt, wie bei Hintergrundbildern eine URL angzgeben, giebt man linear-dradient(); an zund zwischen den Klammern die Eigenschaften des Farbvelaufes.
Beispielcode:
background-image:linear-gradient(green, red);
Für diese Eigenschaft benötigt es jedoch wieder Browserspezifische angaben:
Code:
<div id="farb-block">dieser Text in diesem Div-element hat<br>
einen Farbverlauf<br>von oben nach unten</div>
<style type="text/css"><!--
#farb-block{
background: Yellow;
background-image: -webkit-linear-gradient(green, red); 
background-image: -moz-linear-gradient(green, red); 
background-image: -ms-linear-gradient(green, red); 
background-image: -o-linear-gradient(green, red); 
background-image: linear-gradient(green, red); 
filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr= #228b22, endColorstr= #ff0000)”;
}
--></style>
Vorschau:
dieser Text in diesem Div-element hat
einen Farbverlauf
von oben nach unten
Erklärung:
Die, zwischen je zwei Bindestrichen vorangestellten Kürzel (z.b. -webkit-) dienen dazu, Browser, welche auf diesem System basieren, anzusprechen. (z.b. webkit-basierende Browser).
Zwischen den Klammern nach linerar-gradient stehen die Farben des Farbverlaufes, in der Reihenfolge, wie sie in der Vorschau, VON OBEN NACH UNTEN dargestellt werden.
Der Internetexplorer bekommt, da er die Eigenschaft linear-gradient nicht unterstützt, (mal wieder) einen Filter als Ersatz. Hier können eine Start- un deie endfarbe des Verlaufes, von oben nach unten IM HEXCODE angegeben werden.
Hierbei ist eine Farbtabelle immer nützlich.
Sollte ein Seitenbesucher einen veralteten Browser besitzen, so ist es immer sinnvoll, ZUERST noch eine ersatz-hintergrundfarbe mit anzugeben, da diese sonst den Farbverlauf überdecken würde.

Er besteht die Möglichkeit, EIne Farbe über einen bestimmten Bereich laufen zu lassen, und erst dann den Farbverlauf zu beginnen.
Hierbei dienen %-angaben nach der Farbangabe, vor dem Komma.
Code:
background-image:linear-gradient(green 10%, red 90%);
Vorschau:

Text mit Farbverlauf
nach unten
Sie können die Farbverläufe auch in andere Richtungen verlaufen lassen. Hier die wichtigsten Werte:
Code Vorschau:
background-image:linear-gradient(top, green, red);
Vorschau
background-image:linear-gradient(left, green, red);
Vorschau
background-image:linear-gradient(center, circle farthest-corner, green, red);
Vorschau
background-image:linear-gradient(center, circle closest-side, green, red);
Vorschau
background-image:linear-gradient(center, ellipse farthest-corner, green, red);
Vorschau
background-image:linear-gradient(center, ellipse closest-side, green, red);
Vorschau
background-image:linear-gradient(45deg, green, red);
Vorschau
background-image:linear-gradient(20deg, green, red);
Vorschau
Auch hier gilt es, Browserspezifische Angaben zu machen.





Kommentar zu dieser Seite hinzufügen:
Ihr Name:
Ihre Homepage:
Ihre Nachricht:

Sie sind der 28687 Besucher auf Schreibmalwas-homepagetools Statistiken
=> Willst du auch eine kostenlose Homepage? Dann klicke hier! <=
"