Nieve en el fondo del blog sólo con CSS

13 de diciembre de 2012 73 comentarios ,

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


73 comentarios en:

" Nieve en el fondo del blog sólo con CSS "

  1. este truco está increíble en verdad, muchísimas gracias por enseñárnoslo y tan fácilmente que lo entendí todito ^^
    eres lo máximo!!!

    ResponderEliminar
  2. Exelente idea Potro, y es super liviano :D

    ResponderEliminar
  3. jajaja, me ahorraste el trabajo, tenía contemplado publicar esto mismo, pero te me adelantaste xD. Ahora lo comparto ya explicado.

    Felices fiestas Potro!!

    ResponderEliminar
    Respuestas
    1. Gracias Karlita, felices fiestas y que te queden ricos los tamales de este año :)

      Eliminar
    2. Una pregunta: ¿Qué son los tamales? Sucede que soy de otro país y no existe eso. Por lo menos no son ese nombre jaja :)

      Eliminar
    3. Una comida mexicana muy rica :)
      http://i46.tinypic.com/9ptjrr.jpg

      Eliminar
  4. Un truco muy bueno, como siempre gracias por compartir con todos los que te seguimos amigo Potro y desde ya te deseo una felices fiestas, un gran abrazo desde Lima Perú =)

    ResponderEliminar
  5. Hola potro tengo un problema para configurar un subdominio en blogger segun tengo que hacer los nuevos registros cename y sigo las istruciones pero me arroja un error, te muestro esta imajen http://i50.tinypic.com/fo0fg5.png ya eintentado de una forma u otra y nada saludos

    ResponderEliminar
    Respuestas
    1. Hola Jerry, deja la pregunta en la entrada que corresponde para no desviarnos del tema de este post.
      Saludos.

      Eliminar
  6. Estimado Potro aunque no hago comentarios muy a menudo, te diré que es raro el día que no entro en Tú Blog, gracias a gente como Tú tengo funcionando 3 blogs en tres colegios el de mi Mujer, mi cuñada y mi sobrina, todo gracias sobretodo a Tus enseñanzas en este blog, espero que dure mucho tiempo. aprovecho para desearte unas Navidades muy felices junto a los tuyos.
    desde Galica ESPAÑA un fuerte abrazo
    Manuel Ortiz

    ResponderEliminar
    Respuestas
    1. Qué amable Manuel, muchas gracias en verdad :)
      Otro abrazo para ti y felices fiestas!

      Eliminar
  7. Esta muy bueno, amigo, ya he agregado varias cosas a mi blog que he sacado de aquí, muchas gracias y si quieres pasate por mi blog de aviación http://gabofav.blogspot.com/ , Saludos!

    ResponderEliminar
    Respuestas
    1. Hola Gabriel Ortega, me ha interesado tu blog, por lo que te he visitado, es muy bueno lo que haces!. Pero queria recomendarte que colocases en tu blog un botón para ir arriba, ya que con las fotos de tus dibujos se hace muy largo. Desde ya es una critica constructiva. En mi opinión le vendría muy bien.

      Aqui tienes un enlace de un post "El Potro" (Ciudadblogger)de como realizar eso, además lo puedes personalizar!

      http://ciudadblogger.com/2012/03/boton-ir-arriba-con-jquery-que-aparece.html

      Saludos!

      Eliminar
  8. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
    Respuestas
    1. Yo lo veo bien, a no ser que no haya comprendido bien cuál es el problema :/

      Eliminar
    2. No lo has comprendido bien, mira como está ahora en mi web, y mira como te comente en el comentario que quería que quedara...

      Eliminar
    3. Pues es que yo lo veo igual, lo único distinto que noto es que conserva el borde (o sombra) del contenedor principal, pero ahí no se puede hacer nada para "romperlo", o se quita todo o se deja todo.

      Eliminar
  9. A mi esto no me funciona, no se que ha podido fallar, pero lo he hecho todo.

    ResponderEliminar
  10. Hola Potro. Sé que no es de ésta entrada pero no lo he encontrado. Hay alguna manera de convertir el perfil de Google+ en Blogger de vuelta?

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Hola, se hace desde este enlace pero, creo que sólo se puede hacer si el cambio tiene menos de 30 días, al menos así era antes:
      http://www.blogger.com/revert-profile.g

      Eliminar
  11. Que lindo potrito, gracias por el tuto, está genial. Xx

    ResponderEliminar
  12. Hola potro, como siempre.. Enhorabuena, podría decir que mis blogs son criaturas tuyas en gran medida, gracias.

    He colocado este codigo exactamente igual en dos blogs que tengo, en uno funciona perfectamente (http://unpienlaluna.com), pero en el otro no (http://ocupaterapia.com) y no se a que puede ser debido. También tengo el problema que los widgets que utilizan jquery dejaron de funcionar de repente en los dos blog.

    Un abrazo y felices fiestas!!

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario Miguel.
      El problema viene de mucho más arriba en un estilo al que le quitaste su llave de cierre }
      Si te fijas, en los estilos de #Text1 h2{ no hay una llave de cierre } lo cual ha hecho que todo lo que pongas debajo como esta nieve, o los estilos de LinkWithin no funcionen:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Un abrazo.

      Eliminar
    2. Muchísimas gracias Potro. Resuelto el problema de la nieve, se ve fantástico.
      He mirado en mil sitios pero el problema del widget escalera de noticias que utiliza jquery sigue sin funcionar en ningún blog, he probado con versiones más nuevas pero nada.

      Eliminar
    3. Desconozco cuál gadget sea Miguel, pero te recomiendo preguntar en el sitio donde lo has tomado, quizá no sea un problema de jQuery sino del propio código.

      Eliminar
    4. Muchas gracias potro, poco a poco va cogiendo forma el blog y desde luego en gran medida gracias a tu ayuda y aportes...

      No pude solucionar lo del JQuery y tuve que eliminar los widgets.

      Actualmente tengo un problema con un espacio que hay entre el menú del blog y las sidebars. Hay mucha distancia y no puedo solucionarlo, he modificado código pero no lo condigo...

      Eliminar
    5. Hola Miguel Angel, he entrado en ambos blogs pero no veo ningún espacio desmedido arriba de las sidebars, supongo que ya lo has resuelto.

      Eliminar
  13. Holaa "El potro".Perfecto...... es la primera vez que edito en HTLM y siguiendo tus pasos he conseguido que nieve en mi blog.
    Un millón de gracias.
    Te mando un cordial saludo desde Toledo-España y por supuesto un "Me gusta".

    MrKikérik.

    ResponderEliminar
    Respuestas
    1. Gracias MrKikérik, y felicidades por el éxito de la nieve :)

      Eliminar
  14. Hola el Potro! quisiera preguntarte como es posible colocar en botón con cuentra regresiva para cerrar las publicidades colocadas en el blog. Si no me entiendes a lo que me refiero, puedes verlo en un sitio web para ver capítulos de Futurama Online ("Futuramizados"), ahi al cargar un capitulo, te da esa opcion, lo cual me parece muy práctico. Desde ya muchas gracias, y quizás puedas usar esto que te digo para crear un nuevo post! saludos!

    ResponderEliminar
    Respuestas
    1. No sé decirte Pato, he visto mucho esos anuncios pero nunca los he usado pues muchos sistemas como AdSense penalizan ese tipo de publicidades, pero seguro en la red encuentras algo.
      Saludos.

      Eliminar
  15. Gracias me re funciono! este si que fue rapido n_n y facil Thx

    ResponderEliminar
  16. Hola potro ante todo felicitarte por el gran trabajo que haces para ayudar a la gente a configurar su blog.
    Desde hace una semana me ha surgido un problema en mi blog y es que no puedo guardar los cambios en la plantilla CSS DE VISTAS DINAMICAS.
    Te estaría muy agradecido si me ayudaras a solucionar este problema.

    ResponderEliminar
    Respuestas
    1. Gracias por tu comentario, ¿recuerdas qué fue lo último que hiciste antes de que eso sucediera? ¿te aparece algún error, cuál? ¿has probado hacer los cambios en otro navegador?

      Eliminar
    2. Lo último que hice fue intentar cambiar la url de la fotografía de cabecera del blog y en ese momento ya no me dejo guardar los cambios(aplicar al blog) y ademas perdí los cambios del diseño de la cabecera anterior.
      He probado con internet explorer y mozilla firefox y tampoco me deja.

      Eliminar
    3. Quizá lo mejor seas que instales de nuevo la plantilla pero eso hará que pierdas todos los cambios que has hecho :(

      Eliminar
  17. Muy bueno Potro! Gracias!
    Lo malo es que lo coloque en mi blog, pero se re cuelga todo lo que es flash, los anuncios de AdSense el Chat, etc. Por se motivo lo tuve que quitar :(
    Felices fiestas!

    ResponderEliminar
  18. gracias ya lo puse,me queda genial con el fondo y cabecera que puse

    ResponderEliminar
  19. Hola Potro, lo primero felicitarte por el gran trabajo que haces.
    Veras, no consigo que me funcione, no se que hago mal, a ver si me puedes decir qué sucede.
    Tengo varios blogs, donde no funciona es en sebulcor.com
    Feliz Navidad

    ResponderEliminar
  20. Hola potro, al igual que manuel ortiz,no comento muy seguido pero tu blog ha sido de gran ayuda para mi blog.
    Yo me alegro que ya estes de vuelta en el blog y que todo este bien!
    Tengo una consulta que no tiene que ver con este tema, y quisiera ver si en lo posible me puedes ayudar.
    Se que sera facil para ti jejeje porque el problema no es complicado pero como yo no se mucho no logro dar con el problema, tiene que ver con el blanco que que esta debajo de los post, no el primero sino el segundo, AL HACER CLIC EN LA ENTRADA O EN UN ENLACE QUE REDIRECCIONES A ALGUNA ENTRADA PUBLICADA EN MI BLOG mira como se ve, y deveria verse como se muestra en INICIO:
    http://www.imgus.net/bilder/24125b969aae416ac045f4ee9035a761.jpg

    Esto no pasa siempre, algunas veces se ve bien al entrar a alguna entrada, pero la mayoria de veces se ve como en la imagen.

    Por favor Potro, dejame saber donde puedo explicarte mejor sobre esto para que me ayudes!!!
    Quizas sea algun codigo que force al fondo a quedarse fijo, pero no entiendo porque se sale el cbox hacia fuera.
    Aqui mi blog, gracias anticicadas corazon!
    Feliz Navidad
    http://confiaen-cristo.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Muchas gracias por tu comentario. ¿Recuerdas cuál fue el último cambio que hiciste?
      Es probable que algún gadget o elemento que añadiste haya ocasionado que deje de funcionar el script que oculta el chat, del mismo modo algún cambio que hiciste pudo haber hecho que en las entradas individuales el fondo se vea de esa forma, pero sólo tú sabes qué cambio has añadido, yo desde el código fuente de la plantilla no me he podido enterar :(

      Eliminar
  21. Potro gracias a http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html solucioné mi problema, faltaba una llave por encima del código.

    ResponderEliminar
    Respuestas
    1. Excelente, me imaginé que ese podría ser el problema :)
      Feliz Navidad.

      Eliminar
  22. A mí se me sobrecargó el blog cuando lo puse. Tuve que quitarlo. Es una lástima...

    ResponderEliminar
    Respuestas
    1. A mí no me ha pasado eso pese a que lo he probado en varios blogs, aun así están las otras opciones para que nadie se quede sin la nieve :)

      Eliminar
  23. Hola potro!
    Te deje un mensaje, porfis
    dejame saber si me puedes ayudar!
    Gracias

    ResponderEliminar
    Respuestas
    1. Ya te he respondido, es sólo que se van respondiendo conforme van llegando, y estos días tengo menos tiempo que el de costumbre ;)

      Eliminar
  24. Muchas gracias, me encantó, ¡queda precioso! :3

    ResponderEliminar
  25. En argentina hace mucho calor !

    ResponderEliminar
  26. En argentina hace mucho calor!! :) Saludos a españa

    ResponderEliminar
  27. Hola Potro ! Me encanta todo lo que veo en tu blog, pero no pude hacer nevar en el mío. Copié todo tal cual está en las instrucciones y ... nada. Qué puede estar pasando?

    ResponderEliminar
    Respuestas
    1. Hola Mariana, entré al blog de tu perfil y veo la nieve cayendo, parece que sí lo has conseguido :)

      Eliminar
  28. Sí Potro. Después de mucho luchar me salió. Gracias !!!! El tema es que ahora empieza septiembre y lo quiero cambiar. Hay algo así como flores que caigan? O algo que tenga onda primaveral?

    ResponderEliminar
    Respuestas
    1. Lamentablemente no hemos incluido nada en la sección de Festividades en torno a la primavera :(

      Eliminar
  29. Que tal Potro, esta muy genial tu blog :) y la nieve me funciona muy bien, solo que se veria mejor si el cuerpo principal de mi blog tuviera cierta transparencia, sabes como puedo hacer eso?

    ResponderEliminar
    Respuestas
    1. Hola Lalo, qué parte exactamente quieres que tenga transparencia y en cuál blog.

      Eliminar
  30. hola yo quisiera en vez de nieve poner plumas me podeis ayudar porfavor?

    ResponderEliminar
  31. hola me encanta lo de nevar pero yo quiero poner plumas cayendo en vez de nevar me podeis ayudar?

    ResponderEliminar
    Respuestas
    1. Hola, usa este método:
      http://ciudadblogger.com/2009/11/nieve-en-el-blog.html

      Abre el archivo que se descarga y al inicio de él verás la URL de una imagen, sustitiye esa URL por la de la imagen de la pluma.

      Eliminar
  32. Tremendo aporte potro, me sirvió mucho. gracias!!

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger