Breaking

Post Top Ad

Your Ad Spot

martes, 8 de octubre de 2019

Sombras más suaves y nítidas con sombras de caja en capas.

uando la luz golpea un objeto y se proyecta una sombra, la sombra puede adoptar una miríada de características únicas. Si tratas de capturar las sutilezas de una sombra real con box-shadoweso, entonces, no tienes suerte. La box-shadowpropiedad CSS no está construida exactamente para fomentar la expresividad. Básicamente, produce una silueta borrosa de un objeto: puede cambiar su desplazamiento, el radio de desenfoque, la extensión y el color, pero eso es todo. No podemos acercarnos a expresar las complejidades y matices de las sombras en la vida real.
Pero con una técnica simple de CSS, podemos ampliar nuestra gama de opciones. Si usamos box-shadows en capas , podemos obtener un control más detallado sobre cómo se representan las sombras:
box-shadow0 6px 6px rgba (0,0,0,0.2);

Las sombras de caja en capasaumentan gradualmente el desplazamiento / desenfoque
Mire cuán cuadrado y torpe se box-shadowve el efecto predeterminado (primer cuadro) en comparación con el estratificado box-shadow(segundo cuadro). Podemos lograr este efecto creando múltiples box-shadows(separando cada sombra con una coma) y aumentando el desplazamiento y el desenfoque de cada sombra (la box-shadowsintaxis es X-offset Y-offset blur color):
/* Default box-shadow */
.box {
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* Create smoother box-shadows by layering multiple
 * shadows with gradually increasing radius and offset */
.shadow-5 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12), 
              0 4px 4px rgba(0,0,0,0.12), 
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}
Esta técnica de capas simple nos da más control sobre la representación de las sombras, y con ella podemos ajustar la nitidez, la distancia y la dispersión. Por ejemplo, puede aumentar o disminuir el número de sombras para crear una extensión más pequeña o más grande. (Tenga en cuenta que si aumenta el número de capas, tendrá que disminuir el valor alfa de cada capa si desea mantener la fuerza de la misma manera).
Capas de sombras en caja4 sombras con 15% alfa

Sombrasdecaja en capas6 sombras con 11% alfa
.shadow-4 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.15), 
              0 2px 2px rgba(0,0,0,0.15), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.15);
}

.shadow-6 {
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 8px 8px rgba(0,0,0,0.11), 
              0 16px 16px rgba(0,0,0,0.11), 
              0 32px 32px rgba(0,0,0,0.11);
}
Controlar la nitidez es tan fácil como controlar la dispersión, pero podemos usar tanto el valor alfa como el valor de desenfoque de cada capa para cambiar la concentración de profundidad y el radio de desenfoque de la sombra, respectivamente.
Los ejemplos anteriores usan el mismo valor alfa para todas las capas, pero podemos dejar que el valor alfa disminuya o aumente con cada capa para crear sombras más o menos difusas. Para la sombra más concentrada a continuación, la sombra más interna (con el menor desplazamiento y desenfoque) tiene el valor alfa más alto, y disminuye con cada capa. Lo contrario es cierto para la sombra más difusa del segundo cuadro, donde la capa más interna tiene el valor alfa más bajo:
Afiladassombras con la disminución de alfa

Sombrasdifusascon alfa creciente
.blog-shadow-sharp {
  box-shadow: 0 1px 1px rgba(0,0,0,0.25), 
              0 2px 2px rgba(0,0,0,0.20), 
              0 4px 4px rgba(0,0,0,0.15), 
              0 8px 8px rgba(0,0,0,0.10),
              0 16px 16px rgba(0,0,0,0.05);
}

.blog-shadow-diffuse {
    box-shadow: 0 1px 1px rgba(0,0,0,0.08), 
                0 2px 2px rgba(0,0,0,0.12), 
                0 4px 4px rgba(0,0,0,0.16), 
                0 8px 8px rgba(0,0,0,0.20);
}
También podemos aumentar bluren incrementos más altos, para aumentar la propagación y crear efectos más suaves, casi de ensueño:
Soñador suaveMayor aumento de desenfoque
.blog-shadow-dreamy {
    box-shadow: 0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
}
Finalmente, podemos controlar la distancia desacoplando el radio de desenfoque y el desplazamiento Y, y aumentar el desplazamiento en incrementos mayores o menores:
Sombras máscortascon distancias más pequeñas.

Sombras máslargascon distancias más grandes.
.shadow-shorter {
  box-shadow: 0 1px 1px rgba(0,0,0,0.11), 
              0 2px 2px rgba(0,0,0,0.11), 
              0 4px 4px rgba(0,0,0,0.11), 
              0 6px 8px rgba(0,0,0,0.11),
              0 8px 16px rgba(0,0,0,0.11);
}

.shadow-longer {
  box-shadow: 0 2px 1px rgba(0,0,0,0.09), 
              0 4px 2px rgba(0,0,0,0.09), 
              0 8px 4px rgba(0,0,0,0.09), 
              0 16px 8px rgba(0,0,0,0.09),
              0 32px 16px rgba(0,0,0,0.09);
}
Por supuesto, qué combinación de todas estas técnicas usar depende en gran medida del contexto en el que esté trabajando, pero con las sombras en capas, como mínimo, podemos obtener un poco más de control para ayudarnos a lograr nuestro aspecto y sensación deseados.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas