Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 76 ¿Como PONER en ESCALA de GRISES una IMAGEN en CSS?

Puntos Clave de la Lección

• Implementación de la propiedad filter: Para modificar la apariencia visual de una imagen, se utiliza la propiedad filter junto con la función específica gray-scale. [00:00:17]
• Uso de porcentajes: Es posible ajustar la intensidad de la escala de grises mediante porcentajes, donde 0% mantiene la imagen original y 100% aplica un gris total. [00:00:28]
• Variaciones de intensidad: Al ajustar el valor porcentual, por ejemplo a un 20%, el navegador renderiza una transición suave entre el color original y el tono gris. [00:00:57]
• Uso de valores numéricos decimales: La función también acepta valores numéricos entre 0 y 1, donde 0 equivale a la ausencia de filtro y 1 representa el 100% de gris. [00:01:15]
• Ejemplo práctico con decimales: Al asignar 0.5 a la función gray-scale, se aplica exactamente un 50% de intensidad sobre la imagen seleccionada. [00:01:36]

Productos útiles para este curso

Para seguir esta clase, se recomienda contar con un editor de código como Visual Studio Code y un navegador web moderno para visualizar los cambios en tiempo real.

Resumen Final

La propiedad filter aplicada con gray-scale ofrece una forma flexible y eficiente de manipular imágenes en CSS. Ya sea utilizando porcentajes o valores decimales, el desarrollador puede aplicar efectos visuales precisos para mejorar la estética del sitio web, controlando el nivel de saturación de color de manera sencilla y profesional.

Créditos del Autor

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