Páginas

▼

17 junio 2011

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!
a la/s

7 comentarios:

  1. Inmortal6/17/2011 09:51:00 p.m.

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

    Saludos Santy.

    ResponderBorrar
  2. ReverieM6/18/2011 12:45:00 a.m.

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

    ResponderBorrar
  3. La hormiguita6/19/2011 06:40:00 a.m.

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

    ResponderBorrar
  4. Unknown6/21/2011 10:29:00 p.m.

    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!

    ResponderBorrar
  5. jose cruz chavez10/16/2013 05:16:00 p.m.

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

    ResponderBorrar
  6. Unknown9/09/2014 09:49:00 a.m.

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

    ResponderBorrar
  7. Unknown11/14/2014 10:12:00 p.m.

    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! ;)

    ResponderBorrar

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.