Hoy navegando por la red me he encontrado con esta web que realiza un efecto muy curioso, me recuerda al que usa Apple en su Mac OS. Y me ha sorprendido el código usado para implementarlo, no se si será muy estandard, pero funciona en IE y en Firefox (si alguien me confirma algun más lo añado).
La implementación es muy facil, y se pueden conseguir efecto muy curiosos sin tener que utilizar javascript para ello.
Necesitaremos declarar unos estilos CSS y una lista de elementos (li).
El CSS
body {
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 85%;
}
li { font-size: 1em; }
li:hover { font-size: 2em; }
li:hover + li { font-size: 1.6em; }
li:hover + li + li { font-size: 1.3em; }
La declaración del body no es necesaria, y lo demás es algo confuso pero si miramos los valores de tamaño veremos que es una escalera que monta referenciandose al posterior con + li.
y el HTML es tan simple como un UL normal.
<ul>
<li>Primero</li>
<li>Segundo</li>
<li>Tercero</li>
<li>Cuarto</li>
<li>Quinto</li>
<li>Sexto</li>
</ul>
Actualización
Trebol-a nos informa que en Opera 9 funciona perfectamente y en Konqueror a medias.
4 comentarios, 0 referencias
+
#