Mensaje de navidad al estilo de Google

Si pones en Google «Feliz navidad» en Google veras como la parte superior de la pestaña esta adornada por un hermoso efecto navideño, si ya te has dado cuenta de este espectacular y lo quieres reproducir en tu blog pues estas de suerte ya que gracias a Oloman podremos reproducir este genial truco.

El efecto es el siguiente:

Aquí se muestra el mismo efecto pero con pequeño letrero:

Para agregar el primer efecto en tu blog basta con ir a la parte de HTML de una entrada o pagina o en su defecto pegar en un gadget HTML/Javascript lo siguiente:

<style>
#santa {
position: relative;
top: 0;
left: 0;
display: block;
overflow: hidden;
width: 100%;
height: 60px;
margin:0;
padding: 0;
background: url(http://2.bp.blogspot.com/-2BxrUYsoSqg/UriG_vd_s6I/AAAAAAAANXQ/Aw6SwhN_0Xo/s1600/xmas_bg_n.gif) left bottom;
}
#santa:before {
position: absolute;
bottom: -2px;
left: -200px;
content: "";
display: inline-block;
width: 200px;
height: 26px;
background: url(http://3.bp.blogspot.com/-MNPP0LybX3s/UriG_hJ3_RI/AAAAAAAANXI/tnJM5ST1c4U/s1600/xmas_santa_n.gif) transparent no-repeat;
-webkit-animation-delay: 4s;
-webkit-animation-duration: 20s;
-webkit-animation-name: santamove;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-delay: 4s;
animation-duration: 20s;
animation-name: santamove;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#santa:after {
position: absolute;
bottom: -2px;
left: 0;
content: "";
display: inline-block;
width: 100%;
height: 10px;
background: url(http://2.bp.blogspot.com/-7AAp-DeUbiU/UriG_rQ_U9I/AAAAAAAANXM/8cL4PBKChno/s1600/xmas_snow_n.png) transparent repeat-x;
}
@-webkit-keyframes santamove {
from {left: 0%;}
to {left: 200%;}
}
@keyframes santamove {
from {left: 0%;}
to {left: 150%;}
}
</style>
<div id='santa'></div>

Para agregar el segundo efecto, omite el anterior código y en su lugar pega el segundo:

<style>#santa {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 60px;
  margin:0;
  padding: 0;
  background: url(http://2.bp.blogspot.com/-2BxrUYsoSqg/UriG_vd_s6I/AAAAAAAANXQ/Aw6SwhN_0Xo/s1600/xmas_bg_n.gif)  left bottom;
}
#santa:before {
  position: absolute;
  bottom: -2px;
  left: -200px;
  content: "";
  display: inline-block;
  width: 200px;
  height: 26px;
  background: url(http://3.bp.blogspot.com/-MNPP0LybX3s/UriG_hJ3_RI/AAAAAAAANXI/tnJM5ST1c4U/s1600/xmas_santa_n.gif) transparent no-repeat;
  -webkit-animation-delay: 4s;
  -webkit-animation-duration: 20s;
  -webkit-animation-name: santamove;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-delay: 4s;
  animation-duration: 20s;
  animation-name: santamove;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
#santa:after {
position: absolute;
bottom: 0;
left: 0;
content: "";
display: inline-block;
width: 100%;
height: 10px;
background: url(http://2.bp.blogspot.com/-7AAp-DeUbiU/UriG_rQ_U9I/AAAAAAAANXM/8cL4PBKChno/s1600/xmas_snow_n.png) transparent repeat-x;
}
@-webkit-keyframes santamove {
  from {left: 0%;}
  to {left: 200%;}
}
@keyframes santamove {
  from {left: 0%;}
  to {left: 150%;}
}
#cabecera {
  position: relative;
  margin: 40px 0;
  color: white;
  font: 30px impact;
  line-height: 34px;
  text-align:center; 
  text-shadow:  0 0 8px blue;
}
#cabecera:after {
  content:"Aquí va el texto mostrado en el cuadro";
  display: block;
  color: blue;
  opacity: .1;
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}</style><br />
<div style="-moz-box-shadow: 1px 1px 3px #999; -webkit-box-shadow: 1px 1px 3px #999; background: white; background: white; border: 4px solid #eee; box-shadow: 1px 1px 3px #999; margin: 30px auto; max-width: 94%; padding-bottom: 20px; width: 1000px;"><div id="santa"></div><div id="cabecera">Aquí va el texto mostrado en el cuadro</div></div>

Para poner tu propio texto solo debes eliminar la parte resaltada en color azul y poner el texto que tu quieras.

Este efecto esta hecho con CSS por lo que es relativamente sencillo de crear.

Espero que te haya gustado este truco y por favor compártelo en tus redes sociales.