201015Apr

CSS: Cross-Browser-Farbverläufe erstellen

Seit Firefox 3.6 gibt es das CSS-Attribut "-moz-linear-gradient", mit dem sich Farbverläufe definieren lassen. Da die WebKit-Engine und auch Internet Explorers Trident-Engine CSS-Deklarationen für Verläufe kennen, lassen sich Cross-Browser-Deklarationen (dennoch mit Einschränkungen) erstellen. Bei WebDesignerWall wurde ein Artikel zu diesem Thema veröffentlicht.
Wer also Bilddateien sparen will und Verläufe in Hintergründen einsetzen möchte, kann dies mit CSS realisieren. Das Cross-Browser-Snippet könnte dann so aussehen:

  • /* Internet Explorer */
  • filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
  •  
  • /* Firefox */
  • background: -moz-linear-gradient(top, #cccccc, #000000);
  •  
  • /* Safari */
  • background: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#000000));
  •  
  • /* Opera (keine CSS-Verläufe) */
  • background: #cccccc;

Angemerkt sei hierbei nun, dass bei dem "filter"-Attribut für Microsofts Internet Explorer keine Richtung des Verlaufs definiert werden kann. Zudem sollte man darauf achten, dass keine Schrift unmittelbar auf einem Verlauf-Element platziert ist — in Internet Explorer geht das "ClearType"-Rendering von Windows verloren, so dass eine Schriftglättung nicht gewährleistet wäre. Die Lösung sollte als "Progressive enhancement" verstanden werden und dezent eingesetzt werden. Dennoch kann der Ansatz sicherlich in manchen Fällen hilfreich sein.

RSS-Feed abonnieren Bookmark bei Del.icio.us

Kommentare

deos schrieb am 16.04.2010 #1

Kleine Korrektur:
Beim IE-gradient-filter kann man die Richtung schon halbwegs bestimmen, nämlich mit dem Parameter "GradientType". Wenn man den Parameter auf 0 stellt erhält man einen vertikalen Verlauf (von Oben nach Unten), auf 1 ist es ein horizontaler(von Links nach Rechts).
Außerdem kann (Ich weiß nicht ob es Pflicht ist) man dem IE-Filter statt einer #RRGGBB-Farbe eine #AARRGGBB-Farbe geben (A für alpha-transparenz bzw. opacity! Wobei FF = opacity 1 und 00 = opacity 0)

Eine weitere Sache die anzumerken wäre: Man kann mit dem IE-Filter nur einen einfachen Farbverlauf darstellen, mit den anderen aber Abstufungen einbauen. Siehe auch https://developer.mozilla.org/en/CSS/-moz-linear-gradient

Ein Gedanke der mir gerade kommt: Mit der Alpha-Farbebene im Gradient-Filter kann mal doch dann einen RGBA-Hintergrundfarbe im IE definieren, wenn man Start- und Endfarbe gleichsetzt… (Man darf aber keine normale Hintergrundfarbe setzen da der Filter darüber gezeichnet wird)

Matthias schrieb am 19.04.2010 #2

Sehr interessant! Mit den Alpha-Einstellungen für Internet Explorer muss man wohl experimentieren. Aber damit lassen sich auf jeden Fall besondere Effekte erzielen. So ist der Browser immerhin nicht gänzlich von der schönen neuen CSS3-Ära ausgeschlossen ;-)