4. CSS-Problem: Background-Farbverlauf

CSS-Problem: Background-Farbverlauf

  • ?

    Enttäuschendes Ergebnis für meine ersten Gehversuche mit HTML5. Ein einfacher Farbverlauf geht nicht. Aber vielleicht hat ja noch jemand eine Idee???

    0
  • S
    Mod

    Ein letzter Versuch:

    Was genau ist an der Lösung auf der von mir verlinkten Seite nicht für dich passend?

    IE support ist ein eigenes Thema über das wir gerne nachher reden können.

    0
  • ?

    Shade Of Mine schrieb:

    Ein letzter Versuch:

    Was genau ist an der Lösung auf der von mir verlinkten Seite nicht für dich passend?

    IE support ist ein eigenes Thema über das wir gerne nachher reden können.

    Hallo Shade Of Mine,

    an der Lösung auf der von Dir verlinkten Seite passt nicht, daß bei mir gar kein Farbverlauf zu sehen ist. Ich benutze den Opera. Mein Code zeigt ja einen Verlauf, aber eben nicht für die gesamte Seite wie bei z.B. background:#cfee66e, sondern nur für einen Bereich mit Inhalt. Ich dachte ich hätte irgendetwas falsch gemacht, aber scheinbar geht der CSS3 Support wirklich noch nicht weit genug.

    Einige Dinge, die ich mit HTML5 probiert habe, wie z.B. Box-Schatten, fonts usw. funktionierten. Die Sachen, die ich von http://www.mediaevent.de/css/gradient.html ausprobbiert habe, auch. Nur eben nicht für den GESAMTEN Hintergrund.

    PS: Dies ist KEIN Troll-Beitrag!

    0
  • S
    Mod

    Lin Lin schrieb:

    an der Lösung auf der von Dir verlinkten Seite passt nicht, daß bei mir gar kein Farbverlauf zu sehen ist. Ich benutze den Opera.

    Wenn du wirklich nicht in der Lage sein solltest einen Browser mit den meistverwendeten Renderengines (Gecko und WebKit) dann frage ich mich natuerlich wie du deine Seiten testen willst.

    Aber selbst wenn es dir unmoeglich ist eine dieser Renderengines zu bekommen, dann bleibt dir immernoch die Moeglichkeit den Code fuer Opera anzupassen.

    Wir haben folgenden Code (wie auf der Seite ersichtlich):

    background-image: -moz-linear-gradient(top, #ed5900, #eff108);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));
		background-image: -webkit-linear-gradient(top, #00ebab, white);

    dies fuer Opera anzupassen ist easy:
    aus

    background-image: -moz-linear-gradient(top, #ed5900, #eff108);

    wird

    background-image: -o-linear-gradient(top, #ed5900, #eff108);

    fertig.

    Nun betrachte das Ergebnis und sage mir ob du sowas gesucht hast.

    0
  • ?

    Vielen Dank für Deinen Code, aber auch damit funktioniert es nicht wie gewünscht. Schau Dir mal diesen Code in Deinem Browser an:

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Background-Gradient</title>
<style type="text/css">
<!--
body {
	/* background-color: #ed5900; */
	background-image: -o-linear-gradient(top, #ed5900, #eff108);
	background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<p>Text ...</p>
</body>

    Der Farbverlauf des Hintergrunds beschränkt sich auf den Text und nicht über den gesamten Hintergrund. Kommentierst Du background-image: und aktivierst Du background-color: ist der gesamte Hintergrund farbig. Aber eben nur einfarbig.

    0
  • S

    Das wirst du mit CSS3 gegenwärtig (und wohl auch in absehbarer Zeit) nicht lösen können, weil da derzeit zu viele Köche den Brei verderben.

    Sehr einfach ist deine Aufgabe aber mittels SVG (Scalable Vector Graphics) zu lösen. Und das Ergebnis sieht dann sogar auf (fast) allen aktuellen Browsern gleich aus (sogar die Browser-Katastrophe Internet Explorer Version 8/9 spielt problemlos mit).

    Zusätzlicher Lesestoff.

    0
  • ?

    Das der CSS3-Support noch nicht weit genug ist hatte Shade Of Mine auch schon geschrieben. Wundert mich, weil alle Welt HTML5 lobt.

    Hast Du für SVG ein Beispiel-Code oder einen Link? Google hat nichts in der Richtung gefunden.

    0
  • S

    Man nehme eine SVG-Datei "bg.svg" oder erstellt sich eine auf die Schnelle beispielsweise mit svg-edit:

    <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
<linearGradient id="bg" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="100">
	<stop  offset="0" style="stop-color:#ED5900"/>
	<stop  offset="1" style="stop-color:#EFF108"/>
</linearGradient>
<rect fill="url(#bg)" width="100" height="100"/>
</svg>

    gebe eine Priese HTML zu seinem Code:

    body { 
 ...
 background:url(bg.svg);
 ...
}

    und lasse das ganze in seinem Lieblings-Browser bis zur Anzeige garen. Fertig!

    Datei-Name und Farben lassen sich natürlich je nach Geschmack anpassen ...

    0
  • ?

    es funktioniert auch mit css3, z.b. so (getestet in webkit):

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Background-Gradient</title>
<style type="text/css">
<!--
.background {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index: -1;
 background-image: -webkit-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 20%, #d9d9d9 60%, #bfbfbf);
}
--> 
</style> 
</head> 
<body>
<div class="background"></div>
<p>Text ...</p>
</body>
    0
  • ?

    Obwohl ich mich ja nur mit HTML5 und CSS3 beschäftigen wollte, aber DAS SVG funktioniert, Danke für das Beispiel und den Tip mit SVG-Edit. Wußte garnicht, daß Google solche Tools online kostenlos bereithält.

    Übrigens gute Idee Deine Uhr auf Deiner Blogex-Seite. Selbst gemacht?

    0
  • S

    Lin Lin schrieb:

    Obwohl ich mich ja nur mit HTML5 und CSS3 beschäftigen wollte, aber DAS SVG funktioniert, Danke für das Beispiel und den Tip mit SVG-Edit. Wußte garnicht, daß Google solche Tools online kostenlos bereithält.

    Übrigens gute Idee Deine Uhr auf Deiner Blogex-Seite. Selbst gemacht?

    Jein. Idee und Anregung der typografischen Anzeige lieferte die QLOCKTWO® der Designer Biegert & Funk. Die aktuelle Version habe ich in JavaScript geschrieben. Auf BlogEx existiert aber auch noch eine Silverlight-Version (in C# geschrieben). CSS-Farbverläufe hat keine der beiden Varianten ...

    0
  • ?

    👍

    lolhehe schrieb:

    es funktioniert auch mit css3, z.b. so (getestet in webkit):

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Background-Gradient</title>
<style type="text/css">
<!--
.background {
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index: -1;
 background-image: -webkit-linear-gradient(top, #fcfcfc, #f7f7f7 3%, #f2f2f2 20%, #d9d9d9 60%, #bfbfbf);
}
--> 
</style> 
</head> 
<body>
<div class="background"></div>
<p>Text ...</p>
</body>
    0
  • L

    Danke für Deine Mühe, aber die SVG-Lösung von schmidt-webdesign.net gefällt mir besser weil es da kein CSS-Gekrücke gibt (siehe auch Post von Shade Of Mine) und weil sie auf allen bisher von mir getesteten Browsern funktioniert.

    Eine gute Idee ist aber Dein .background {}-Vorschlag, weil der Farbverlauf sich wohl auch dann nicht auf den gesamten Inhaltshintergrund sondern nur auf den aktiven Hintergrund beschränkt. Gute Idee!

    0
  • ?

    was willst du mit so einem besch... farbverlauf? du musst kräftig schlagschatten und ein statisches hintergrundbild verwenden, wo dann transparenter content drüberscrollt, und ein paar position fixed elemente nicht vergessen... wenn du dann noch ganz viel js verwendest und als schmankerl dein farbverlauf, ja, da steh ich und meine rwe/eon aktien voll drauf 👍

    0
Anmelden zum Antworten