Curso Completo de CSS de principiante a avanzado - CURSO de CSS - 82 ¿Como ROTAR el TONO de COLOR de una IMAGEN con CSS?

Puntos Clave de la Lección

• Introducción a hue-rotate: Se define el uso de la función hue-rotate como parte de la propiedad filter para modificar el tono de color de las imágenes [00:00:10].
• Uso de grados: Se explica cómo aplicar rotaciones de color utilizando grados, por ejemplo, 90deg, para alterar la paleta cromática original [00:00:35].
• Aplicación de giros (turns): Se detalla el uso de la palabra clave turn, como 1turn o 0.5turn, como una alternativa para especificar la rotación del tono [00:00:48].
• Combinación de filtros: Se enseña la capacidad de encadenar múltiples funciones dentro de filter, tales como blur (desenfoque) y brightness (brillo), para aplicar efectos compuestos [00:01:22].
• Ajustes adicionales de saturación: Se demuestra cómo integrar filtros de saturación junto a otras propiedades para lograr un control total sobre el estilo final de la imagen [00:02:33].

Productos útiles para este curso

Para seguir esta clase, se recomienda el uso de un editor de código como Visual Studio Code y un navegador moderno con herramientas para desarrolladores activadas, lo cual facilita la previsualización en tiempo real de los cambios CSS.

Resumen Final

En esta sesión se ha aprendido que la propiedad filter de CSS es una herramienta poderosa y versátil para el diseño visual. Al integrar funciones como hue-rotate, blur y brightness, los desarrolladores pueden transformar la apariencia de una imagen sin necesidad de recurrir a software de edición externo. La capacidad de combinar estas funciones permite crear interfaces más dinámicas y adaptables a las necesidades estéticas de cualquier proyecto web moderno.

Créditos del Autor

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