27 diciembre 2012

Fuegos Artificiales en el fondo del Blog solo con CSS



Otro efecto más para agregar estos días a tu blog, son los fuegos artificiales y para ello os demuestro como colocarlos con motivo de fín de año.
Para colocar estos Fuegos Artificiales no nesecitamos usar scripts, sólo CSS y dos pequeñas imágenes. La idea está extraida de Joshua Johnson y puedes ver la demo en Efectos de Navidad.

fuegos artificiales

La ventaja de este método es que al no usar script de ningún tipo, como vimos anteriormente en Fuegos artificiales en el blog, no sobrecargamos en demasía el blog.
Para colocar los fuegos en el fondo de tu blog entra en Plantilla | Edición de HTML y antes de ]]></b:skin> pega esto:

/* Fuegos Artificiales en el fondo del blog
----------------------------------------------- */
@keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-moz-keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-webkit-keyframes fire{
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
@-ms-keyframes fire {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
#contenedor-fuego {
background-image: url(http://www.sologif.net/Celebraciones/Fuegos-Artificiales/fuegos-artificiales-07.gif), url(http://img.123gif.es/fuegos-artificiales/fuegos-artificiales-17.gif);
-webkit-animation: fire 40s linear infinite;
-moz-animation: fire 40s linear infinite;
-ms-animation: fire 40s linear infinite;
animation: fire 40s linear infinite;
}

Ahora busca la etiqueta <body> en las plantillas antiguas, o éste código en las plantillas nuevas:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Y debajo de cualquiera de las dos agrega esto:
<div id='contenedor-fuego'>

Por último busca la etiqueta </body> y arriba de ella agrega:
</div>
Guarda los cambios y listo.

PD: La desventaja de este método es que usuarios con navegadores no modernos no podrán verlo (en Internet Explorer funciona de la versión 10 para arriba).


Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

3 comentarios

Todo tutorial para mejorar el blog siempre es bienvenido pero creo que de esto puede ser un problema para algunas personas ya que con esto, se le congela a veces el navegador.

¡Feliz Navidad y próspero año nuevo!
www.mallorketas.com

De los mejores blog que he visto, lo suelo visitar con frecuencia
Sigue asi!!!

Este comentario ha sido eliminado por el autor.

Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"