Farbverläufe mit CSS3 in Contao verwenden

Für Farbverläufe benutzt man zur Zeit (noch) kleine Grafiken, die mal wiederholend dem jeweiligen Element zuweist. Mit CSS3 lassen sich diese Farbverläufe per CSS erstellen und anwenden. Reduziert eingesetzt unterstreicht es etwas die visuelle Gesamterscheinung und erreicht subtile Effekte.

Browser, die keine Farbverläufe via CSS3 darstellen können, zeigen dann einen einfarbigen Hintergrund an.

Der Grundaufbau der Verlaufsdefinitionen (nach W3C):
linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Für die Gecko-Browser (Firefox):
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Für die Webkit-Browser (Chrome, Safari):
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

1. Beispiel: Linearer Farbverlauf mit 3 Farben

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

CSS-Definitionen erstellen

/* einfarbiger Hintergrund für Browser, die CSS3 nicht unterstützen */
background: #3B6799;

/* Gecko-Browser (Firefox) */
background:-moz-linear-gradient
(top, #3B6799 0%, #93B8D6 34%, #3B6799 100%);

/* Webkit-Browser (Chrome, Safari) */
background: -webkit-gradient
(linear, left top, left bottom, color-stop(0%,#3B6799), color-stop(34%,#93B8D6), color-stop(100%,#3B6799));

/* Filter für Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr='#3B6799', endColorstr='#3B6799',GradientType=0 );

/* CSS3 allgemein */
background: linear-gradient(top, #3B6799, #3B6799);
}

2. Beispiel: Linearer Farbverlauf mit 2 Farben

Für dieses Beispiel wurde dem Inhaltselement Text eine CSS-Klasse gradient-box2 zugewiesen und die CSS3-Eigenschaften für den Farbverlauf definiert.

… und damit nun von diesem Farbverlauf im Hintergrund dieses Inhaltselements etwas mehr zu sehen ist, steht dieser lange, ergänzende Satz hier noch dabei ;-).

CSS-Definitionen erstellen

#main .ce_text.gradient-box2
{
/* für Browser, die kein CSS3 darstellen können */
background: #ffffff;

/* Gecko-Browser (Firefox) */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);

/* Webkit-Browser (Chrome, Safari) */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
}

3. Beispiel: Radialer Farbverlauf mit 2 Farben

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

CSS-Definitionen erstellen

#main .ce_text.gradient-box-radial
{
/* für Browser, die kein CSS3 darstellen können */
background: #ffffff;

/* Gecko-Browser (Firefox) */
background: -moz-radial-gradient(50% 50%, farthest-side, #487a77, #fff);

/* Webkit-Browser (Chrome, Safari) */
background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 350,from(#DBDBDB), to(#fff));

/* CSS3 allgemein */
  background: radial-gradient(center 45deg,circle cover, #487a77, #fffff);
}

Wichtig zu wissen:
Der Internet Explorer kennt (aktuell) nur Anfangs- und Endfarbe; Webkit- und Geckobrowser können auch mehr Farbdefinitionen enthalten, z.B. für weiche, nonlineare Farbverläufe.

Tipp:
Benutzen Sie am einfachsten einen der unter aufgeführten Generatoren; so prägt sich die Syntax leichter ein.

Weiterführende Links

twitter
rss-news-feed
weitzeldesign
planepix