Ja ich weiss, seit gestern haben wir eigentlich Frühling – trotzdem friert man sich, wenn man auf der Strasse unterwegs ist, einen ab – wenigstens hier in der Ostschweiz. Wenn es so kalt ist, dann fehlt mir persönlich der Schnee und wenn Frau Holle sich weigert so etwas zu liefern, ja dann lass ichs halt im Blog ein wenig schneien.

Eigentlich ist so ein fallender CSS Effekt wirklich sehr einfach zu generieren. Man braucht eigentlich nichts weiteres als 3 Bilder, die dann übereinander gezeigt werden und ein kleiner CSS Code, und so wird der fallende Effekt erzeugt.

Hier die Anleitung:

  1. 3 Bilder besorgen

    Zuerst einmal braucht man die 3 Bilder die dann übereinander gelegt diesen fallenden Effekt erzeugen. Ich habe hier mal Schnee genommen, man kann natürlich auch andere Symbole wie zum Beispiel Osteier nehmen, oder $ Zeichen oder sonst was lustiges. Ich habe das Ganze mal mit Schnee gemacht und diese 3 Bilder auf den Server hochgeladen http://www.chefblogger.me/images/schnee1.png, http://www.chefblogger.me/images/schnee2.png, http://www.chefblogger.me/images/schnee3.png.

    Wenn ihr selbst Bilder macht, solltet ihr einfach schauen, dass die 3 Bilder unterschiedliche Bildergrössen enthalten – damit man ne Art Tiefen-Effekt erhält.

  2. Bilder in CSS einbinden

    Jetzt geht ihr zu eurem Designordner und öffnet das CSS File. Dort bindet ihr dann den Code ein – zb im Body-Bereich oder sonst wo ihr ihn angezeigt haben möchtet.

    1
    2
    3
    4
    5
    6
    7
    8
    
    background-color:#3b8dbd;
    background-image:url('http://www.chefblogger.me/images/schnee1.png'),
    url('http://www.chefblogger.me/images/schnee2.png'),
    url('http://www.chefblogger.me/images/schnee3.png');
    -webkit-animation:schnee 25s linear infinite;
    -moz-animation:schnee 25s linear infinite;
    -ms-animation:schnee 25s linear infinite;
    animation:schnee 25s linear infinite;

    Natürlich müsst ihr euren Code so anpassen, dass die 3 Bilder eine richtige URL bekommen (auf eurem Server am besten). Hinter Background-Color (1. Zeile) müsst ihr die Hintergrundfarbe definieren. Am besten wählt ihr die Farbe aus, bei der euer Effekt am besten hervortritt. Ich hab sie hier mal Hellblau genommen.

  3. Fallender Effekt in CSS einbinden

    Nun müsst ihr nur noch den fallende Effekt einbauen und zwar geht das am einfachsten, wenn ihr den folgende Code zu unterst bei eurem style.css File platziert.

    1
    2
    3
    4
    5
    6
    7
    8
    
    @keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
    100%{background-position:500px 1000px,400px 400px,300px 300px}}
    @-moz-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
    100%{background-position:500px 1000px,400px 400px,300px 300px}}
    @-webkit-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}
    100%{background-position:500px 1000px,400px 400px,300px 300px;}}
    @-ms-keyframes schnee{0%{background-position:0px 0px,0px 0px,0px 0px}100%
    {background-position:500px 1000px,400px 400px,300px 300px}}

    Solltet ihr eure eigenen Befehle schreiben, dann müsst ihr einfach schauen, dass ihr sie richtig verlinkt. So heisst hier der Effekt immer „schnee“, das seht ihr unter Punkt 2. in verbindung mit Punkt 3. sehr schön.

  4. CSS File hochladen und Effekt geniessen

    Jetzt müsst ihr nur noch das CSS File hochladen und dann könnt ihr, wenn ihr alles richtig gemacht habe, den Effekt geniessen.

So einfach geht das, und nun viel Spass beim rumexperimentieren !

Über

Eric-Oliver Mächler

Seit 2005 bin ich ein aktiver Blogger. Ich kenne die Kniffe und die Tricks um einen Blog erfolgreich zu machen. Hier gebe ich diese kleinen Tricks gerne weiter und freue mich, wenn ich euch helfen kann. Hier erfährt man mehr über mich.

1 Kommentar

Hinterlass einen Kommentar