¿Los artículos de tu blog publicados aquí? ¡Propón tu blog!

Cabecera con estilo veraniego

Publicado el 03 agosto 2014 por Johnr @REDEANDOblog
¡Ay que calor hace en agosto! Tomando el sol un ratito tumbado en la playa, se me ocurrio este codigo para decorar el blog. Se trata de un sol animado para que luzca en nuestra cabecera al que le podemos poner un texto y una nube que tambien se mueve de izquierda a derecha sin parar, todo ello realizado con CSS.
ver demo

Si te gusta y quieres ponerlo en tu blog o web para darle un toque veraniego, copia el siguiente codigo y pegalo en tu plantilla antes de la etiqueta </body> y guarda los cambios. Para modificar el texto, hazlo donde esta en indicado en rojo, para el color de este, modifica lo que esta en azul y para el tamaño de la letra, donde esta en color verde.
ver codigo
<div id="sol"><span style="font-size:25px;color:#FF0000;font-family:impact;z-index:3;position:relative;top:60px;left:5%;font-weight:bold;text-shadow: 0px 4px 4px rgba(150, 150, 150, 1);">VERANO 2014</span><div></div><div></div><div></div><div></div></div><div id="nube"></div>
<style>
#sol {
  width: 150px;
  height: 150px;
  position: absolute;z-index:2;
  top: 25px;
  left: 40%;
}
#sol *, #sol *:before, #sol *:after {
  position: absolute;
}
#sol div {
  top: 50%;
  left: 50%;
}
#sol div:before, #sol div:after {
  content: "";
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: inherit;
}
#sol div:before {
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
#sol div:after {
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
#sol div:nth-child(even) {
  -webkit-animation: rotateR 12s infinite linear;
  -moz-animation: rotateR 12s infinite linear;
  -ms-animation: rotateR 12s infinite linear;
  animation: rotateR 12s infinite linear;
}
#sol div:nth-child(odd) {
  -webkit-animation: rotateL 12s infinite linear;
  -moz-animation: rotateL 12s infinite linear;
  -ms-animation: rotateL 12s infinite linear;
  animation: rotateL 12s infinite linear;
}
#sol div:nth-child(1) {
  animation-duration: 49s;
  background: rgba(255, 217, 31, 0.2);
  width: 144px;
  height: 144px;
  margin-top: -72px;
  margin-left: -72px;
  margin-right: 0;
  margin-bottom: 0;
}
#sol div:nth-child(2) {
  animation-duration: 53s;
  background: rgba(255, 217, 31, 0.3);
  width: 138px;
  height: 138px;
  margin-top: -69px;
  margin-left: -69px;
  margin-right: 0;
  margin-bottom: 0;
}
#sol div:nth-child(3) {
  animation-duration: 57s;
  background: rgba(255, 217, 31, 0.5);
  width: 132px;
  height: 132px;
  margin-top: -66px;
  margin-left: -66px;
  margin-right: 0;
  margin-bottom: 0;
}
#sol div:nth-child(4) {
  animation-duration: 61s;
  background: rgba(255, 255, 171, 0.5);
  width: 126px;
  height: 126px;
  margin-top: -63px;
  margin-left: -63px;
  margin-right: 0;
  margin-bottom: 0;
  background-image: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 171, 0.5) 0%, rgba(255, 217, 31, 0.5) 100%);
  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 171, 0.5) 0%, rgba(255, 217, 31, 0.5) 100%);
  background-image: radial-gradient(center, ellipse cover, rgba(255, 255, 171, 0.5) 0%, rgba(255, 217, 31, 0.5) 100%);
}
#nube {
  background:url(http://2.bp.blogspot.com/-XoOHSqzpG84/U9k8t3qN26I/AAAAAAAAMUM/gW0tTzu2PhE/s1600/nube.png);
  width:175px;height:104px;opacity:0.7;z-index:2;
  position: absolute;
  top: 100px;right: 40%;
  -webkit-animation: right 50s linear -3s infinite;
  -moz-animation: right 50s linear -3s infinite;
  -ms-animation: right 50s linear -3s infinite;
  animation: right 50s linear -3s infinite;
}
@-webkit-keyframes right {
  from {
   right: 20%;
  }
  50% {
   right: 70%;
  }
  to {
   right: 20%;
  }
}
@-moz-keyframes right {
  from {
   right: 20%;
  }
  50% {
   right: 70%;
  }
  to {
   right: 20%;
  }
}
@-ms-keyframes right {
  from {
   right: 20%;
  }
  50% {
   right: 70%;
  }
  to {
   right: 20%;
  }
}
@keyframes right {
  from {
   right: 20%;
  }
  50% {
   right: 70%;
  }
  to {
   right: 20%;
  }
}
@-webkit-keyframes shakeOne {
  50% {
   -moz-transform: rotate(68deg);
   -ms-transform: rotate(68deg);
   -webkit-transform: rotate(68deg);
   transform: rotate(68deg);
  }
  100% {
   -moz-transform: rotate(62deg);
   -ms-transform: rotate(62deg);
   -webkit-transform: rotate(62deg);
   transform: rotate(62deg);
  }
}
@-moz-keyframes shakeOne {
  50% {
   -moz-transform: rotate(68deg);
   -ms-transform: rotate(68deg);
   -webkit-transform: rotate(68deg);
   transform: rotate(68deg);
  }
  100% {
   -moz-transform: rotate(62deg);
   -ms-transform: rotate(62deg);
   -webkit-transform: rotate(62deg);
   transform: rotate(62deg);
  }
}
@-ms-keyframes shakeOne {
  50% {
   -moz-transform: rotate(68deg);
   -ms-transform: rotate(68deg);
   -webkit-transform: rotate(68deg);
   transform: rotate(68deg);
  }
  100% {
   -moz-transform: rotate(62deg);
   -ms-transform: rotate(62deg);
   -webkit-transform: rotate(62deg);
   transform: rotate(62deg);
  }
}
@keyframes shakeOne {
  50% {
   -moz-transform: rotate(68deg);
   -ms-transform: rotate(68deg);
   -webkit-transform: rotate(68deg);
   transform: rotate(68deg);
  }
  100% {
   -moz-transform: rotate(62deg);
   -ms-transform: rotate(62deg);
   -webkit-transform: rotate(62deg);
   transform: rotate(62deg);
  }
}
@-webkit-keyframes shakeTwo {
  50% {
   -moz-transform: rotate(-17deg);
   -ms-transform: rotate(-17deg);
   -webkit-transform: rotate(-17deg);
   transform: rotate(-17deg);
  }
  100% {
   -moz-transform: rotate(-23deg);
   -ms-transform: rotate(-23deg);
   -webkit-transform: rotate(-23deg);
   transform: rotate(-23deg);
  }
}
@-moz-keyframes shakeTwo {
  50% {
   -moz-transform: rotate(-17deg);
   -ms-transform: rotate(-17deg);
   -webkit-transform: rotate(-17deg);
   transform: rotate(-17deg);
  }
  100% {
   -moz-transform: rotate(-23deg);
   -ms-transform: rotate(-23deg);
   -webkit-transform: rotate(-23deg);
   transform: rotate(-23deg);
  }
}
@-ms-keyframes shakeTwo {
  50% {
   -moz-transform: rotate(-17deg);
   -ms-transform: rotate(-17deg);
   -webkit-transform: rotate(-17deg);
   transform: rotate(-17deg);
  }
  100% {
   -moz-transform: rotate(-23deg);
   -ms-transform: rotate(-23deg);
   -webkit-transform: rotate(-23deg);
   transform: rotate(-23deg);
  }
}
@keyframes shakeTwo {
  50% {
   -moz-transform: rotate(-17deg);
   -ms-transform: rotate(-17deg);
   -webkit-transform: rotate(-17deg);
   transform: rotate(-17deg);
  }
  100% {
   -moz-transform: rotate(-23deg);
   -ms-transform: rotate(-23deg);
   -webkit-transform: rotate(-23deg);
   transform: rotate(-23deg);
  }
}
@-webkit-keyframes rotateL {
  from {
   -moz-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
  }
  to {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
  }
}
@-moz-keyframes rotateL {
  from {
   -moz-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
  }
  to {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
  }
}
@-ms-keyframes rotateL {
  from {
   -moz-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
  }
  to {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
  }
}
@keyframes rotateL {
  from {
   -moz-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
  }
  to {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
  }
}
@-webkit-keyframes rotateR {
  from {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
  }
  to {
   -moz-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
  }
}
@-moz-keyframes rotateR {
  from {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
  }
  to {
   -moz-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
  }
}
@-ms-keyframes rotateR {
  from {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
  }
  to {
   -moz-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
  }
}
@keyframes rotateR {
  from {
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
  }
  to {
   -moz-transform: rotate(360deg);
   -ms-transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
  }
}
</style>