Tuesday - Filter Effects

Back when we added background images to main.css, one of the comments I made is that in general we should gravitate toward low-contrast images so that they do not compete with the text and make the page difficult to read. I mentioned that there are options to use software like GIMP or Inkscape to edit the contrast levels of images that you want to use. Today I'm going to show you another way of dealing with situations like this: filters.

In CSS, you can apply a number of filters to an image:

• blur
• brightness
• contrast
• drop-shadow
• grayscale
• hue-rotate
• invert
• opacity
• saturate
• sepia
• url() (for applying SVG filters)

If you wish you can apply multiple filters in a single declaration in CSS, such as:
 filter: blur(1rem) sepia(100%) ;
...which will apply a 1-rem blur effect and shift all colors into the sepia range of browns.

As an example of a filter effect, below is a photo I took of an iguana during a trip to the Galapagos Islands I took a couple years ago. When you hover over it, you will see a hue-rotation of 2700°. I slowed the change using the transition property. We haven't discussed how to use that one yet, but we'll get to it soon.