Images are vital to our web design projects. They instantly tell a story of the site’s purpose. They invite visitors to explore the site’s content whether it’s a personal portfolio or an ecommerce site for a client. Images have a profound effect, and with CSS filters, we can take our web images to new levels and improve our site’s performance at the same time.
Note: If you’d like to follow along with the examples mentioned here, download my git repo: https://github.com/levinmejia/css-image-effects
CSS Filters
To start creating beautiful effects for our images through CSS, we first need to become familiar with CSS Filters. CSS filters gives us the ability to manipulate images by changing their colors and adding effects like blurs.
Here’s the image by Micki Spollen that we will be using to learn how we can make mindblowing image effects with CSS.
Let’s start by turning our color image into greyscale. We can manipulate our photo to become black and white with the following CSS snippet:
We can also do fun things like inverting the colors:
We can do more than change the image’s colors by doing things like adding a blur effect:
If you’re looking to add multiple effects, you can do so with the following syntax:
CSSgram
CSS filters are a powerful way to build your own unique photo effects, but if you’re looking for a plug and play solution, check out CSSgram. CSSgram is a tiny (
The quickest way to get started with CSSgram is to download the CSSgram library and link it within your project:
Then, we’ll add one of the predefined classes in our html to add the effect to our photo:
For a list of all available effects, visit http://una.im/CSSgram/
CSS Blending Modes
If you have used Sketch or Photoshop you’re most likely familiar with blending modes. Blending modes can create powerful image effects and you can use them using CSS for your images. I have created four effects to help you get started with blending modes:
1. Overlay an element on top of a photo – in this case I have overlaid a circle element on top of my photo with the following code snippets:
2. Blend text – There are so many possibilities when you start combining text with images. Here’s how I accomplished the above example:
3. Background image blend with a solid colour:
4. Image blend effect using a gradient
Backfilters
In 2013, Apple released iOS 7 with a complete overhaul of their UI, presenting a flat design approach. iOS 7 introduced blurring effects to blur the background and bring focus to important content in the forefront. In a recent release of Webkit, we can now recreate the same effect without the need for any Javascript or CSS hacks. We can blur content behind an element with the following code:
If you have downloaded the Github repo for these examples, you will see that I have added this effect to the top navigation to create the blurring effect on the content below the navigation bar:
To learn more and check compatibility on backdrop filters, visit https://webkit.org/blog/3632/introducing-backdrop-filters/
Animating CSS Filters
Things get even more interesting when we start animating CSS Filters! We can trigger animations when a visitor hovers over an image or when they interact with our content (when clicking on a button, for example).
We can animate the CSS Filter on mouse hover with this CSS snippet:
If we want a CSS Filter to be animated when clicking a button, we can use code similar to the following:
Optimizing Site Performance with CSS Filters
An added bonus of using CSS filters to create amazing photo effects is that they can also help improve your site’s performance. CSS filters can do this because they don’t require multiple images to create UI interactions. For example, let’s say that your client wants to display a product image gallery in their ecommerce store that would show the color version of a greyscale image as you hover over the image. In the past we would need two images and some javascript to create this interaction for a single image. This not only meant that your visitor would have to download two sets of images, but the Designer would need more time to prepare these two sets of images: one greyscale and one in color. Now we can create this UI interaction with CSS Filters and one line of CSS code. In the process we cut the amount of assets required in half, and we no longer require our visitors to use additional bandwidth to load a second image.
Image Trends for 2016
Beautiful imagery dominated web design trends in 2015, and 2016 will not be any different. Now that we are familiar with and can animate CSS filters, we can create mindblowing image effects for our web projects with minimal effort to create beautiful layouts and interactions for our visitors.
Levin is a self-taught designer and front-end developer working with Shopify as a Designer Advocate. His passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
Levin is a self-taught designer and front-end developer working with Shopify as a Designer Advocate. His passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC…
View More Posts
