Clever: 20 Image Effects With CSS
CSS blend modes and filters allow for effects that were not possible before. When applying these new options to images, you can create even more impressive effects by stacking or repeating multiple attributes in clever ways. And all of this is done in a nondestructive way.
Bennett Feely and his Code Snippets
Bennett Feely from Pittsburgh, Pennsylvania and his project Image-Effects on Github provide a great example for effects that can be achieved with an intelligent use of combinations or repetitions of different modern CSS attributes, for which you would not have used pure CSS until now.
Bennett has built twenty effects. All of them are displayed while applied to the same original image, as well as with the according required code snippet in CSS and SCSS. You can either copy the snippets directly from the demo page, or switch to Codepen, where you get to play around with the settings, and a live preview.
Bennett also provides all effects as a CSS library, which is easy to integrate into your projects, and only weights 1300 bytes when compressed. Of course, working with the uncompressed version of 12,8 kilobytes is more comfortable 😉
In general, it is possible to use the effects right away. However, Bennett rightly recommends touching upon certain parameters, depending on the image you want to display.
Bennett’s Image-Effects use @supports for feature detection. When it’s detected that a browser is unable to display the set attributes and values, the image is depicted without the effects. We can definitely be okay with this type of fallback.
The Application is This Easy
The individual effects are defined as classes, which you apply to your images accordingly. The easiest way to do this is to label a Div container with the respective class and place your image inside.
1 2 3 |
<div class="emboss-effect"> <img width="" height="" src="photo.jpg" alt=""/> </div> |
To avoid odd initial effects, you should assign the correct values for width and height to your image. This way, you make sure that the browser will use the correct image size as a placeholder right away.
