Efectos de sombreado con CSS
Autor: mrlopex
Fecha: 16-07-2022
En este caso mostraremos dos ejemplos de cómo aplicar, un efecto de sombras a elementos HTML de tipo <img>. Sin embargo, el efecto se puede aplicar sobre cualquier elemento HTML, lo que amplía significativamente las posibilidades de uso.
El ejemplo adjunto, muestra el uso de dos propiedades css: box-shadow y filter. En el primer caso se utilizan las propiedades border y box-shadow, para lograr el efecto deseado: una imagen con marco y una sombra.
En el segundo caso, para lograr el “efecto” de sombreado, se utiliza filter con el valor drop-shadow; el cual nos permite añadir las características del sombreado: tamaño del desplazamiento de la sombra con coordenadas x – y (distancia horizontal y vertical), grosor de la sombra y color.
Box-shadow vs Drop-shadow.
En ambos casos, genera una sombra difuminada: disminuir claridad y color, dando sensación de movimiento y perspectiva, alrededor del marco de un elemento. La diferencia radica, en el alcance del efecto.
| Box-shadow | Drop-shadow |
| El efecto se aplica a un elemento tipo caja: cuadrados, rectangulos, etc. Aplica la sombra al contorno del elemento. | Al ser una propiedad de filter, toma en cuenta las transparencias. En algunos navegadores proporciona aceleración de hardware para mayor rendimiento. |
Otro Ejemplo
El siguiente ejemplo muestra dos figuras circulares utilizando en cada una, box-shadow y drop-shadow. La sombra obtenida con drop-shadow tiene más transparencias y por ello permite obtener un resultado más realista.
El código para obtener la figura de arriba es el siguiente.
Cómo podemos notar en ambos objetos, se han definido propiedades similares; la única diferencia se registra en el uso de box-shadow o drop-shadow.
