Anzeige
Tutorialbeschreibung

Let it snow mit CSS3 - multiple Backgrounds und Animations

Let it snow mit CSS3 - multiple Backgrounds und Animations

Passend zur Jahreszeit ein Tutorial, wie ihr mit CSS3 Schnee im Hintergrund eurer Webseite animiert. Das Beispiel berücksichtigt nur Mozilla und Webkit-Browser, bei den anderen ist CSS3 zurzeit noch nicht so weit implementiert.


Ohne große Vorrede - los geht's.


Schritt 1

Zunächst brauchen wir ein paar Hintergrundbilder für den Schnee. Ich habe mal 3 gemacht (500x500,400x400 und 300x300) - es können auch mehr sein - und noch eins, damit der Schnee nicht einfach so unten aus dem Browser fällt ;) Ihr könnt da ganz nach Belieben mit Pinselformen, -größen und -deckkraft spielen.

BilderBilder



Die speichert ihr ohne Hintergrund als transparente PNG ab.


 

Schritt 2

Wir erstellen das HTML-Gerüst:

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="description" content="description">

<title>Let it snow</title>

<link rel="stylesheet" media="screen" href="style.css">

</head>
<body>
    <h2>Let it snow</h2>
</body>
</html>



 

Schritt 3

Grundlegendes CSS und Einbinden der Hintergründe sowie einer passenden Schrift für h2.

@font-face {
  font-family: 'Spirax';
  font-style: normal;
  font-weight: 400;
  src: local('Spirax-Regular'), url('http://themes.googleusercontent.com/static/fonts/spirax/v1/wiA6NnIvV_zF9oTZ_yafzA.woff') format('woff');
}
*{margin:0;padding:0;
}
html,body{height:100%;}

body{
    text-align:center;vertical-align:middle;
    background-color: #6b92b9;
    background: url('snow.png'), url('snow2.png'), url('snow3.png'), url('snow4.png')repeat-x left bottom;
}
h2{
    display:inline-block;
    vertical-align:middle;
    text-align: center;
    color: #263A4E;
    font:150px 'Spirax', cursive;
    text-shadow:-2px -2px 4px #fff,2px 2px 4px #fff,2px -2px 4px #fff,-2px 2px 4px #fff;
    opacity:.5;
}
body:before{
    content:'';
    display:inline-block;
    vertical-align:middle;
    text-align: center;
    height:100%;
}



 

Schritt 4

Wir legen die Animationsschritte mit der @keyframe-Regel fest und geben ihr den Namen snow.

@-moz-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px, bottom; background-color:#263A4E;}
    100% {background-position: 500px 500px, 400px 400px, 300px 300px, bottom; background-color:#263A4E;}
}

@-webkit-keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px, bottom; background-color:#263A4E;}
    100% {background-position: 500px 500px, 400px 400px, 300px 300px, bottom; background-color:#263A4E;}
}

@keyframes snow {
    0% {background-position: 0px 0px, 0px 0px, 0px 0px, bottom; background-color:#263A4E;}
    100% {background-position: 500px 500px, 400px 400px, 300px 300px, bottom; background-color:#263A4E;}
}



Schritt 5

Wir rufen für den Body die Animation ab und legen Dauer, Animationsart und Wiederholung fest. Dafür ergänzen wir für den Body folgende Regeln:

    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;


Das war's schon; dann lasst's mal kräftig schneien ...

Das komplette Beispiel inkl. Bildern könnt ihr als Arbeitsdatei herunterladen.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von niclas123456789
  • 04.12.2013 - 20:44

Klasse Tutorial, auch für die "Anfänger" sehr leicht zu verstehen!
Aber eine Frage habe ich, bei mir zeigt er die Schrift unter dem "Schneehaufen" an, auch wenn ich deine Dateien 1 zu 1 kopiere, schätze das hängt mit google Chrome zusammen :/

Portrait von Melly_maus
  • 18.03.2012 - 10:23

Erweckt die Webseite zum Leben. Passt im Winter sehr gut. Vielen Dank!

Portrait von Bruhsman
  • 13.01.2012 - 13:22

Mit der Homepage klappt es ja schon ganz gut. Da ich Flash weder besitze noch beherrsche gibt es keine Animationen etc. Dieses Tutorial kommt da genau richtig um etwas Leben ins Layout zu bringen. Danke!

Portrait von Niobe
  • 08.01.2012 - 11:25

mmh, mir gefällt das, wobei hier Regen statt Schnee fällt. Was ich nicht verstehe, wie wird das script in ein bestehendes styles sheet eingebunden. CSS Kentnisse fehlen mir gänzlich.

Portrait von cebito
  • 08.01.2012 - 11:51

Indem du Schritt 5 auf den Body(Css) anwendest. Wenn du Probleme mit der Umsetzung von Tutorials hast, ist es besser damit ins Forum zu gehen, da bekommst du mehr und schnellere Hilfe.

x
×
×