4. CSS-Problem: Background-Farbverlauf

CSS-Problem: Background-Farbverlauf

  • ?

    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