Drop-shadow VS Box-shadow

Al ver una sombra en un diseño inmediatamente pensamos en box-shadow, pero existe otra opción drop-shadow, aprende sus diferencias.

drop-shadow Vs Box-shadow

Muchos diseños contienen sombras, al verlas quizá piensas inmediatamente en usar la propiedad box-shadow, hay otra opción desconocida por muchos y tiene una gran utilidad drop-shadow, aprende la diferencia.

¿Qué es drop-shadow?

Una función que nos permite agregar una sombra difuminada al contorno de un texto o imagen (mayormente se usa imágenes), sin embargo su uso o aplicación solamente será limitada por nuestra imaginación, necesidad puntual o de acuerdo a lo que dicte nuestro diseño.

¿Cómo funciona?

Su sintaxis te será familiar si ya tienes experiencia manejando HTML y CSS. Para usarla lo hacemos a través del atributo CSS llamado “filter” y luego implementamos lo siguiente:

drop-shadow:( Posición en X, Posición en Y, Radio de difuminación, Color de difuminado );

Las posiciones tanto en X como en Y, nos indican desde donde comienza el difuminado en cada una de ellas.

Cada uno de los parámetros deberán ser establecidos en valores numéricos y con medidas relativas o absolutas como son los píxeles, rem.

Aplicando el ejemplo de acuerdo a lo que hemos mencionado, la sintaxis para una clase llamada “ball” quedaría:

.ball {
  filter: drop-shadow( 5px 5px 10px #000 );
};

Esta propiedad como ves, la asignamos en CSS a un selector como lo hacemos con diversas propiedades para que la podamos ver reflejado en nuestra interfaz.

El resultado aplicado sea a un texto o una imagen del ejemplo anterior, es un contorno con un ancho difuminado de 10 píxeles de color negro más pronunciado hacia la parte derecha (5px) baja (5px) del borde, de esta forma se ven:

Sombra en imagen Sombra en texto.

Esta función es muy útil para dar un toque de profundidad a un elemento en particular lo que en interfaces más compuestas visualmente, nos da un efecto agradable según el ambiente circundante de los elementos en general.

Ahora, al compararla con su “hermano” el box-shadow, notamos importantes diferencias no solo en sintaxis sino en resultados los cuales tienen usos o aplicaciones totalmente diferentes.

La sintaxis de uso del box-shadow es:

box-shadow: Posición en X, Posición en Y, Radio de difuminación, Color del difuminado

Se aplica directamente al selector en CSS y recibe valores numéricos con medidas absolutas o relativas según sea el caso de uso. Para que lo veas mejor revisa el siguiente ejemplo nuevamente con la clase “ball”:

.ball {
  box-shadow: 5px 5px 10px #000;
};

El resultado aplicado a la clase “ball” en imagen, pese a que esta en .png, es el siguiente:

Y si lo usamos en texto, el resultado es el siguiente:

El espacio que contiene tanto a la imagen o el texto es el que adquiere la propiedad de sombra y no el contenido como tal. Esa es la diferencia más importante que tiene con respecto al drop-shadow.

Nos vemos en la próxima publicación. Recuerda que este y otros muchos temas más, los podrás aprender en el Curso Esencial de HTML y CSS en donde te aseguro que algo nuevo y muy valioso para tu carrera aprenderás.