Have you ever added an image to a website only to realize it would look better if it was a little brighter? Maybe the image could use more contrast or a bit of transparency. How about inverting all the colors to their complementary hues?
Have you ever added an image to a website only to realize it would look better if it was a little brighter? Maybe the image could use more contrast or a bit of transparency. How about inverting all the colors to their complementary hues?
SVG offers a non-destructive way to change some color properties of an image or graphic. Unfortunately some of those changes are more cumbersome to make than others. CSS filters allow you to non-destructively change some properties of color as well and in a less cumbersome way than SVG.
Last week I began a series on CSS filters. I talked in general about the difference between CSS and SVG filters and then I showed you how to work with the former. I closed by walking you through the blur() filter-function and showed you an example using the function.
Image editors gives us the ability to add all sorts of effects. You can change the colors in an image, add a blur, adjust lighting effects, and even blend multiple images together. If you’ve been working with images and graphic editors for awhile, you know to make these changes non-destructively, applying them in layers separate from the original image.
I’m sure you’ve used your graphic editor to add an emboss or a bevel to some graphic element. If so you’ll probably like working with feConvolveMatrix, which can be used to do both.