Farbverlauf mit CSS3 | Designpark Interactive

Farbverlauf mit CSS3

By tom on March 2, 2012

{facebook-share}

Lineare und radiale Farbverläufe sind seit CSS3 auch ohne Grafiken realisierbar und bieten
allein durch CSS-Anweisungen einen farblich fließenden Übergang, der selbst beim Herranzoomen
kein Pixel-Wirrwarr erzeugt. Außerdem wird dadurch die Downloadzeit verringert.
In den folgenden Beispielen werden wir die beiden verschiedenen Farbverläufe einem DIV als
Hintergrund zuweisen.

Browserunterstützung:

  • Firefox
  • Safari
  • Opera
  • Google Chrome
  • InternetExplorer (ab Version 10)

 

Jeder Browser benötigt seine eigene Vorsilbe:

  • Firefox: -moz
  • Safari, Google Chrome: -webkit-
  • Opera: -o
  • InternetExplorer: -ms

 

Farbverläufe unterscheiden sich in 2 Arten:

  1. Lineare Verläufe stellen einen geradlinigen Farbverlauf dar und können aus 2 oder mehreren Farben bestehen.
  2. Radiale Farbverläufe stellen einen kreisförmigen Farbverlauf zwischen 2 Farben dar.

 

1. Lineare Verläufe

Einfacher Farbverlauf

.farbverlauf {
background:#6f9c04; /* Genereller Hintergrund */
background:-moz-linear-gradient(top, #fff, #6f9c04); /* Firefox */
background:-webkit-linear-gradient(top, #fff, #6f9c04); /* Safari, Chrome */
background-image: -webkit-gradient(linear, left bottom, 45 45, color-stop(0.1 ,#ffffff), color-stop(1.0 ,#02659e)); /* Safari */
background:-o-linear-gradient(top, #fff, #6f9c04); /* Opera */
background:-ms-linear-gradient(top, #fff, #6f9c04); /* Internet Explorer ab Version 10 */
background:linear-gradient(top, #fff, #6f9c04); /* W3C Standard */
}

Beispiel:
Mein Hintergrund ist ein Verlauf

 

Winkel Farbverlauf

.farbverlauf {
background:#6f9c04; /* Genereller Hintergrund */
background:-moz-linear-gradient(left 45deg, #fff, #02659e); /* Firefox */
background:-webkit-gradient(linear, 46% 0%, 12% 100%, from(#02659E), to(#FFFFFF), color-stop(1,#333333)); /* Safari */
background:-o-linear-gradient(left 45deg, #fff, #02659e); /* Opera */
background:-ms-linear-gradient(left 45deg, #fff, #02659e); /* Internet Explorer ab Version 10 */
background:linear-gradient(left 45deg, #fff, #02659e); /* W3C Standard */
}

Beispiel:
Mein Hintergrund ist ein Verlauf

 

2. Radiale Verläufe

.farbverlauf {
background:#6f9c04; /* Genereller Hintergrund */
background:-moz-radial-gradient(top, #fff, #c20000; /* Firefox */
background:-webkit-radial-gradient(top, #fff, #c20000); /* Safari, Chrome */
background:-o-radial-gradient(top, #fff, #c20000); /* Opera */
background:-ms-radial-gradient(top, #fff, #c20000); /* Internet Explorer ab Version 10 */
background:radial-gradient(top, #fff, #c20000); /* W3C Standard */
}

Beispiel:
Mein Hintergrund ist ein Verlauf

 

Erläuterung:

background:-moz-linear-gradient(top, #fff, #6f9c04);

background: Anweisung für den Hintergrund
-moz: Vorsilbe zur Unterstützung des Firefox-Browsers
-linear: Verlauf wird linear (geradlinig) dargestellt
-gradient: Verlaufsanweisung (gradient -> Verlauf)
top: Folgende Farbangaben werden von oben nach unten dargestellt
#fff, #6f9c04: Farbangaben

 

Hintergrund:

Es kann vorkommen, dass ältere Versionen, der oben genannten Browser, die CSS3-Verlaufsanweisungen nicht verstehen und somit nicht darstellen können. Die Anweisungen
werden dann einfach überlesen und nur der einfarbige Hintergrund dargestellt.

 

 

Leave a Reply

You must be logged in to post a comment.