Hacker of the Web
Tus ideas en código!...y mas

Estas en: > > CSS3: Anima todos los enlaces en tu Blog

CSS3: Anima todos los enlaces en tu Blog

Enlace
Los enlaces en una página web no siempre son bonitos, claro que se puede cambiar esto con un que otro efecto con pesados algoritmos Javsacript. Pero sin duda CSS3 es la manera mas rápida y facil de lograr crear un efecto con los enlaces en nuestro blog, mira un ejemplo:

Un enlace

Se ve bastante bien, solo necesitamos de CSS3 y lo mejor de todo es que Firefox, Chrome y Opera soportan esta propiedad. Si te interesa el efecto, manos a la obra! El código CSS, que realiza la función de cambiar suavemente el color es la siguiente: 
a{
 color:gray; 
 -webkit-transition: color .6s linear;
 -moz-transition: color .6s linear;
 -o-transition: color .6s linear;
}
a:hover{
 color: rgb(130,30,30);
 -webkit-transition: color .3s linear;
 -moz-transition: color .3s linear;
 -o-transition: color .3s linear;
}

Donde el texto en color:

gray: Es el color inicial que tendrán los enlaces

rgb(130,30,30): Es el color final que tendrán los enlaces

El proceso para agregar el efecto al blog, que seguro ya muchos de ustedes los conoces es el siguiente:

[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í:
a{
 color:gray; 
 -webkit-transition: color .6s linear;
 -moz-transition: color .6s linear;
 -o-transition: color .6s linear;
}
a:hover{
 color: rgb(130,30,30);
 -webkit-transition: color .3s linear;
 -moz-transition: color .3s linear;
 -o-transition: color .3s linear;
}]]></b:skin>
 Solo con esos tres pasos los enlaces de tu blog lucirán un bonito efecto! Puedes cambiar el tiempo que tarda, solo reemplaza los ".6s" y ".1s" por el tiempo que desees!
Por: Unknown
En que se publicó
Etiquetas , , ,
#

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.

Emoticons
Comenta con tu:
Comenta:

7 comentarios !

Inmortal dijo...

Hey se ve bien, la ventaja de estos efectos es que no necesitamos Scripts, así aligeramos un poco la carga.

Saludos Santy.

ReverieM dijo...

Genial, CSS3 está salvándome de muchas, y tu ayuda también Santy, muchas gracias! ;-)

La hormiguita dijo...

Y si uno lo quiere poner en un artículo nada mas y no en todo el blog? o en una web? se puede?

Unknown dijo...

La hormiguita, si se puede. incluso se puede solo para unas pocas palabras como en el ejemplo que coloque. Solo es necesario especificar un poco de código. Por ejemplo puedes utilizar este código CSS:

.animar{
color:gray;
-webkit-transition: color .6s linear;
-moz-transition: color .6s linear;
-o-transition: color .6s linear;
}
.animar:hover{
color: rgb(130,30,30);
-webkit-transition: color .3s linear;
-moz-transition: color .3s linear;
-o-transition: color .3s linear;
}

Sigues los pasos que doy en este artículo pero con este código, después a cada elemento que quieras agregar el efecto colo modificalo de la siguiente manera:

ANTES:
<div>Este es un elemento de tu página web</div>

DESPUES:
<div class='animar'>Este es un elemento de tu página web</div>

Puedes hacer eso con cualquier elemento de tu página web que quieras!

jose cruz chavez dijo...

te quedó bien la animación, gracias por compartirla

Unknown dijo...

lo tengo en una clase dentro de una caja como hago?

Unknown dijo...

Juan David Soto Martinez, Hola!

Depende de la maquetacion de tu blog, depende mucho de si tiene una clase o si solo es un div, en todo caso seria de la siguiente forma:

[algun selector CSS de la caja, (.clase, #id, etiqueta)]{
/*CSS*/
}

Es un tanto dificil comprender lo de arriba, por que no pones un enlace hacia tu blog y lo vemos mas especificamente! ;)


Página Principal
Arriba