Algunas opciones para crear efectos de sombra con CSS.

Algunas opciones para crear efectos de sombra con CSS

Cat ramen
Cat ramen Desarrollo

La naturaleza de la sombra es ser siniestra, pero hay excepciones; por ejemplo: en los diseños web. Tienen un sex appeal que las hace brillar.


Te voy a mostrar dos formas rápidas de incluir sombras en casi cualquier etiqueta HTML, sin necesidad de escribir CSS desde 0 (aunque puede ser una buena idea que aprendas a hacerlo).

Editor de sombras de CSSMatic

CSSMatic es un sitio web que ofrece diferentes herramientas para los desarrolladores / diseñadores que utilizan CSS.  

👉 https://www.cssmatic.com/box-shadow

Entre estas utilidades encontramos la posibilidad de editar sombras a través de una interfaz gráfica bastante intuitiva, como se puede observar en el siguiente GIF 👇

Crear una sombra CSS usando CSSMatic.
Crear una sombra CSS usando CSSMatic.

La idea es sencilla: ajustar los parámetros de la propiedad box-shadow sin tener que escribir una sola línea de CSS, mientras recibís un feedback visual de cómo va quedando la sombra. ¿Qué más podés pedir?

Los valores a definir son los siguientes:

  • Ancho.
  • Alto.
  • Radio de la sombra y de propagación.
  • Color de la sombra.
  • Opacidad.
  • Si la sombra aplica por dentro o por fuera del elemento.

El desplazamiento horizontal (ancho) y vertical (alto) determina la dirección de la sombra, mientras que el radio de difuminado y la expansión ajustan su suavidad y tamaño, respectivamente.

Por su parte, el color no solo establece el tono, sino también la transparencia de la sombra, lo que te permite una integración más fluida con (prácticamente) cualquier diseño.  

Una vez que terminaste de ajustar la sombra a tu gusto, copia y pega el código:

Copiar el código de sombra CSS generado.
Copiar el código de sombra CSS generado.
-webkit-box-shadow: 42px 9px 112px -15px rgba(153,127,153,0.69);
-moz-box-shadow: 42px 9px 112px -15px rgba(153,127,153,0.69);
box-shadow: 42px 9px 112px -15px rgba(153,127,153,0.69);

El código generado tiene compatibilidad con diferentes navegadores, como ser Chrome/Safari a través de -webkit, y Firefox mediante -moz, además de incluir el estándar para todos los demás navegadores con box-shadow.

Consejo de Bob.

La sombra se caracteriza por su desplazamiento horizontal y vertical, su difuminado, su expansión y su color, permitiendo una personalización detallada del efecto deseado. — Consejo de Bob.

93 tipos de sombras diferentes

Sí, leíste bien: ¡93 tipos de sombra CSS y todas a un clic de distancia!

🌐 https://getcssscan.com/css-box-shadow-examples

93 sombras CSS pre-armadas.
93 sombras CSS pre-armadas.

La idea de esta herramienta es simple, pero poderosa: tiene 93 sombras predefinidas que vos podés copiar haciendo clic sobre ellas.

Copiar una sombra.

Admito que esta es la herramienta que más utilizo al momento de crear sombras. Es tan amplia la oferta, que siempre encuentro alguna sombra que se ajusta al diseño que estoy haciendo.

Esta utilidad fue desarrollada para promover CSS Scan, una extensión que te permite robar obtener cualquier código CSS simplemente haciendo un clic. Te dejo el vínculo por si tenes curiosidad de ver cómo funciona 👉 https://getcssscan.com/.

Aprendiendo cómo funcionan las sombras en CSS

Si bien estas herramientas que vimos que te pueden sacar de un apuro, no está de más tener una noción de cómo funciona cada parámetro que estableciste para llegar a la sombra que estabas buscando.

Mi recomendación es que le des una mirada a la documentación disponible en https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow y veas algunos ejemplos en CodePen, como este: https://codepen.io/giana/details/BZaGyP que te muestra una serie efectos distintos, usando únicamente box-shadow 👇

Efectos sombras CSS.

Adiós.

 


/ Súmate al boletín. No es gran cosa, pero es gratis 👇 /