Texto de ejemplo
Muy pocos sitios web utilizaban este tipo de efectos con Javascript, debido a la dificultad del Javascript para crear este tipo de efectos. Por lo que con la facilidad para aplicarlo con CSS se espera que se difunda por muchos sitios web.
La propiedad que cambia dinámicamente el color de fondo es de nuevo CSS3:transition, que es la misma que utilizamos para girar elementos, animar los enlaces y también para agrandar imágenes o texto, todo al pasar el mouse.
El código CSS es el siguiente:
Ahora solo debemos instalarlo en el blog de la siguiente manera:En donde:
gray: Es el color inicial, puedes cambiarlo por cualquier color.
blue: Es al color que cambia cuando pasa el cursor por encima del elemento que queramos. Puedes cambiarlo por cualquier color.
1s, se repite varias veces, por la compatibilidad de varios navegadores. Es el tiempo que tarda para cambiar el color de fondo. Puedes cambiarlo por el tiempo que desees anotándolo en segundos
[1]Entramos al panel de Diseño>Edicion HTML>Sin expandir plantillas de artilugios
[2]Buscar con
Ctrl+F:
]]></b:skin>
[3] Justo antes de
]]></b:skin>pegar el código CSS3, quedará algo así: Ahora en donde quieras colocar este buen efecto, tendrás que modificar el elemento de la siguiente manera:
Antes
Despues
Es solo cuestión de imaginación, podemos colocar este efecto a nuestro gadget de "Archivo del Blog", puedes echar un vistazo a mi gadget "Explora la Web" y pasa el mouse por encima. El CSS que utilizé es el siguiente: Están feos los colores que uso, pero próximamente crearé una entrada para personalizar el "Archivo del blog" con todo el poder de CSS3 puro y duro!! En la que utilizaré ya en práctica girar elementos, animar los enlaces y agrandar imágenes o texto esperenlo :P
Si te gusto, si hay cometí algún error, si te aburre comenta!!
Hace 13 años que se publicó
Deja tu huella y comenta!
Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.
Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional
Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.