Bennett Feely nice write-up on using one or more newer CSS properties (background-blend-mode, mix-blend-mode, or filter) and how it gives us a surprising amount of possibilities to manipulate a single source image.
One of the techniques described is Blending. In most of these effects the single source background-image url is repeated one or more times and blended with itself using CSS blend modes (multiply, overlay, screen, difference, etc.)
In some of these effects, the CSS filter property is used to further refine the output. Functions like grayscale(), brightness(), and contrast() can and should be tweaked to achieve a better result for images you use.
Some of effects recreated in article (plus code):
- Pencil
- Colored Pencil
- Watercolor
- Chalkboard
- Collage and more…
The CSS code in CodePen and whole library can be downloaded. Excellent not only for front-end guys.
[Read More]