Hemos visto algunas maneras de poner nieve en el blog, �sta en particular me parece atractiva dado que no necesitamos usar scripts, s?lo CSS y tres peque?as im?genes. La idea es de Joshua Johnson y puedes ver el demo en este blog de pruebas.
Una ventaja de �ste m�todo es que al no utilizar scripts no sobrecargamos el blog, la desventaja es que usuarios con navegadores no modernos no podr?n verlo (en Internet Explorer funciona de la versi?n 10 para arriba).
La nieve caer? en el fondo del blog, no encima de �l, lo cual adem?s de evitar que se obstruyan enlaces y contenido (porque los copos son im?genes), evitar? tambi�n que se obstruya la visibilidad del contenido del blog.
Para poner esta nieve en el fondo de tu blog entra en Plantilla | Edici?n de HTML y antes de
]]></b:skin> pega esto:
]]></b:skin> pega esto:
/* Nieve en el fondo del blogAhora busca la etiqueta <body> o esta l?nea:
----------------------------------------------- */
@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;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#contenedor-nieve {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg822W10L4eKH9AjIJ6b0OmRPcujuDF795EyXaUXMk55pHGVqIIYwddCW2EiWrkM0E3rWZVS4-11GqLbdtG-4coO6Wa2U3ojxF7gykphPL2uFjiJu93huBB4vT5IbXCK2_FuNgeehcoOVc/s500/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil3Emlx7U7FT12W2ZJxS25d6lYtgQZZv4Hzv1TK2UfckRPawq7pEDhln64Uvou3sPwLqkIyx8UhaKSNdawQACdIBY9XWJO3hFVcdDT5GhyepWBFiIxoI8qAJ3dGzaxV59BfllhrqgMav8/s400/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqr3P4bZG2IA78Auj7tUmNXaUw548gDh0IoHNVeLwQvFvInBqs0GNnD-IGm2JQP7CKBJP-l2E65rGBLsgRLuv_yL2MVrRxvT67JCSMbf_Hez1kRhfrZOmkDtv78CeV4Wk6uTX0TUy4e4/s300/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}
<body expr:class='"loading" + data:blog.mobileClass'>
Y debajo de cualquiera de las dos agrega esto:
<div id='contenedor-nieve'>
Por ?ltimo busca la etiqueta </body> y arriba de ella agrega:
</div>Guarda los cambios y listo.
Como puedes apreciar es un m�todo sencillo, f?cil de instalar, no obstruye el contenido del blog, y lo mejor es que no tiene nada de scripts, s?lo bondades del CSS y nada m?s.
Si prefieres un m�todo que no sea en el fondo del blog sino encima de �l, y que funcione en todos los navegadores entonces estas dos opciones podr?n servirte:
Nieve en el blog que se acumula al final de la p?gina
Nieve en el blog
No comments:
Post a Comment