Fondo de noche estrellada para el blog

2 comentaron



En realidad se trata de un codigo muy sencillo, utilizando las posibilidades que nos da el CSS (en este caso el CSS3), las aprovecharemos para que nos de un fondo original sin recargar demasiado nuestra pagina.

Indicado para los blogs o webs con el background principal oscuro, podemos mostrar a modo simulatorio unas estrellitas que centellean y parpadean sin parar como si el fondo de nuestro sitio se pareciera a un universo relajante.

Para este tipo de asuntos, se suelen utilizar imagenes o texturas en formato gif, lo cual puede retardar un poco la carga de dicha pagina. Por eso y como ya he comentado anteriormente, he usado 2 imagenes estaticas y el CSS para darles las animaciones y transiciones pertinentes con un efecto suave, a la par que elegante y muy muy 'ligero' a nuestro querido body.

Puedes ver una demo de como queda clicando aqui. Si te ha gustado y quieres ponertelo en tu pagina, copia el codigo de abajo y pegalo entre las etiquetas <body> de tu plantilla.


ver codigo fondo de noche estrellada
<div class="estrellas"></div>
<style>
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
.estrellas {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

body {
  background:#000 url(http://1.bp.blogspot.com/-q7NYia_DjQI/U4t7_J4gwwI/AAAAAAAAMKo/nru4YxfjK6I/s1600/estrellas.png) repeat top center;
}

.estrellas{
  background:transparent url(http://3.bp.blogspot.com/-FwB8aSiMBmI/U4t9MkimRrI/AAAAAAAAMK0/FAlqX8ZFyu8/s1600/twinkling.png) repeat top center;
  z-index:-2;

  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 100s linear infinite;
  animation:move-twink-back 100s linear infinite;
}
</style>