kostenloser Webspace werbefrei: lima-city


Farbübergang als BG (canvas)

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    kostenlose-javascripts

    Kostenloser Webspace von kostenlose-javascripts

    kostenlose-javascripts hat kostenlosen Webspace.

    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!!
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hallo,
    kannst du uns noch verraten, was du genau brauchst bzw. woran du scheiterst?
    Gruss
  4. Autor dieses Themas

    kostenlose-javascripts

    Kostenloser Webspace von kostenlose-javascripts

    kostenlose-javascripts hat kostenlosen Webspace.

    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?
  5. 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
  6. Autor dieses Themas

    kostenlose-javascripts

    Kostenloser Webspace von kostenlose-javascripts

    kostenlose-javascripts hat kostenlosen Webspace.

    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.
  7. 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
  8. Autor dieses Themas

    kostenlose-javascripts

    Kostenloser Webspace von kostenlose-javascripts

    kostenlose-javascripts hat kostenlosen Webspace.

    Danke! Funktioniert!!:biggrin:
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!