Tarjeta de Navidad en CSS

Esta entrada en realidad tiene dos motivos, la primera es para desearles a todos y cada uno de los lectores de este blog, una feliz Navidad, pero más aun, que estas fechas sean un pretexto para reconciliarnos con quienes hemos discutido, disfrutar a nuestros seres queridos, y valorar todo aquello que tenemos para así compartir con los demás un poco de lo mucho que la vida nos da.

¡Feliz Navidad!

les desea Ciudad Blogger

El otro motivo es para compartirles esta tarjeta de navidad hecha sólo con CSS, las únicas imágenes que hay en ella son la de los copos de nieve.
Es un pequeño experimento que hice basado con la nieve de Joshua Johnson y las esferas deCatalin Rosu, yo prácticamente sólo le he añadido algunos efectos de hover y los bordes.

Como está hecho con CSS sólo se verá bien en navegadores modernos, así que si lo ves medio abstracto ya sabes porqué razón se ve así.
El código para copiar y pegar en una entrada es este:

<link href='http://fonts.googleapis.com/css?family=Clicker+Script' rel='stylesheet' type='text/css'/>
<style>
@keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes xmas-snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#xmas-contenedor {
height: 380px;
width:580px;
background-color: #6b92b9;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicev5RKFEj1ltCQW-e2JxMC3UrVOnJbhBFRD92K8Qevr4wOQWB2kUL5wcEbBNppi_uNhfqXHf4wkLQc60M6osWskEQ5HtZYL0h8LxMx2FIuJ_xZaY8oPNYZWLn1rhgjiZhQ1576JpFXp4/s500/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq718O0ciNEoh8BqDSJMhn8meVgISF-4_4WVbpCG1U2LIWHU-IHt198Uqyyf96oUnfX9FGp-gvmLiX5MBUsmdxnouwcaSf4637PpcByhDKEVPWZUmaMX6YiEgFVUbc1M-BUUDu0uvP4ys/s400/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2mtU8jyz59iUNhd7XKvjukedFgD_Vj5cOVPdtTQZ5qQeG3-yivxB-zUqImNtYxIHcjhTj7hyphenhyphentllysOgPsqosBsAec3haVOt9Zr4wvvkyqpV5Rs3c84ks1rViY62E5wsjnNg17MEFalqg/s300/snow2.png);
-webkit-animation: xmas-snow 20s linear infinite;
-moz-animation: xmas-snow 20s linear infinite;
-ms-animation: xmas-snow 20s linear infinite;
animation: xmas-snow 20s linear infinite;
position:relative;
border:5px solid #98BF21;
z-index:1;
}
#xmas-contenedor:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom:0;
border: 5px solid #fff;
}
#xmas-contenedor:after {
content:"";
position:absolute;
z-index:-1;
top:5px;
left:5px;
right:5px;
bottom:5px;
border: 6px dotted #98BF21;
}
#xmas-contenedor h4, #xmas-contenedor p {
font-family: 'Clicker Script', cursive;
font-size:60px;
font-weight:bold;
text-align:center;
text-shadow: 2px 2px 4px #000000;
color:#fff;
margin-top:200px;
margin-bottom:0px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#xmas-contenedor p {
font-size:25px;
line-height:0;
margin-top:50px;
}
html>/**/body #xmas-contenedor h4, x:-moz-any-link, x:default {
font-weight:normal;
}
html>/**/body #xmas-contenedor p, x:-moz-any-link, x:default {
font-weight:normal;
}
#xmas-contenedor h4:hover {
font-size:75px;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
#bauble-container {
list-style: none;
width: 568px;
margin: 40px auto;
padding: 0;
}
#bauble-container li {
margin: 0 20px;
float: left;
}
#bauble-container li:before {
content: "";
background: #dadada;
background: -moz-linear-gradient(bottom, #9c9c9c, rgba(255,255,255,0) );
background: -webkit-gradient(linear, left bottom, right top, from(#9c9c9c), color-stop(100%, rgba(255,255,255,0)));
height: 50px;
width: 2px;
display: block;
margin: 0 auto;
}
#bauble-container li:nth-child(odd) {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
}
#bauble-container li:nth-child(odd):hover {
-moz-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
}
#bauble-container li:nth-child(even) {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
}
#bauble-container li:nth-child(even):hover {
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}
.bauble {
border-radius: 100px;
box-shadow: 0 0 5px #777777;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
height: 100px;
width: 100px;
}
.bauble:before {
content: "";
background: #fff;
background: -moz-linear-gradient(left, #fff, #9c9c9c, #fff, #9c9c9c );
background: -webkit-gradient(linear, left center, right center, from(#fff), color-stop(25%, #9c9c9c), color-stop(50%, #fff), color-stop(75%, #9c9c9c));
border-radius: 2px;
box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.3) inset;
border: 1px solid #dadada ;
height: 10px;
width: 20px;
position: absolute;
left: 50%;
top: -12px;
margin-left: -10px;
}
.bauble:after {
content: "";
border-radius: 100px;
background: #fff;
background: -moz-linear-gradient(bottom, #fff, rgba(255,255,255,0.1) );
background: -webkit-gradient(linear, left bottom, right top, from(#fff), color-stop(100%, rgba(255,255,255,0.1)));
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
opacity: 0.15;
height: 80px;
width: 80px;
}
.red-bauble {
background: #c8171f;
background: -moz-radial-gradient(center 45deg,circle cover, #f9d0be, #c8171f);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#f9d0be), to(#c8171f));
}
.blue-bauble {
background: #00a1ee;
background: -moz-radial-gradient(center 45deg,circle cover, #cde6f9, #00a1ee);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#cde6f9), to(#00a1ee));
}
.yellow-bauble {
background: #fcb83d;
background: -moz-radial-gradient(center 45deg,circle cover, #fcf3a6, #fcb83d);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#fcf3a6), to(#fcb83d));
}
.green-bauble {
background: #4d8d00;
background: -moz-radial-gradient(center 45deg,circle cover, #d1e5b2, #4d8d00);
background: -webkit-gradient(radial, 40% 40%, 0, 40% 40%, 50, from(#d1e5b2), to(#4d8d00));
}
</style>

<div id="xmas-contenedor">
<ul id="bauble-container">
<li>
<div class="bauble red-bauble">
</div>
</li>
<li>
<div class="bauble blue-bauble">
</div>
</li>
<li>
<div class="bauble yellow-bauble">
</div>
</li>
<li>
<div class="bauble green-bauble">
</div>
</li>
</ul>
<h4>¡Feliz Navidad!</h4>
<p>les desea Ciudad Blogger</p>
</div>

Lo dicho, ¡feliz Navidad a todos!