Kommentare zu: CSS3 im Detail: Background Gradients

Von: René

René — Thu, 03 May 2012 11:37:32 +0000

Hallo nochmal,

fehler gefunden. Es fehlt noch folgender eintrag

background-attachment: fixed;

Trotzdem Danke

Von: René

René — Thu, 03 May 2012 09:13:52 +0000

Der html code wurde nicht ganz übernommen, ein neuer versuch:

html
head
title>StartseiteWillkommen /div
/body
/html

Von: René

René — Thu, 03 May 2012 09:09:28 +0000

Hallo Norman,

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:

.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.

Von: Norman

Norman — Wed, 25 Apr 2012 18:25:45 +0000

Da hast du völlig recht Trinita, danke dir.

Von: Trinita

Trinita — Wed, 25 Apr 2012 09:21:43 +0000

Vielen Dank für den Artikel. Du schreibst: “Prinzipiell haben die Verlauf-Funktionen 4 Argumente um einen Farbverlauf näher zu beschreiben. Die Argumente sind einmal linear oder gradient, welche angeben um welchen Typ von Verlauf es sich handelt.”

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

Von: Christian

Christian — Mon, 30 Jan 2012 19:18:29 +0000

Danke Dir! Ein sehr cooles Tutorial!

Von: Webstandard-Blog

Webstandard-Blog — Tue, 27 Dec 2011 10:46:17 +0000

@Manfred: Falls du für Opera noch eine Unterstützung des Farbverlaufes für ältere Versionen benötigst kann ich dir noch einen SVG Ansatz für den linearen Farbverlauf, den ich im letzten Jahr in meinem Blog (entschuldige die "Werbung" Norman) näher vorgestellt habe.

Von: Bernd

Bernd — Thu, 14 Jul 2011 21:54:58 +0000

Vielen Dank für die Tipps,
ich komme immer mal wieder hier hin um mir das anzuschauen

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!

Von: Norman

Norman — Wed, 06 Apr 2011 20:32:23 +0000

Hallo Manfred, danke dass du mich auf das Problem aufmerksam gemacht hast.

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.

Von: Manfred

Manfred — Wed, 06 Apr 2011 19:02:17 +0000

Hallo Norman
Deine Browser-Angaben kann ich nicht nachvollziehen. Ich habe auf Windows7 folgende Browser getestet (deine Webseite)
Avant, Flock, Opera11,Safari5,IE9, Firefox 3.6 und Chrome neueste Version. Nur Firefox und Chrome haben den Verlauf gezeigt, alle anderen nur eine leere Fläche
Auf dem Mac ein ähnliches Bild. Nur Firefox (Chrome habe ich nicht getestet) zeigt den Verlauf. Weder Safari noch Opera machen da mit.
Schade eigentlich
Manfred