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

Performance Testing—Tools And Waterfall Diagrams

Not all performance improvements are equal. If your CSS file loads in 100ms, but your images take 20 seconds to load, it makes more sense to focus on the images before trying to squeeze extra performance out of an already performant CSS file. In order to know where to spend your time to get the most in return for your effort, you need to know how your site is currently performing.

Continue reading

What Are Performance Budgets And Why You Should Use One

One recent trend in web design is the use of a hero image. A hero image is a large background image at the top of the page and it offers a quick overview of what the site is all about. Some suggest that when done well they lead to higher conversion rates. However, a large image adds weight to your page and could reduce site performance. Should you use a hero image?

Continue reading