body {
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#00BFFF’, endColorstr=’#FFEBCD’); /* IE6 & IE7 */
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#00BFFF’, endColorstr=’#FFEBCD’)”; /* IE8 & 9 */
}

Der IE 10 akzeptiert den W3-Standard ohne Vendor-Prefix mittlerweile problemlos.

geht:
background:linear-gradient(to bottom, #17b, #eee); /* W3C Standard */

Beste Grüsse und Danke
le Grunge

also ich finde dieses css-Ansatz, Hintergundfarben mit Verläufen zu versehen hochinteressant. Ich hab mal ein wenig gebastelt mit einem Gradient Generator, um einen hübschen Verlauf hinzubekommen. Jetzt kommt das Problem: Binde ich den Verlauf über die bekannte Syntax ein, wird der Verlauf im Browser (FF) gekachelt. Sieht grauenerregend aus. Wie kann ich also verhindern, dass der Verlauf gekachelt wird?

Danke und nette Grüße

#topnav_wrap {
background:-moz-linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;
background:-ms-linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;
background:-webkit-linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;
background:-o-linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;
background:linear-gradient(center top , #FF8000, #FF4000) repeat scroll 0 0 transparent;

overflow: inherit;
}

Vielen dank!

der Validator checkt nur den eigentlichen Standard, also ohne Vendor-Prefix, alles andere kennt er nicht und spuckt deswegen die Fehler aus. Du kannst sie aber getrost ignorieren, du weißt ja, was du tust.

Super Erläuterung, dafür zunächst mal DANKE!
Wenn ich aber die -moz-linear-gradient und -webkit etc. notiere und dann einen W3C check mache, sagt mir der Check, dass das nicht stimmt. Eine Idee dazu? Warum ignoriert das W3C nicht oder versteht nicht, dass die Notiation für die verschiedenen Browser nötig ist?

fehler gefunden. Es fehlt noch folgender eintrag

background-attachment: fixed;

Trotzdem Danke

html
head
title>StartseiteWillkommen</p
/div
/body
/html

erstmal vielen Dank für deinen Artikel.
Ich bastle gerade eine neue Homepage und wollte es mal mit dem Farbverlauf im Hintergrund probieren. Der Farbverlauf funktioniert soweit, aber nich über die gesammte seite, sondern nur pro Zeile.

Der css eintrag sieht so aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.body {
/* IE10 */ 
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
/* Opera */ 
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #2EFE5C));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
/* Proposed W3C Markup */ 
background-image: linear-gradient(bottom, #FFFFFF 0%, #2EFE5C 100%);
}

und der html eintrag so:

Startseite

Willkommen

Hoffe du kannst mir helfen.

Muss es nicht heißen: “Die Argumente sind einmal linear oder _radial_”?

Für die Verläufe sollte es endlich mal eine Vereinheitlichung geben, alle Browser wollen immer was anderes, das nervt auf Dauer tierisch ~.~!

Vor allem weil ich in eines meiner neueren Projekte diese Verläufe nutze

Grüße!

Folgendes:
1) Safari scheint doch noch nicht die neue Syntax zu unterstützen, ich hatte mir die extra Zeile bei den Beispielen gespart und nur im Chrome geprüft (Faulheit zahlt sich eben nur selten aus ) jedenfalls ist die Zeile wieder drin und die Beispiele funktionieren in Safari wieder prächtig.

2) Damit die Beispiele (zumindest für lineare Verläufe) auch in Opera funktioneren, brauchst du die aktuelle Beta Version 11.10, mit dem 11.0 Release wirst du keinen Erfolg haben.

3) Was die anderen Browser angeht, kann ich keine großen Auskünfte machen. Ich weiß nur, dass IE9 es derzeit nicht unterstützt. Wenn es so wäre, hätte ich ihn weiter oben mit aufgelistet.

Ich hoffe, das hilft dir weiter und danke nochmal.

1
2
3
4
5

@import "menu/menu_style.css";>
div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-gradient(radial, center center, 80, center center, 400, from(#fff), to(#adf)); /* Safari, Chrome */
}

<div class ="div.rad_grad"
RESTLICHE SEITE

klappt aber nicht. woran könnte das liegen?
schönen Dank!

1
2
3
4

div.rad_grad {
background:-moz-radial-gradient(center, #fff, #adf); /* Firefox */
background:-webkit-gradient(radial, center center, 80, center center, 400, from(#fff), to(#adf)); /* Safari, Chrome */
}

und der HG ändert sich nicht.
Was mache ich falsch?
Danke

Liebe Grüße,

Gast

This post was mentioned on Twitter by _Poldi: Currently reading: http://www.normansblog.de/css3-im-detail-background-gradients/