Christmas Greeting card CSS3
--------------------------------------------- DEMO ------------------------------------------------------
--------------------------------------------- CSS3 ------------------------------------------------------
@keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px } 100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
@-moz-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px } 100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
@-webkit-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px }
50% { background-color:#b4cfe0 } 100% { background-position:500px 1000px, 400px 400px, 300px 300px; background-color:#ff6c00; } }
@-ms-keyframes snow { 0% { background-position:0px 0px, 0px 0px, 0px 0px } 100% { background-position:500px 1000px, 400px 400px, 300px 300px } }
body { background:#000; } .bg { background:url(snow_bg.jpg) no-repeat; }
#wrap { background-image:url('snow1.png'), url('snow2.png'), url('snow3.png');
-moz-animation:snow 10s linear infinite; -ms-animation:snow 10s linear infinite; animation:snow 10s linear infinite; width:800px; height:500px; }
#container { width:800px; margin:0px auto; text-align:center; color:white; font:50px "League Gothic", "Arial Narrow", "Bebas Neue", Arial;
text-shadow:0px 0px 4px rgba(0,0,0, 0.5); }
#container p { font:22px Arial, Helvetica, sans-serif; }
--------------------------------------------- HTML5 ------------------------------------------------------
<div class="bg">
<div id="wrap">
<div id="container">
<h3>Happy Merry Christmas</h3>
<p>May the good times and treasures of the present become the golden memories of tomorrow. Wish you lots of love, joy and happiness.</p>
<p>by<br>Muthujoo</p>
</div>
</div>
</div>
--------------------------------------------- IMAGES ----------------------------------------------------
