Sie befinden sich hier:
Homepage
»
Webseitengestaltung
»
Blog
»
HTML und CSS Tipps
12.03.2013

Drei Arten, um einen Hintergrund-Verlauf per CSS zu erzeugen

Durch ein Hintergrundbild als Verlauf (Background-Gradient) können einzelne Elemente oder die gesamte Webseite optisch aufgewertet werden. Hierzu gibt es mehrere Möglichkeiten die ich im Folgenden kurz vorstellen werde.

Verlauf durch Einbindung eines kompletten ausfüllenden Hintergrundbildes

Vorteile:

  • Darstellung von komplizierten Verläufen möglich
  • funktioniert browserübergreifend

Nachteile:

  • statisch und unflexibel
  • großes Ladevolumen

Beispiel:

#bsp1 {
  background: url("../image/hintergrund-verlauf.png") no-repeat;
}

  komplettes Hintergrundbild
  Größe: 13,5 kByte

Verlauf erzeugt durch ein 1px breites/hohes Hintergrundbild

Vorteile:

  • geringeres Ladevolumen als bei einem kompletten Hintergrundbild
  • evtl. als CSS-Sprite mit anderen Graphiken kombinierbar
  • dadurch maximal ein zusätzlicher Request notwendig
  • funktioniert browserübergreifend

Nachteil:

  • nur Verläufe in eine Richtung möglich (horizontal oder vertikal)

Beispiel:

#bsp2{
  background: url("../image/hintergrund-verlauf-1px.png") repeat-x;
}

  1px breites Hintergrundbild
  Größe: 390 Byte

Verlauf erzeugt durch Cascading Style Sheets (CSS3)

Vorteile:

  • geringstes Ladevolumen, da kein zusätzliches Bild notwendig ist
  • deshalb auch kein zusätzlicher Request
  • komplizierte Verläufe sind ebenfalls möglich

Nachteile:

  • funktioniert noch nicht browserübergreifend, da CSS3 nur von modernen Browsern unterstützt wird
  • CSS ist etwas komplexer, da für diverse Browserfamilien die jeweiligen Vendor-Prefixe (z.B. -moz, -o, -webkit) ergänzt werden müssen. Dabei helfen aber z.B. Online-Generatoren
  • für ältere Internet-Explorer ist ein Workaround über Alpha-Filter notwendig, der nicht W3C-konform ist oder die Verwendung von diversen anderen Hacks.

Beispiel (generiert mit diesem CSS Gradient Generator):

#bsp3 {
  background: #2988d7; /*Old browsers*/
  background: -moz-linear-gradient(left, #2988d7 0%, #ffffff 100%); /*FF3.6+*/
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#2988d7), color-stop(100%,#ffffff)); /*Chrome,Safari4+*/
  background: -webkit-linear-gradient(left, #2988d7 0%,#ffffff 100%); /*Chrome10+,Safari5.1+*/
  background: -o-linear-gradient(left, #2988d7 0%,#ffffff 100%); /*Opera 11.10+*/
  background: -ms-linear-gradient(left, #2988d7 0%,#ffffff 100%); /*IE10+*/
  background: linear-gradient(to right, #2988d7 0%,#ffffff 100%); /*W3C*/
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2988d7', endColorstr='#ffffff',GradientType=1 ); /*IE6-9*/
}

  ohne Hintergrundbild
  reines CSS

Fazit

Obwohl Verläufe, die über CSS3 realisiert werden, noch nicht von allen Browsern korrekt interpretiert werden, würde ich diese Variante eindeutig bevorzugen und empfehlen. Zusätzlich sollte man einen einfarbigen Hintergrund (background-color) angeben. Sofern ein Browser Verläufe über CSS3 noch nicht unterstützt, würde in diesem Fall nur dieser einfarbige Hintergrund erscheinen. Somit ist die Funktion der Webseite für diese älteren Browser nicht eingeschränkt. Es sieht nur nicht ganz so hochwertig aus.

Autor: Mein Name ist Harry Kämpf und ich bin seit vielen Jahren als Projekt Manager im Webumfeld tätig. Auf diesen Erfahrungen basieren die Tipps zur Webseitengestaltung. Ich schreibe gern über Webthemen, nehme aktuelle Trends auf und berate bei Bedarf. Mehr Infos über mich können Sie auf meiner Homepage nachlesen.

58

Fragen / Anregungen?

Sicherheitsabfrage:
Datenschutzhinweis: Die eingegebenen Daten werden nicht an Dritte weitergegeben.