MAPA DEL SITIO

GRACIAS A TU DONACION ESTA PAGINA PODRA SEGUIR FUNCIONANDO
Comentarios de Puntadas católicas
COMPARTE ESTA ENTRADA





SIGUENOS
Síguenos en TwitterSiguenos en FacebookSiguenos en Google+Siguenos en PicasaSiguenos en YouTubeSiguenos en BloggerSiguenos en Blogger


Nieve en el fondo del blog sólo con CSS

Publicado por  El Potro Ciudad Blogger



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:
/* Nieve en el fondo del blog
----------------------------------------------- */
@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(http://lh3.googleusercontent.com/-k6mAvDmeu4Q/UMefU6JI32I/AAAAAAAADpM/zdjTclnGDhM/s500/snow.png), url(http://lh6.googleusercontent.com/-8wOkQAdxfgg/UMefVfmte0I/AAAAAAAADpU/aE4HxfiXD88/s400/snow3.png), url(http://lh5.googleusercontent.com/-fhO2tXwKP9M/UMefVCohCOI/AAAAAAAADpQ/nFVnzK1W0xw/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;
}
Ahora busca la etiqueta <body> o esta línea:
<body expr:class='&quot;loading&quot; + 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

Tal vez te interese

Related Posts Plugin for WordPress, Blogger...
TRANSLATE


EnglishcvFrenchGermanSpainItalianDutchRussianPortugueseJapaneseKoreanArabicChinese Simplified

Archivo del blog

Entradas populares

Seguidores

 
Gadget de animacion Social - Widgets para Blogger

[PR] 求む!タイピング初心者