soy Kseso y esto EsCSS

Más allá del flat la sombra del diseño es alargada

Más allá del flat la sombra del diseño es alargada

·Por Kseso ✎ 1
Todo pasa y todo queda, pero el diseño es pasar. Pasar haciendo trabajos, trabajos que otros añejarán.
Long shadow design: la sombra del diseño es alargada
"Long shadows": la sombra del diseño es alargada

Y así, destrozando la obra de un gran poeta comienzo hoy. Buen inicio donde los haya para introducirnos en el "after flat design" o la nueva tendencia en diseño web.

Porque sí, a estas alturas el flat design ya está superado, o mejor dicho, ya se nos hizo mayor y ha ido un poco más allá: largas sombras" o long shadows en su versión inglesa.

Y parece que viene pegando fuerte. Y no es para menos, pues no supone romper con la tendencia actual del flat design. Más bien lo complementa y enriquece.

Algunas capturas de diseños con largas sombras o "long shadow" que puedes encontrar con por la red:

Long shadow design: la sombra del diseño es alargada
"Long shadow design": la sombra del diseño es alargada

Ejemplos de Long shadow design
Long shadow design: la sombra del diseño es alargada
Ejemplos de Long shadow design

Long shadow design: la sombra del diseño es alargada
Ejemplos de Long shadow design
Long shadow design: la sombra del diseño es alargada
Ejemplos de Long shadow design

Como habrás adivinado, el origen de las capturas anteriores proceden de dribbble y todos los créditos a sus autores respectivos.

Características del diseño "Long shadow" o sombras alargadas

Esta nueva moda o tendencia básicamente es flat design con el añadido de las sombra. Así que lo definitorio de él podría resumirse en:

  1. Colores planos y apagados, como en el flat design
  2. Admite gradientes, ya sean Css o en imagen (cualquier tipo, incluido SVG). Pero ojo con ellos.
  3. Las sombras, que son el aspecto diferencial, las vemos en detenimiento:
Long shadow design: la sombra del diseño es alargada
Ejemplos de Long shadow design

Las sombras en el flat design

Son sombras desproporcionadas. Muy, pero que muy alargadas. Si no tienen una caja que las contenga (como en los iconos de las imágenes) su tamaño está entre 2 y 3 veces el del objeto que las genera.

El ángulo de 45 grados, siguiendo la diagonal de la caja que contiene al objeto, por lo general hacia la esquina inferior derecha. Pero también se encuentran orientadas a la esquina inferior izquierda como en esta imagen.

Son sombras planas. No aportan tridimensionalidad al objeto.

Y siempre manteniendo ese perfil bajo del flat design.

Generador de largas sombras

Generador de Long shadow: la sombra del diseño es alargada
Generador Long shadows: la sombra del diseño es alargada

En ayuda de quienes quieran experimentar con el "long shadow design", Jeff Escalante, aka @jescalan ha creado este generador de sombras alargadas. Añadir que es un mixin para Sass

Generador en línea de long shadow

Generador en línea de long shadow Obra de Juani Ruiz Echazú {aka @heyimjuani} es éste generador en línea de long shadows. Basado en el uso de box-shadow y text-shadow. Sólo tienes que deslizar los inputs al gusto y una vez que tengas los efectos tal como los quieras pinchar el mostrar el código para llevártelo a tu css. Limpio y sencillo.

En enlace, por si no lo has detectado en la imagen, acá de nuevo.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso