This weekend I discovered the greatness that are CSS Filters.
CSS Filters are visual effects - not unlike photoshop filters - for your browser. Check these options out:
- url (SVG filters)
Lets go through them by testing the filters on this royalty free image!
Ahh, the Rialto Bridge in Venezia, Italy.
(( @Damiano Baschiera (https://unsplash.com/photos/hFXZ5cNfkOk) ))
Blurs the image. The higher the pixel count, the more blurry the image.
The higher the percentage, the brighter the image.
The higher the percentage, the higher the contrast.
The closer to 100% you go, the more gray the image will be.
Likewise, higher the number, the more sepia will be in the image.
This one is interesting. You can go up to 360deg (no change). You can even animate with these.
At 50% the image turns gray, the more above 50 you go, the more inverted the image and vice versa.
100% opacity is completely visible.
You can even layer them,
filter: saturate(120%) contrast(110%) hue-rotate(80deg) sepia(10%);
Add some to your galleries, options to edit images, hover effects, animated effects and more. These filters are powerful and built right into css.