0 0 Stimmen

CSS: Linearer vertikaler Farbverlauf in einer Box

Frage von Compi | 18.03.2012 um 19:02 Uhr

Ich möchte mit der Hilfe von CSS einen Farbverlauf in einer Box darstellen. Der Farbverlauf soll linear und vertikal sein, also zum Beispiel von weiß (oben) nach schwarz (unten) verlaufen.

Kann mir jemand sagen, wie man das bewerkstelligen kann? Ich habe das Problem, dass der Farbverlauf nicht in allen Browsern korrekt angezeigt wird.

AntwortenPositivNegativ

Stefan Trost

Profil anzeigen | Nachricht
Avatar
0Beste Antwort
0 Stimmen

Leider schreibst du nicht, was du schon probiert hast. Dass dein Farbverlauf nicht in allen Browsern funktioniert, kann aber mehrere Ursachen haben.

Wir müssen beachten, dass der Browser die entsprechenden Eigenschaften auch unterstützten muss. Die Eigenschaft "linear-gradient" in ihrer Reinform wird nur von Browsern verstanden, die CSS3 kompatibel sind. Für Vorgängerversionen benötigt man ein entsprechendes Präfix, damit das CSS verstanden wird, ganz alte Browser wie zum Beispiel der Internet Explorer 6 können mit den Regeln gar nichts anfangen.

Du solltest folgende CSS Regeln verwenden:

/*Firefox*/
background:-moz-linear-gradient(top, #000, #FFF);
/*Safari und Chrome*/
background:-webkit-gradient(linear, left top,
left bottom, from(#000), to(#FFF));
/*Safari und Chrome (neu)*/
background:-webkit-linear-gradient(top, #000, #FFF);
/*Opera*/
background:-o-linear-gradient(top, #000, #FFF); 
/*Internet Explorer*/
background:-ms-linear-gradient(top, #000, #FFF);
/*CSS 3*/
background:linear-gradient(#000, #FFF);

Zunächst sieht man die CSS Regeln mit Präfix für die erwähnten Browser, danach die CSS3 Regel für alle Browser, die CSS3 unterstützen.
20.03.2012 um 22:52 Uhr

AntwortenPositiv Negativ
Antworten

Ähnliche Themen

Wichtiger Hinweis

Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.