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ó...
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í:
1
2
3
4
5
6
7
8
9
| .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:
1
2
3
| .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.
