En cualquier diseño, sea de una página web o no, las sombras permiten crear una sensación tridimensional que le da profundidad a los elementos en los que se aplica. En este post, te enseñaremos cómo funcionan las sombras en CSS para que las puedas utilizar cuando quieras destacar textos y elementos o, simplemente, darles un diseño diferente.
Propiedad box-shadow
La propiedad box-shadow crea una sombra en el contenedor del elemento HTML. Esto quiere decir que se aplica al bloque que contiene un elemento con display «box». Si tienes dudas sobre qué tipo de elementos tienen este display y qué significa, te invitamos a leer nuestro post sobre la propiedad display en CSS.
La propiedad box-shadow tiene dos características principales: offset-x y offset-y. Estas dos características representan el desplazamiento de la sombra en sentido horizontal y en sentido vertical, respectivamente. Al igual que un plano cartesiano, los valores positivos representan un desplazamiento hacia la derecha (offset-x) y hacia arriba (offset-y), mientras que los valores negativos representan un desplazamiento hacia abajo (offset-y) y hacia la izquierda (offset-x).
Además de las características de desplazamiento descritas anteriormente, la propiedad box-shadow tiene la característica blur-radius, que determina el difuminado de la sombra. Al darle un valor mayor a esta característica, más se difuminará la sombra. Si le otorgamos un valor de cero, la sombra tendrá la misma nitidez de un color sólido.
La propiedad box-shadow también tiene la característica spread-radius, que determina cuánto se va a expandir esa sombra. Es decir, una vez se determina el difuminado, la característica spread-radius define cómo de grueso es. Finalmente, como la mayoría de elementos HTML en CSS, la propiedad box-shadow tiene una característica de color. Esta característica, además de determinar el color de la sombra, también permite que el color sea más o menos opaco.
Propiedad text-shadow
La propiedad text-shadow funciona para aplicar una sombra al texto que está dentro del contenedor. Maneja las características offset-x, offset-y, blur-radius y color al igual que la propiedad box-shadow, pero no maneja la característica spread-radius.
Las características offset-x y offset-y son particularmente interesantes en la propiedad text-shadow, porque nos permiten tener varios textos repetidos cuando en realidad solo hemos pintado uno. Esto será importante cuando quieras diseñar iconos con elementos repetidos, como el menú de hamburguesa.
Herramientas para aplicar sombras en CSS
Salvo que la aplicación de sombras en CSS que lleves a cabo sea muy simple, no es fácil determinar cuál es el valor exacto que necesitas en cada característica para que tu elemento HTML se vea como quieres. Por ello, te recomendamos utilizar este generador de sombras box-shadow para que puedas ver rápidamente el efecto que tiene un valor determinado en tu elemento. Basta con que muevas las barras de un lado a otro para que veas en vivo el cambio de la sombra. La barra «horizontal shadow lenght» representa la característica offset-x, mientras que la barra «vertical shadow length» representa la característica offset-y. Las demás barras tienen el mismo nombre de las características que representan.
Dentro de esta misma página web puedes encontrar un generador de sombras text-shadow que te permitirá aplicar en vivo las mismas características, a excepción de spread-radius.
¿Te animas a seguir aprendiendo?
Ahora que conoces cómo aplicar profundidad a tus elementos HTML usando las sombras en CSS, ¡estás listo para crear diseños tridimensionales en tu propia página web! En KeepCoding sabemos que tienes muchas ganas de seguir aprendiendo acerca de HTML y CSS.
Por ello, te recomendamos nuestro bootcamp intensivo Desarrollo Web Full Stack Bootcamp, en donde, además de aprender las propiedades de diseño en CSS, como pueden ser las sombras en CSS, aprenderás cómo estructurar tu página web en HTML. Al final, tendrás los conocimientos necesarios para crear y diseñar tu propia página web como todo un experto. ¿A qué esperas para inscribirte? ¡No te lo pierdas y apúntate ya!
