CSS: Hacer zoom

Para los que no conozcan lo que es CSS (Cascading Style Sheets) se traduce en "Hoja de Estilos en Cascada". Es una definición bastante acertada de lo que nos proporciona y una de las grandes cosas que ha dado la web. Permite cambiar la "forma de ver" una misma página con sólo hacer unos pequeños cambios en un archivo de este tipo (.css), que llevará todos los estilos de los elementos de nuestra página.

Su autodefinición "en cascada" se refiere a que la descripción de estilos también se ve afectada con la relación de un elemento con el resto de la página (por ejemplo si definimos un estilo con el fondo gris y fuente arial con color azul, todos los elementos que marquemos con con ese estilo tendrán el mismo, así como lo que haya dentro de sus etiquetas HTML aunque no se especifique literalmente, y sólo lo tendremos que haber definido una vez). En caso de conflicto importa más el estilo definido más específicamente (si definimos que uno de los elementos internos a nuestro ejemplo anterior debe tener la fuente negra, tendrá este color en vez del azul marcado para su contenedor).
Si queréis saber la sintaxis de CSS podéis visitar el sitio web del World Wide Web Consortium que son los encargados de marcarla a nivel mundial, aunque también he de decir que dependiendo del navegador que usemos, y su versión, los resultados pueden variar mucho.

Si bien lo básico trata de elegir tipo, tamaño o color de letra, color de fondo, posición, tipo de bordes, etc... lo más interesante es que con la versión 3 hay una serie de transiciones y transformaciones que se pueden definir al activarse por ejemplo los siguientes eventos:

• hover: pasar el ratón por encima
• active: pulsar sobre el elemento
• focus: elegir como elemento actual

Suelen conseguirse unos efectos bastante espectaculares y profesionales sin intervenir por medio ningún lenguaje de programación.

Sirva esta entrada de somera introducción a lo que es CSS y pasemos al truco que os quería mostrar hoy: hacer zoom sobre un elemento de una página con CSS. El resultado es como el de abajo.

Todo lo que este en la capa hace zoom, incluido texto, etc... a menos que uses de navegador IE.

Esta preparado para que:

• al pasar el ratón sobre la capa de la imagen aumente su tamaño al triple.
• al mantener pulsado el botón de ratón sobre ellos, se reduzca a la mitad.

Aquí dejo un enlace a un paquete donde tengo tres archivos para la demostración:

• pruebaZoom.htm: página con la demostración que os quiero mostrar.
• zoom.css: archivo CSS con la definición de estilo para los elementos.
• image.jpg: imagen utilizada en el ejemplo.

Lo descargáis y abrís pruebaZoom.htm para ver el resultado en local. Lo mejor es que molifiquéis el código para ver las diferencias. En este ejemplo añadí dos controles tipo "input" donde podéis distinguir los efectos de antes más otro que ocurre cuando el cursor está dentro del input (hacerle focus) y hace que doble su tamaño.

En el fichero CSS veréis que parece repetirse una y otra vez lo mismo. Esto tiene su explicación y tiene que ver con la dependencia que tiene CSS con el navegador que se usa. Por ejemplo, en la definición del estilo de clase .claseZoom cada línea que veis terminada con transform y que sólo cambia el prefijo es una línea para cada navegador (moz=mozilla, web-kit=chrome, o=opera y ms=IE). Para vuestras pruebas os sugiero cambiar sólo la línea de vuestro navegador si sólo vais a usar uno. Por otra parte podéis eliminar las dos últimas lineas ya que IE aún no lo soporta y la que no tiene prefijo es la sintaxis estándar que no es soportada por ningún navegador ;-)

Seguro que se os pasa por la cabeza lo poca elegancia que tiene el input haciéndose grande tal cual viene en el ejemplo. Tranquilos, mas adelante emplearé otra transformación que le dará un aspecto realmente impresionante a vuestros formularios.

Hasta la próxima.