SEGUIDME EN TWITTER

VAMOS, SEGUIDME EN TWITTER. AHORA REDEANDO SEGUIRA EN UN TONO DISTINTO Y SEGUIRA MOLANDO TANTO O MAS QUE ANTES. DADLE CLICK ABAJO Y UNIROSA MI CUENTA DE TWITTER.

Iconos sociales Oro, Plata y Bronce

Aha-Soft nos proporciona gratuitamente estos 3 packs de iconos sociales con los tonos y colores de estos metales nobles para que los pongamos en nuestro blog.

Cada pack contiene 221 iconos de cada tamaño, disponibles en estas dimensiones: 24x24, 32x32, 40x40, 48x48, 64x64, 72x72, 96x96 píxeles, en formato PNG, ICO y formatos ICNS.

Elige el que mas te guste y descargatelo:

ICONOS ORO

ICONOS PLATA

ICONOS BRONCE

leer articulo ➨

Cabecera con estilo veraniego

¡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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZCP316I7vvFzrLwg8Uy2IR4xp9xAUpIl8eQfUrtvnE8RV0ftw2dYMAG4nBcPrBOkLqxuVbbinIU52ifnyNSy5I7Qtxnkg6uZx8Eif4RbtSI_cZKZxQizkrDoW1GVo04vzW3QlsTd-cSw/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>

leer articulo ➨