Efecto 3D

Codigo para efecto 3D !!!
















Hoy vamos a ver un código que te permite lograr un efecto de cambio de colores al pasar el mouse sobre el texto


<style> #animationWrapper { width:200px; /*Ancho del gadget*/ font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif; background:#222; /*Color del fondo del gadget*/ padding:40px; } /* link which encapsulates SPANS */ #animationWrapper a { font-weight: 800; text-transform: uppercase; font-size: 42px; /*Tamaño de las letras 2, 3 y 4 */ line-height: 0.9em; margin-bottom: 10px; display: block; position: relative; color: #E58; text-decoration: none } /* span and a - "workers" */ #animationWrapper a, #animationWrapper span { -webkit-transition: all 0.12s ease-out; -moz-transition: all 0.12s ease-out; -o-transition: all 0.12s ease-out; -ms-transition: all 0.12s ease-out; transition: all 0.12s ease-out; } #animationWrapper span { display: block; color: #555; /*Color de la letra por defecto*/ 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; } /* special size for the first item */ #animationWrapper .span1 { font-size: 56px; /*Tamaño especial para sólo el primer item - letra 1*/ line-height: 0.8em; } #animationWrapper a:hover { color: #fff ; top: -3px; left: -3px; } /* all spans become white */ #animationWrapper a:hover span { color:#fff; } /* 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; } #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; } #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; } #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; } </style><br /> <center> <br /> <div id="animationWrapper"> <a href="LINK-DEL-ENLACE-A-REDIRECCIONAR"><br /> <span class="span1">Hola</span><br /> <span class="span2">te gusta</span><br /> <span class="span3">este</span><br /> <span class="span4">efecto?</span><br /> </a><br /> </div> </center>



 Ahora podes realizar los siguientes cambios en el gadget:
> Puedes agregar el mensaje en el gadget reemplazando: Hola te gusta este efecto. Puedes poner además un enlace a redireccionar en la parte  que dice LINK-DEL-ENLACE-A-REDIRECCIONAR.
> Por defecto ves que el gadget tiene colores oscuros, ideal para blogs con fondos y diseños oscuros.
> Te darás cuenta que los colores no tienen los 6 dígitos de los colores hexadecimales, sino sólo 3.
En la paleta, al pasarle el cursor al color deseado, verás los 3 dígitos:

Al costado de los códigos , verán una descripción que que corresponde a la parte del gadget que cambiará ya sea el color ó tamaño, por si decides hacerlo.
Ten en cuenta que en algunas partes del código, los dígitos de los colores están repetidas varias veces, y si decides cambiarlo recuerda que deberás reemplazarlos por el mismo código del color que has elegido las veces que se muestren en el código.

Luego de haberlo ajustado a tu gusto, guarda los cambios y listo.

Recuerda que:

•  Para facilitar la búsqueda de un código en tu plantilla ó gadget, debes presionar la tecla Ctrl seguido de la tecla F. En la ventana de búsqueda que aparece, coloca el código que estás buscando y allí lo encontrarás.
•  Si editas directamente el código HTML en tu plantilla, es importante que siempre guardes una copia de seguridad de la misma antes de cualquier modificación.

Hola
te gusta
este
efecto?

Tweet