Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

CSS3 Schnee Effekt

CSS3 Schnee Effekt WordPress

Update: Inzwischen steht eine performantere und einfachere Möglichkeit zur Verfügung, einen Schnee-Effekt mit CSS 3 zu realisieren. Die Anleitung dafür findet ihr hier.

CSS3 Schnee Effekt für den Winter

Im Winter da schneit es, doch nicht nur im Wald, sondern auch auf den meisten Websites, dank moderner Schnee Effekte. Dafür kommen allerdings meist fiese Scripte zum Einsatz, die allgemein zwar recht gut laufen und realistisch aussehen, aber jedes Jahr bei mindestens einem Besucher auch heftige Probleme verursachen. So ruckelt der Schnee Effekt im Browser, das Bild bleibt hängen, der Schnee sieht merkwürdig aus, oder er produziert sonst irgendwelche Fehler. Doch damit ist jetzt Schluss, denn CSS3 und HTML 5 geben Web Designern gigantische Möglichkeiten, auch in Bezug auf moderne Schnee Effekte. Die benötigen nun nämlich kein Javascript mehr, sondern sind ganz einfach mit CSS3 zu realisieren. Flüssig, ohne Ruckler, und ziemlich hübsch. Nachdem ich kürzlich bereits die schönsten WordPress Plugins zu Weihnachten vorgestellt hatte, gibt es hier nun einen CSS3 Schnee Effekt.

Für den CSS3 Schnee Effekt folgendes in die header.php kopieren (Am besten vor den Body-Tag):

<div id="flakes"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

Folgendes in die style.css eures Themes kopieren, damit der CSS3 Schnee Effekt auch funktioniert:

