soy Kseso y esto EsCSS

Caso de estudio. La galería de Apple: box-shadow discreto y acortado

Caso de estudio. La galería de Apple: box-shadow discreto y acortado

·Por Kseso ✎ 4

Los efectos basados en la propiedad box-shadow han seguido una línea muy clara: cada vez son más discretos y suaves.
Hemos ido viendo cómo las "grandes sombras" muy marcadas han ido dejando paso a otras suaves y "sencillas". Tanto que en las "buenas realizaciones" su presencia se nota pero no somos conscientes de ellas.

Realizaciones y demos extremas aparte. Claro.

Varias son las razones, creo, de esta evolución:

  1. Pasó la novedad y su descubrimiento.
  2. Estética
  3. Consumo de recursos del navegador en su renderizado.

Una de las últimas realizaciones con box-shadow que me ha llamado la atención es la galería de apple en su página. Si no la conoces aquí una captura del detalle:

box-shadow elegante, discreto y acortado

Dos son los detalles que motivan este artículo. Uno estético y otro de código.

El estético: si te fijas, la sombra sólo se manifiesta en la parte inferior y decrece su tamaño del centro hacia los extremos.

Este efecto no es novedad. Posíblemente la demo más famosa sea la de Paulund basada en los pseudoelementos :before y :after posicionados y jugando con los valores de la propiedad z-index.
Esta particularidad hace que el adaptar algún ejemplo a casos reales lleve su trabajo.

El segundo detalle es que está hecho sin recurrir a los pseudoelementos.

Todo lo anterior, junto a algún discreto detalle más, como el border-radius y alguna sombra suave, logran el aspecto final.

Recreación del ejemplo

Aprovechando que mientras estaba con la redacción del artículo han subido un ejemplo a codepen para que lo veas en vivo y en directo:

El marcado html

No tiene mayor secreto: un lista (ul) con sus items (li´s). Y en cada uno de estos una caja contenedora (div class="curve-down") de un enlace que es una imagen. Sólo eso.

<ul> <li> <div> <a href="#"> <img src=".../>

El Css

Antes de nada y por si alguien lo necesita, los estilos que ves en el pen no son css puro. Usa uno de tantos "preprocesadores". En este caso SCSS. Así que vamos a ver el css puro:

Las declaraciones principales del div class="curve-down" son

.curve-down { box-shadow: 0 8px 3px -5px rgba(0, 0, 0, 0.2); border-radius: 100%/32px; /*añadido por mi para mostrarlo*/ width: 237px; height: 185px; background: #e5e5e5; }

No tiene mayor secreto. Una caja con una sombra y las esquinas curvas. Si tienes dudas en los valores mira este artículo sobre box-shadow o la especificación para border-radius.

Dentro de este div, y por lo tanto sobre él en el eje z, el enlace, declarado como un bloque y con sus declaraciones.

.promos a { background-color: #fff; box-shadow: 0 -3px 1px rgba(255, 255, 255, 0.6), 0 2px 1px rgba(255, 255, 255, 0.97) inset, 0 0 3px -1px rgba(0, 0, 0, 0.7); }

Este sería el resultado:


El hijo se sobrepone, tapando, el espacio dejado libre por el border-radius del div y sobresaliendo sólo parte de la sombra inferior.

Puedes cambiar la longitud de esa sombra (más larga o más corta) variando el valor de los 32px del box-shadow del div .curve-down

Y a continuación introducir la imagen, un pequeño border-radius de 5px a ella, al enlace y al li para acentuar el efecto junto al uso de gradientes Css en los fondos.

box-shadow elegante, discreto y acortado

Todo junto

Aquí tienes una copia de la galería objeto del artículo. En puro Css, sin código de preprocesador. Nota que como es un realización "real" hay alguna declaración como filters de microsoft y la propiedad zoom para asegurarse el correcto funcionamiento en una amplia gama de navegadores.

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