CSS Filters To Adjust Brightness, Contrast, Opacity, And Inversion

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?

Continue reading

4 CSS Filters For Adjusting Color

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.

Continue reading

How To Add A Drop Shadow With A CSS Filter

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.

Continue reading

An Introduction To CSS Filters

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.

Continue reading

How To Write Your Own Custom Sass Functions

If you’ve built more than a handful of websites, you’ve probably noticed you can easily repeat code in a project and across multiple projects. Repeating the same code over and over wastes your time and increases the possibility of introducing errors. In a previous series on Sass, I said mixins were one option for reusing styles and writing DRYer code. Functions are another way to do the same.

Continue reading