Zoom sobre texto con CSS3 usando transiciones

Otra nueva entrada sobre las virtudes de CSS3, en este caso vamos a hacer una pequeña introducción a las transiciones creando un código que nos permita que la letra de un párrafo aumente de tamaño cuando el ratón esté sobre ella.

Para ello por un lado tendremos que definir la transición sobre el elemento a modificar y luego la modificación cuando se produzca el evento.

Lo primero sería así:

.aumenta {
    font-size: 1.1em;
    width: 300px;
 
    -moz-transition: font-size 500ms linear 0s; 
    -webkit-transition: font-size 500ms linear 0s;
    -o-transition: font-size 500ms linear 0s;
    transition: font-size 500ms linear 0s;
}

Explicación: tras definir el tamaño del texto para la clase aumenta (1.1 em) definimos la transición. Hay varios métodos para la transición, así que he usado la propiedad shorthand de transition. El primer parámetro (font-size) es para especificar a qué propiedad se aplicará la transición, el segundo el tiempo que tardará, el tercero que se hará siempre a la misma velocidad (linear) y el cuarto que se haga sin delay.

Y ahora que tenemos la transición definida para todos los navegadores (ojo!!! Explorer 9 no soporta todavía transiciones, dice Bill Gates que igual para la 10) toca definir cómo se transformará el texto cuando esté sobrevolado por el ratón:

.aumenta:hover{
    font-size:1.6em;
}

Definimos que en el evento hover la fuente pase a ser más grande. Con esto ya tenemos nuestra transición lista.

Anuncios

Un comentario en “Zoom sobre texto con CSS3 usando transiciones

  1. Hola, llegue aquí porque haciendo exactamente lo mismo que tu sucede que funciona perfecto en mozilla, opera etc,e etc, pero en Google Chrome la transición se ve lenta, como trabada… y ya no se como solucionarlo. Tienes alguna idea de porque sucede?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s