Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 73 ¿Como APLICAR un FILTRO de SOMBRA en una IMAGEN PNG en CSS?

Puntos Clave de la Lección

• Introducción a la propiedad filter: Se explica el uso de la propiedad CSS filter para aplicar efectos gráficos, como desenfoques o sombras, directamente sobre imágenes, fondos o bordes. [00:00:07]
• Implementación de drop-shadow: Se describe el uso de la función drop-shadow, la cual permite crear sombras que se ajustan al contorno de imágenes con transparencia, a diferencia del comportamiento de box-shadow. [00:00:56]
• Parámetros de la sombra: Se detallan los cuatro valores fundamentales: desplazamiento en el eje X (horizontal), desplazamiento en el eje Y (vertical), radio de desenfoque (blur) y el color de la sombra. [00:01:24]
• Diferencias clave: Se comparan los resultados visuales de drop-shadow frente a box-shadow, destacando cómo el primero sigue la forma recortada de un PNG mientras que el segundo se aplica al contenedor cuadrado. [00:02:37]
• Control de dirección y expansión: Se analiza cómo el uso de valores positivos y negativos en los ejes X e Y desplaza la sombra, y cómo aumentar el valor del blur expande y suaviza el efecto visual. [00:04:17]
• Sombras múltiples: Se demuestra la capacidad de encadenar múltiples sombras separadas por comas dentro de la misma propiedad para lograr efectos de iluminación complejos. [00:05:45]

Productos útiles para este curso

Para seguir este curso de diseño web y CSS, se recomienda el uso de un editor de código ligero como Visual Studio Code, un navegador con herramientas de desarrollo (Chrome DevTools) para inspeccionar los elementos en tiempo real, y archivos de imagen en formato .png con fondo transparente para experimentar con los filtros de sombra.

Resumen Final

La implementación de sombras mediante la función drop-shadow es una herramienta poderosa en el desarrollo front-end. A diferencia de las sombras de caja convencionales, esta técnica permite que el efecto siga la silueta real del objeto en imágenes con transparencia, lo cual es esencial para lograr acabados profesionales en diseño web. El dominio de esta propiedad, junto con la capacidad de aplicar múltiples sombras, permite crear efectos de iluminación o efectos especiales visualmente atractivos y optimizados.

Créditos del Autor

Esta lección ha sido adaptada del contenido original creado por el canal de YouTube, especializado en programación web y desarrollo front-end con CSS. Se recomienda visitar su canal oficial de YouTube para profundizar en estos contenidos.