Caso de estudio. La galería de Apple: box-shadow discreto y acortado 11.1.13
Estudio de la galería de Apple y su sombra (box-shadow) más corta que el elemento
Caso de estudio. La galería de Apple: box-shadow discreto y acortado
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:
- Pasó la novedad y su descubrimiento.
- Estética
- 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:
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.
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.
Kseso
the obCSServer ᛯ 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 Kseso
Muy bueno Kseso,
ResponderEliminarViendo esta técnica, pienso que con propiedades 3D a un elemento más box-shadow se pueden crear efectos de sombras muy buenos, como la siguiente imagen que pongo como enlace:
http://turbo.premiumpixels.com/wp-content/uploads/2011/01/lead-210.jpg
debajo del recuadro negro con el borde blanco aparece una sombra, intuyo que esto se puede simular enteramente con Css3?
Mira a ver si puede ser el segundo ejemplo que hay en la demo de Paulund.
ResponderEliminarTienes el enlace en el artículo.
porque esta a medias este contenido?
ResponderEliminarGracias por el aviso. ¿Podrías precisar qué parte no ves y los detalles particulares con los que has accedido al artículo? Navegador, SO... etc.
ResponderEliminarUn saludo