Como sabéis, las modas y las tendencias en el diseño son muy cambiantes y en el diseño web no iba a ser menos. La última tendencia, desde hace unos años es el llamado flat design o diseño plano. Es un diseño simple, minimalista, con colores planos sin gradientes pero llamativos. Utilizando formas geométricas sin sombras ni efectos de profundidad 3D. Google lo utiliza bastante en sus diseños, logos, etc… O también lo podemos ver por ejemplo en la interfaz de Windows 8.
Desde hace poco aparece una nueva tendencia, siguiendo la misma linea de flat design, que es el long shadow o sombra alargada. Este efecto, proyecta una sombra alargada sobre un objeto o texto, normalmente en ángulo de 45 grados. Da profundidad pero dentro de los patrones de diseño de flat design.
Bajo mi punto de vista, si quieres una web moderna y a la vez facil de manejar debería predominar estos estilos.
¿Como crear este efecto con un poco de código CSS?
Muy simple. Con las propiedades box-shadow y text-shadow de CSS3. Estas propiedades, aparte de incluir muchas opciones de personalizar una sombra, nos permite apilar varias sombras sobre un mismo elemento. Y en esto consiste el long shadow. En proyectar una sombra detras de otra haciendo que siga un ángulo de 45 grados. Esto lo conseguimos con offset-x y offset-y de las propiedades box-shadow y text-shadow por las cuales indicamos el desplazamiento vertical y horizontal de la sombra respecto al elemento. Le sumamos un píxel en cada una y conseguimos este ángulo. También podemos conseguir un degradado de la sombra con blur-radius que desenfoca la sombra, con el color o dandole poco a poco más opacidad con rgba(). Todo de forma progresiva en cada una de las sombras. Si quieres saber más de box-shadow o text-shadow sigue este post. Además, os dejo una web que genera automaticamente el código CSS para nuestro long shadow. Ir a Long Shadow Generator.
Muy buen post, ¡Gracias!