Farbverläufe (Gradients) mit CSS3

Farbverläufe machen die Welt schöner. Zumindest, wenn ein feinfühliger Designer damit hantiert und keine Regenbogenleuchthintergründe entstehen. Gradienten eignen sich für eine Vielzahl von Einsatzmöglichkeiten und schaffen Realismus, auch ohne Grafiken verwenden zu müssen. In der „echten“ Welt gibt es durch den Lichteinfall für das Auge des Betrachters keine Fläche, die ganz einfarbig ist. Es gibt immer einen Farbverlauf von heller zu dunkeler und so sind Gradients unverzichtbar für realistisch wirkende Designs.
Auch die beliebten gläsernen Buttons lassen sich durch Farbverläufe erstellen.

Das Zauberwort dafür heit in CSS3 „linear-gradient„.
Die Box in der Einleitung des Artikels wurde mit folgendem CSS Code gefüllt:

Code für linear-gradients

background: #ebf1f6; /* für alte browser */
background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* IE10+ */
background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */

Browserkompatibilität von Farbverläufen mit linear-gradient

Aktuelle Browser ab dem IE 10, Firefox 16 und Chrome 23 unterstützen linear-gradient (CanIuse: linear-gradient)

Online-Gererator für Farbverläufe mit CSS-Ausgabe

Ein sehr praktisches Tool gibt es auf www.colorzilla.com/gradient-editor. Dort kann man nicht nur aus zahlreichen Gradients sich einen schönen aussuchen, man kann auch über Slider diesen nach Wunsch erstellen und bekommt den zugehörigen CSS Code ausgegeben.

Dieser Beitrag wurde unter CSS3 veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Eine Antwort auf Farbverläufe (Gradients) mit CSS3

  1. Michael Opala sagt:

    Vielen Dank für das ausführliche Beispiel. Ist so gar nicht schwer. Nur das Tool funzt nicht.

    M.f.G.
    M.Opala

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *