Sombras en CSS3

Artículos sobre CSS en CableNaranja
Artículos sobre CSS en CableNaranja

¡Comparte nuestro contenido!

Para manejar sombras, CSS cuenta con la instrucción box-shadow, la cual aparece en la versión 3 y se encuentra totalmente soportada por los navegadores conocidos, por lo que ya no es necesario utilizar prefijos.

Los valores que utiliza box-shadow son los siguientes:

  1. h-offset: representa el movimiento horizontal o eje X (obligatorio)
  2. v-offset: representa el movimiento vertical o eje Y (obligatorio)
  3. blur: Representa el radio de desenfoque de la sombra (opcional)
  4. spread: Es el tamaño de la sombra (opcional)
  5. color: Es el color para la sombra, si no se especifica se usa el color actual de texto (opcional)
  6. inset / outset: La sombra es interna – inset – o externa – outset – siendo este último el valor por defecto (opcional)

Pongamos sombras

Insertemos 5 elementos <div> los asignamos a una clase que se llamará cuadrado y cada uno tendrá un id como sombra1, sombra2, etc.

<div id="sombra1" class="cuadrado"></div>
<div id="sombra2" class="cuadrado"></div>
<div id="sombra3" class="cuadrado"></div>
<div id="sombra4" class="cuadrado"></div>
<div id="sombra5" class="cuadrado"></div>

En nuestro CSS, creamos la clase cuadrado, con algunas propiedades básicas.

.cuadrado{
   width: 100px;
   height: 100px;
   margin: 50px;
   float: left;
   background-color: #CCAABB;
}

Así es como iniciamos:

Sombras en CSS3, CableNaranja

Antes de las sombras

Definimos #sombra1 con 5 píxeles en X y en Y.

#sombra1{ box-shadow: 5px 5px; }

Y así es como se ve.

Sombras en CSS3, CableNaranja

Aplicamos la primera sombra

Ahora, definamos #sombra2 con 0 píxeles en X y en Y, le ponemos también un desenfoque de 10 píxeles.

#sombra2{ box-shadow: 0 0 10px; }

Veamos ahora:

Sombras en CSS3, CableNaranja

Aplicamos un desenfoque a la segunda sombra

Definimos #sombra3 sin valores en X, Y, sin desenfoque, pero con un tamaño de 5 píxeles.

#sombra3{ box-shadow: 0 0 0 5px; }

El resultado es el siguiente:

Sombras en CSS3, CableNaranja

Mostrando tamaño de la sombra

Ahora, definimos #sombra4 con sus valores X, Y en negativo y 3 píxeles de desenfoque y tamaño. Adicionalmente le cambiamos el color a la sombra por un verde.

#sombra4{ box-shadow: -25px -25px 3px 3px #0A1; }

Y esto es lo que sale:

Sombras en CSS3, CableNaranja

Cambiando el color de la sombra

Finalmente, hacemos que #sombra5 tengo 0 en sus valores X, Y, 3 píxeles de desenfoque y tamaño. Luego la pintamos de un color más fuerte y con el atributo inset, hacemos que se refleje al interior.

#sombra5{ box-shadow: 0 0 3px 3px #4B0082 inset; }

Este es el último ejemplo:

Sombras en CSS3, CableNaranja

Ahora, hacemos que la sombra sea interior

Descarga el ejemplo

¿Qué te ha parecido? ¿Conocías todas las características de box-shadow? Puedes probar el ejemplo que como siempre te proveemos para descarga. No te olvides dejar tus dudas, comentarios y sugerencias ¡Hasta la vista!

¡Comparte nuestro contenido!

Israel García

Docente, IT Manager, Blogger & Developer. Escribo por diversión, educo por pasión. | Grandstanding is not my thing.

También te podría gustar...

1 respuesta

  1. agosto 1, 2018

    […] tiempo, escribimos sobre Sombras en CSS por medio del atributo box-shadow. En esta ocasión hablaremos de sombras de texto por medio de la […]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

shares