CSS Trucos

La evolución en el diseño web ha venido de la mano entre otros, pero sobre todo, de las nuevas CSS. Además de conseguir ahora páginas más ligeras, hemos podido añadir efectos especiales que antes sólo eran imaginables con flash. Son varias las tecnologías que ahora nos permiten dar movimiento a capas, movimientos suaves, incluso con efectos de aceleración.

Los menús que antes había que hacer con imágenes de sustitución, ahora se pueden hacer con una única imagen que cambia su posición mediante cambio de coordenadas.

En este post voy a dejar unos cuantos ejemplos sorprendentes de la cantidad de efectos y utilidades que se pueden hacer con CSS.

Slide con CSS

Cuando tuve que hacer el diseño de www.warnermusic.es, se me ocurrió meter un flash en el que se pudiesen promocionar varios discos a la vez, pues bien, existe una galería muy sencilla hecha en CSS con un efecto muy similar, pudiéndola colocar de modo horizontal o vertical.

MAPA DE IMÁGEN CON EFECTOS DE OPACIDAD

Mapa de imágenes con opacidad

Una buena ayuda para crear un vistoso menú. Al hacer rollover sobre la opción, esta cambia de opacidad dejando ver el background de fondo.

ANIMACIONES CON CSS

Animaciones con CSS

Este sólo es un ejemplo de la cantidad de cosas que podemos conseguir con CSS. Al mover el cursor hacia la puerta de salida podemos ver cómo el muñequito va corriendo, se trata de conseguir un efecto de movimiento con CSS. Esta es muy simple, pero existen verdaderas maravillas realizadas con esta técnica.

GALERÍA CON CSS

Galería con CSS

Una completísima galería, de rápida carga y con un potencial enorme de usabilidad. Tenemos rollover en las opciones, carga de imágenes y textos explicativos de cada imagen, es decir, todo.

Como veréis las CSS nos dan un amplio margen para diseñar con más libertad. Dejo aquí también un enlace muy interesante, se trata de la metodología para dar instrucciones por separado a los navegadores.

También en este blog podréis encontrar otros post con más trucos CSS.