La plataforma Futudownloads está en desarrollo.

3 mar. 2012

Truco: Texto Animado con Shadow

Este es una animacion a base de CSS que crea una sombra hacia atras de un texto
  • Ve a Plantilla
  • Luego das click en edicion de HTML
  • Luego click en expandir plantilla de artilugios
  • Luego agregar lo aiguiente antes de ]]></b:skin>

/* entire wrapper */
#animationWrapper  {
  width:300px; /* ancho de la animacion */
  font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif; /* Tipo de fuente */
  background:transparent; /* fondo */
  padding:40px; /* espacio entre el texto y los demás */
}

/* link which encapsulates SPANs */
#animationWrapper a {
  font-weight: 800; /* letra tipo negrilla */
  text-transform: uppercase; /* transformacion del texto */
  font-size: 42px; /* tamaño de fuente */
  line-height: 0.9em;
  margin-bottom: 10px; /* espacio debajo del texto */
  display: block;
  position: relative;
  color: #E58; /* color del texto */
  text-decoration: none; /* decoracion del texto */
}

/* span and a - "workers" */
#animationWrapper a, #animationWrapper span {
  -webkit-transition: all 0.12s ease-out; /* Tiempo de animacion */
  -moz-transition: all 0.12s ease-out; /* Tiempo de animacion */
  -o-transition: all 0.12s ease-out; /* Tiempo de animacion */
  -ms-transition: all 0.12s ease-out; /* Tiempo de animacion */
  transition: all 0.12s ease-out; /* Tiempo de animacion */
}

#animationWrapper span {
  display: block;
  color: #555; /* color y tamaño del texto de renglon fijo */
  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black; /* color y tamaño del shadow de renglon fijo */
}

/* special size for the first item */
#animationWrapper .span1 {
  font-size: 76px; /* tamaño del texto de renglon fijo 1 */
  line-height: 0.8em;
}

#animationWrapper a:hover {
    color: #fff ; /* color del texto al pasar el mouse */
    top: -3px;
    left: -3px;
}

/* all spans become white */
#animationWrapper a:hover span {
  color:#fff; /* color del texto al pasar el mouse */
}

/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E; /* color y tamaño del shadow de renglon 1 */
}

#animationWrapper a:hover .span2 {
    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90; /* color y tamaño del shadow de renglon 2 */
}

#animationWrapper a:hover .span3 {
    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7; /* color y tamaño del shadow de renglon 3 */
}

#animationWrapper a:hover .span4 {
    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58; /* color y tamaño del shadow de renglon 4 */
}
  • guardar Plantilla
  • luego en cualquier entrada o de gadget puede agregar el texto de la siguiente forma
<div id="animationWrapper">
  <a href="#">
    <span class="span1">Texto renglon 1</span>
    <span class="span2">Texto renglon 2</span>
    <span class="span3">Texto renglon 3</span>
    <span class="span4">Texto renglon 4</span>
  </a>
</div>
  • Y se vará el ejemplo.
  • Mira este ejemplo.