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.

Kommentarfunktion für diesen Artikel geschlossen.