¿Cómo colorear una imagen usando CSS?

El CSS (hojas de estilo en cascada o Cascading Style Sheets) es un lenguaje que determina el diseño de una página web.

El CSS te permite formatear la información y elegir elementos de diseño como fuentes, colores, tamaños, etc. Es posible modificar el color de una imagen usando el CSS sin necesidad de abrir programas de edición, como Adobe Photoshop.

¿Cómo usar el filtro?

Usando la opción CSS Filter puedes aplicar efectos o cambiar colores de manera rápida. Para cambiar el color de una imagen, modifica los porcentajes de las siguientes funciones: grayscale(), sepia(), saturate(), opacity(), brightness(), contrast() e invert(). Si la imagen está en blanco y negro, no será posible aumentar la saturación; el truco es aplicar el filtro sepia() para darle una tonalidad y así modificarlo.

Veamos un ejemplo:

También puedes aplicar filtros a través de un generador de filtros, como CSS Filter Generator. Para hacerlo, obtén el código del color a través de Google Picker. Copialo al Filter Generator, y te generará el código para que lo insertes en el CSS.

¿Cómo usar las funciones opacity() y drop-shadow()

Además de las opciones para cambiar el color, también puedes usar filtros con efectos para modificar imágenes. Entre ellos están:

• Grayscale → Cambiar la escala de grises
• Invert → Invertir colores
• Brightness → Ajustar el brillo
• Saturation → Modificar la saturación
• Contrast → Subir o bajar el contraste
• Sepia → Darle un tono café al blanco y negro para modificar el nivel de saturación
• Blur → Difuminar
• Opacity → Cambiar la opacidad
• Hue-rotate → Cambiar el tono de la imagen
• Drop-shadow → Crear una sombra

Vamos a ver en detalle dos de estos filtros, opacity y drop-shadow.

Opacity: Entre menor sea el porcentaje (partiendo del 0% al 100%), más transparente se verá la imagen. Por ejemplo, el comando para una imagen con la opacidad de 50% sería:

—-> filter: opacity (50%)

Drop-shadow: Este efecto genera una sombra en la imagen. Hay que entender que una sombra es una versión de la imagen original desenfocada y separada en cierto ángulo. Para aplicar este filtro, toma en cuenta los siguientes parámetros:

• <offset-x>, establece la posición horizontal de la sombra. Si usas valores negativos, la sombra se moverá a la izquierda.
• <offset-y>, establece la posición vertical de la sombra. Los valores negativos posicionan la sombra sobre la imagen original.

Si los dos valores están en 0, la sombra quedará situada detrás de la imagen principal.

Además, puedes agregar un efecto de desenfoque con <blur-radius> y <spread-radius>. Al final, selecciona el color que deseas para el sombreado.

El código que define el ángulo de la sombra en el sentido vertical y horizontal, su radio y el color negro se verá de la siguiente manera:

—-> filter:drop-shadow(12px 12px 8px black)

Es el momento de dominarlo

Fuente: Unsplash

En EBAC te ofrecemos el curso online de Desarrollo Front End de Cero a Pro, donde aprenderás a diseñar con CSS, JavaScript, jQuery, React y desarrollar proyectos en HTML. La profesión del desarrollador Front End se vuelve cada vez más demandada, y el especialista requiere ejercer tanto su creatividad como habilidades técnicas. El curso es online y está diseñado para que estudies de acuerdo a tu disponibilidad. Haz actividades prácticas con la guía de nuestros profesores expertos que conocen la realidad laboral de primera mano.