Der CSS-Farbverlauf

… oder warum man manchmal auch Grafiken verwenden sollte …


Dieser vertikale Farbverlauf funktioniert auf den meisten CSS-Browsern, im Internet Explorer 6 gibt es noch ein kleines Problem, da scrollt der Verlauf nicht mit!

Der Farbverlauf wurde erfolgreich getestet mit mindestens firefox 0.9, 1.03, 3.5.4, Mozilla 1.6, Netscape 7.02, Opera 7.11 und funktioniert auf vielen mehr!

Ein horizontaler Farbverlauf ist ebenfalls möglich, man muss nur sehr wenig am CSS ändern.

HTML-Quelltext (Auszug)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>Vertikaler CSS-Farbverlauf</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
      @import url("default.css");
      #verlauf div
      {
        width:100%; /*Für den horizontalen Verlauf width:0;*/
        height:0; /*Für den horizontalen Verlauf height:100%;*/
        border-width:2px 0; /*Für den horizontalen Verlauf border-width:0 2px;*/
        margin:-4px 0; /*Hack für den IE! Für den horizontalen Verlauf kein margin!*/
        /*Für den horizontalen Verlauf noch float:left;*/
      }
      #verlauf[id] div {margin:0;} /*Für den horizontalen Verlauf weglassen!*/
    </style>
  <body>
    <div id="main">
      <!--Inhalt-->
    </div>
    <div id="verlauf">
      <div style="border-color:#33AA01;border-color-top:#33AA00;"></div>
      <--...bis...-->
      <div style="border-color:#33AAFF;border-color-top:#33AAFE;"></div>
    </div>
  </body>
</html>

"<--Bis-->" bedeutet, dass für je 2 aufeinander folgende Hexwerte des Farbverlaufs ein extra <div> mit unterschiedlichen "border-color"-Werten (ist ja klar, sonst gibts keinen Verlauf) erstellt werden muss (schau einfach in den Quelltext dieser Seite). Dies muss manuell oder serverseitig geschehen. Es ist hier nur verkürzt dargestellt, aus Gründen der Übersichtlichkeit!

CSS-Quelltext (Auszug)

*
{
  margin:0;
  padding:0;
}
html,body,#main,#verlauf
{
  background:#33AAFF; /*Endfarbe! Ganz wichtig!*/
  width:100%;
  height:100%;
}
#main
{
  position:absolute;
  z-index:2;
}
#verlauf
{
  z-index:1;
  position:absolute;
  overflow-y:hidden; /*simuliert im IE ein "position:fixed;"*/
}
#verlauf[id] {position:fixed;} /*Hack um IE vom echten "position:fixed;" auszuschließen*/
#verlauf div
{
  font-size:1px;
  border-style:solid;
}

Die Datenmenge an Quelltext, damit meine ich vorallem den HTML-Teil, ist ungleich größer als eine normale Grafik. Der CSS-Farbverlauf ist eine Spielerei, er soll lediglich zeigen, was mit HTML&CSS möglich ist, aber gleichzeitig wird auch sichtbar, dass CSS Grenzen gesetzt sind, denn es ist zwar durchaus möglich einen Farbverlauf zu erstellen, aber der Aufwand und der später entstehende Traffic sind nicht vertretbar.

MfG, Martin