Farbübergang als BG (canvas)
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute arbeiten
beispiel
besten helfen
browser
code
dank
element
erlernen
hintergrund
hintergrundbild
holzweg
http
info
machen
position
url
verraten
verstanden url
vertikal url
weben
-
Hi,
mit Canvas (HTML5) ist es möglich Farbübergänge zu zeichnen. (Beispiel: http://www.w3schools.com/html5/html5_canvas.asp)
Nun will ich den Hintergrund einer Seite auch mit einem Farbverlauf (von oben nach unten) bestücken.
Nur: man braucht das Canvas-Element und für den BG den body.
Danke!! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
all-web schrieb:
Hallo,
kannst du uns noch verraten, was du genau brauchst bzw. woran du scheiterst?
Gruss
1. Wie macht man einen Farbverlauf von oben nach unten?
2. Wie nutzt man den erzeugten Farbverlauf als Hintergrund einer Seite?
-
kostenlose-javascripts schrieb:
1. Wie macht man einen Farbverlauf von oben nach unten?
2. Wie nutzt man den erzeugten Farbverlauf als Hintergrund einer Seite?
Wenn es Dir wirklich nur darum geht einen Farbverlauf im Hintergrund zu haben und nicht darum das canvas-Element zu erlernen wird Dir diese Seite am besten helfen (wird dann auch von wesentlich mehr Browsern verstanden)
http://www.seidling.info/css-farbverlauf/vertikal/
Das wäre allerdings die komplizierteste variante.
Falls sich der Farbverlauf NICHT der Fenstergröße anpassen muss , könntest Du einfach die übliche Methode anwenden ein 1px-Breites aber (zB) 1000 Pixel hohes Bild mit Farbverlauf zu erstellen und als Hintergrundbild für den body nebeneinander zu "Kacheln".
Gutes Beispiel wäre der Farbverlauf hier oben bei Lima-City.
Beitrag zuletzt geändert: 12.5.2011 19:30:31 von simuliertes -
simuliertes schrieb:
kostenlose-javascripts schrieb:
1. Wie macht man einen Farbverlauf von oben nach unten?
2. Wie nutzt man den erzeugten Farbverlauf als Hintergrund einer Seite?
Wenn es Dir wirklich nur darum geht einen Farbverlauf im Hintergrund zu haben und nicht darum das canvas-Element zu erlernen wird Dir diese Seite am besten helfen (wird dann auch von wesentlich mehr Browsern verstanden)
http://www.seidling.info/css-farbverlauf/vertikal/
Ich will das Ganze lieber mit HTML 5 machen. Die Variante, die du gezeigt hast bewirkt wahrscheinlich das Gleiche, der Quelltext wird dadurch aber sehr lang. Ich weiß zwar, dass das Canvas Objekt im IE nicht funktioniert, ich bin aber sowiso gegen den IE, da man oft für ihn einen eigenen Alternativcode schreiben muss. Außerdem kann man ja mit JS eine Meldung einblenden lassen, dass der IE Nutzer; um die Website korrekt zu sehen; auf einen sicheren, besseren und schnelleren Browser umsteigen sollte. -
Deine Begründung kann ich nicht nachvollziehen und ich befürchte Du befindest Dich da auf dem Holzweg aber nun ja, soll nicht mein Job sein...
Canvas als Hintergrund:
css:
body { margin:0; padding:0;}
#hintergrund {width:100%; height: 100%; position: fixed;}
(beachte das auch position: fixed; nicht von jedem Browser verstanden wird alternativ könntest Du mit position: absolute; arbeiten)
Das canvas hätte in dem beispiel die id:"hintergrund" und kommt direkt nach dem <body>.
Siehe hierzu das Hier:
http://www.cssplay.co.uk/layouts/background.html
Du machst im Prinzip das gleiche mit dem Canvas wie in dem Link mit dem Hintergrundbild .
Hier ein funktionerendes beispiel:
<!DOCTYPE HTML> <html> <body style="margin:0;"> <canvas id="myCanvas" style=" width:100%; height: 100%; position: fixed; z-index:30;"> Your browser does not support the canvas element. </canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var canvashoehe=c.height; var canvasbreite=c.width; var cxt=c.getContext("2d"); var grd=cxt.createLinearGradient(0,0,0,canvashoehe); grd.addColorStop(0,"#FF0000"); grd.addColorStop(1,"#00FF00"); cxt.fillStyle=grd; cxt.fillRect(0,0,canvasbreite,canvashoehe); </script> <div id="content" style="z-index: 300; position: absolute;"> <script type="text/javascript"> for(a=0;a<300;a++) { document.write("ganzviel Text<br>"); } </script> </div> </body> </html>
Also nochmal als Warnung:
Du kannst exakt den selben Effekt bewirken ohne viel mehr "code" aber so das Ihn mehr Browser (genauer gesagt die Mehrheit der Browser) verstehen.
Und damit meine ich nicht nur den IE
Beitrag zuletzt geändert: 12.5.2011 20:43:40 von simuliertes -
Danke! Funktioniert!!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