i,.snowflake{background-image:-webkit-gradient(linear,0% 0%,100% 0,color-stop(0.4,rgba(255,255,255,0)),color-stop(0.42,#fff),color-stop(0.58,#fff),color-stop(0.6,rgba(255,255,255,0))),-webkit-gradient(linear,0% 0%,0 100%,color-stop(0.4,rgba(255,255,255,0)),color-stop(0.42,#fff),color-stop(0.58,#fff),color-stop(0.6,rgba(255,255,255,0))),-webkit-gradient(linear,0% 100%,100% 0,color-stop(0.4,rgba(255,255,255,0)),color-stop(0.42,#fff),color-stop(0.58,#fff),color-stop(0.6,rgba(255,255,255,0))),-webkit-gradient(linear,0% 50%,50% 100%,color-stop(0.35,rgba(255,255,255,0)),color-stop(0.38,#fff),color-stop(0.63,#fff),color-stop(0.65,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(180deg,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%),-webkit-linear-gradient(90deg,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%),-webkit-linear-gradient(45deg,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%),-webkit-linear-gradient(135deg,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%);background-image:-moz-linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%),-moz-linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%),-moz-linear-gradient(45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%,rgba(255,255,255,0) 100%),-moz-linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%,rgba(255,255,255,0) 100%);background-image:-ms-linear-gradient(180deg,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%),-ms-linear-gradient(90deg,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%),-ms-linear-gradient(45deg,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%),-ms-linear-gradient(135deg,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%);background-image:-o-linear-gradient(180deg,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%),-o-linear-gradient(90deg,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%),-o-linear-gradient(45deg,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%),-o-linear-gradient(135deg,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%);background-image:linear-gradient(180deg,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%),linear-gradient(90deg,rgba(255,255,255,0) 40%,#fff 40%,#fff 60%,rgba(255,255,255,0) 60%),linear-gradient(45deg,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%),linear-gradient(135deg,rgba(255,255,255,0) 43%,#fff 43%,#fff 57%,rgba(255,255,255,0) 57%);}i{display:inline-block;height:16px;width:16px;border-radius:50%;-webkit-transform-origin:left -20px;-webkit-animation-name:falling;-webkit-animation-duration:3s;-webkit-animation-direction:normal;-webkit-animation-iteration-count:20;-webkit-animation-timing-function:linear;-webkit-animation-delay:2s;-webkit-animation-fill-mode:none;-webkit-animation-play-state:running;-moz-animation:falling 3s linear 2s 20;}@-webkit-keyframes falling{0%{-webkit-transform:translate3d(0,0,0) rotate(0deg) scale(0.9,0.9);}100%{-webkit-transform:translate3d(30px,1000px,0) rotate(360deg) scale(1.1,1.1);}}@-webkit-keyframes fallingrain{0%{-webkit-transform:translate3d(-200px,0,0) rotate(-15deg) scale(0.9,0.9);}100%{-webkit-transform:translate3d(200px,2000px,0) rotate(-15deg) scale(1.1,1.1);}}@-moz-keyframes falling{0%{-moz-transform:translate3d(0,0,0) rotate(0deg) scale(0.9,0.9);}100%{-moz-transform:translate(30px,1000px) rotate(360deg) scale(1.1,1.1);}}#flakes i:nth-of-type(4n){height:30px;width:30px;-webkit-transform-origin:right -30px;-moz-transform-origin:right -30px;}#flakes i:nth-of-type(4n+1){height:24px;width:24px;-webkit-transform-origin:left -30px;-moz-transform-origin:left -30px;}#flakes i:nth-of-type(4n+2){height:10px;width:10px;-webkit-transform-origin:-30px 0;-moz-transform-origin:-30px 0;}#flakes i:nth-of-type(4n){-webkit-animation-duration:5.3s;-webkit-animation-iteration-count:12;-webkit-transform-origin:-10px -20px;-moz-animation-duration:5.3s;-moz-animation-iteration-count:12;-moz-transform-origin:-10px -20px;}#flakes i:nth-of-type(4n+1){-webkit-animation-duration:3.1s;-webkit-animation-iteration-count:20;-webkit-transform-origin:10px -20px;-moz-animation-duration:3.1s;-moz-animation-iteration-count:20;-moz-transform-origin:10px -20px;}#flakes i:nth-of-type(4n+2){-webkit-animation-duration:1.7s;-webkit-animation-iteration-count:35;-webkit-transform-origin:right -20px;-moz-animation-duration:1.7s;-moz-animation-iteration-count:35;-moz-transform-origin:right -20px;}#flakes i:nth-of-type(3n){-webkit-animation-delay:2.3s;-moz-animation-delay:2.3s;}#flakes i:nth-of-type(3n+1){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;}#flakes i:nth-of-type(3n+2){-webkit-animation-delay:3.4s;-moz-animation-delay:3.4s;}#flakes i:nth-of-type(5n){-webkit-animation-timing-function:ease-in-out;}#flakes i:nth-of-type(5n+1){-webkit-animation-timing-function:ease-out;}#flakes i:nth-of-type(5n+2){-webkit-animation-timing-function:ease;}#flakes i:nth-of-type(5n+3){-webkit-animation-timing-function:ease-in;}#flakes i:nth-of-type(5n+4){-webkit-animation-timing-function:linear;}#flakes i:nth-of-type(11n){-webkit-animation-timing-function:cubic-bezier(0.2,0.3,0.8,0.9);}#flakes i:nth-of-type(5n){-moz-animation-timing-function:ease-in-out;}#flakes i:nth-of-type(5n+1){-moz-animation-timing-function:ease-out;}#flakes i:nth-of-type(5n+2){-moz-animation-timing-function:ease;}#flakes i:nth-of-type(5n+3){-moz-animation-timing-function:ease-in;}#flakes i:nth-of-type(5n+4){-moz-animation-timing-function:linear;}#flakes i:nth-of-type(11n){-moz-animation-timing-function:cubic-bezier(0.2,0.3,0.8,0.9);}#flakes i:nth-of-type(7n){opacity:0.5}#flakes i:nth-of-type(7n+2){opacity:0.3}#flakes i:nth-of-type(7n+4){opacity:0.7}#flakes i:nth-of-type(7n+6){opacity:0.6;-webkit-animation-timing-function:ease-in;-webkit-transform-origin:left 10px;-moz-animation-timing-function:ease-in;-moz-transform-origin:left 10px;}#flakes i:nth-of-type(7n+1){opacity:0.8}

Schnee Effekt mit CSS3

Sind die Snippets oben eingefügt, war es das schon. Der CSS3 Schnee Effekt sieht wirklich fantastisch aus, vor allem rieseln die Flocken aber auch sehr realistisch. Der Aufbau ist dabei minimal, die Darstellung des CSS3 Schnee Effekt dafür aber wirklich überzeugend. Ich bin jedenfalls recht begeistert von der Möglichkeit, weil so ein wenig Weihnachtsstimmung auf den Blog gelangt, ohne extra Scripte oder aufwändige Codes zu schreiben. Einfacher geht es nicht, auch aus Performance-Sicht ist der CSS3 Schnee Effekt einfach nur gelungen. Am besten ihr probiert ihn nun einfach selbst aus, vielleicht habt ihr ja noch die ein oder andere Idee, den CSS3 Schnee Effekt weiter anzupassen und individueller zu gestalten. Eine frohe Weihnachtszeit wünsche euch allen.



Wordpress Performance eBook