Using CSS to implement a variety of picture filter effects Demo

Original:

In most of the following effects, the background image source Background-image URLs are often reused several times, and are processed using CSS blending modes (multiply, overlay, screen, difference, etc.).

In some effects, use the CSS Filter property to further process the picture, such as grayscale (), brightness (), and contrast () to make the picture appear better.

When making this demo, we first let these pictures take on a raw look, and then use the CSS @supports to detect whether a CSS attribute is supported in your browser.

Before applying these effects.

Effect 1:pencil

. pencil-effect { $url: URL (photo.jpg); Background-image: $url; Background-size:cover; Background-position:center; @supports (Filter:invert (1)) and (Background-blend-mode:difference) { Background-image: $url, $url; Background-blend-mode:difference; Background-position: Calc (50%-1px) Calc (50%-1px), Calc (50% + 1px) Calc (50% + 1px); Filter:brightness (2) Invert (1) grayscale (1); Box-shadow:inset 0 0 0 1px black; } }

Effect 2:emboss

. emboss-effect{ $url: URL (photo.jpg); Background-image: $url; Background-size:cover; Background-position:center; @supports (Filter:invert (1)) and (background-blend-mode:difference, screen) { Background-image: $url, $url, $url; background-blend-mode:difference, screen; Background-position: Calc (50%-1px) Calc (50%-1px), Calc (50%+1px) Calc (50%+1px), Center Filter:brightness (2) Invert (1) grayscale (1); } }

Effect 3:colored Chalkboard

. colored-chalkboard-effect { $url: URL (photo.jpg); Background-image: $url; Background-size:cover; Background-position:center; @supports (Filter:brightness (2)) and (Background-blend-mode:color, difference) { Background-image: $url, $url, $url; Background-size:cover; Background-position: Calc (50%-1px) Calc (50%-1px), Calc (50% + 1px) Calc (50% + 1px), Center Background-blend-mode:color, difference; Filter:brightness (2); } }

Effect 4:hallucination

. hallucination-effect { $url: URL (photo.jpg); $offset: 5px; Background-image: $url; Background-size:cover; Background-position:center; @supports (mix-blend-mode:multiply) { position:relative; Overflow:hidden; Background-color:magenta; Background-blend-mode:screen; &:before, &:after { Display:block; Content: ""; Position:absolute; top:0; left:0; right:0; bottom:0; Background:inherit; mix-blend-mode:multiply; Transform:scale (1.05); } &:before {background-color:yellow; Background-blend-mode:screen; Transform-origin:top left; } &:after { Background-color:cyan; Background-blend-mode:screen; Transform-origin:bottom right; } } }

Effect 5:collage

. collage-effect { $url: URL (photo.jpg); Background-image: $url; Background-size:cover; Background-position:center; @supports (Background-blend-mode:overlay) { Background-image: $url, $url, $url, $url, $url, $url; background-size:200%, 80%, 60%, 50%, 40%, 100%; background-position:50%, 80%, 30%, 0; Background-blend-mode:overlay; Background-repeat:no-repeat; } }

Effect 6:infrared

. infrared-effect { $url: URL (photo.jpg); Background-image: $url; Background-size:cover; Background-position:center; Filter:hue-rotate (180deg) saturate (2); }

Effect 7:selective-color

. selective-color-effect { $url: URL (photo.jpg); Background-image: $url; Background-size:cover; Background-position:center; @supports (Filter:brightness (3)) and (Mix-blend-mode:color) { position:relative; &:before, &:after { Display:block; Content: ""; Position:absolute; top:0; left:0; right:0; bottom:0; Background:inherit; background-color:red; Background-blend-mode:screen; Mix-blend-mode:color; Filter:brightness (3); } } }

Effect 8:colored-pencil-effect

Colo Red-pencil-effect { $url: url (photo.jpg); Background-image: $url; Background-size:cover; Background-position:center; @supports (Filter:invert (1)) and (Mix-blend-mode:color) { position:relative; &:before, &:after { Display:block; Content: "; Position:absolute; Top:0; Left:0; Right:0; Bottom:0; Background-size:cover; Box-shadow:inset 0 0 0 1px black; } &:before { Background-image: $url, $url; Background-blend-mode:difference; Background-position: Calc (50%-1px) Calc (50%-1px), Calc (50% + 1px) Calc (50% + 1px); Filter:brightness (2) Invert (1) grayscale (1); } &:after { Background:inherit; Mix-blend-mode:color; } } }

Effect 9:photo-border

. photo-border-effect { $url: URL (photo.jpg); Background-image: $url, $url; Background-position:center; background-size:60%, 20%; Background-repeat:no-repeat, repeat; }

Effect 10:mosaic

. mosaic-effect { $url: URL (photo.jpg); Background-image: $url, $url; Background-size:cover, 5% 5%; Background-position:center; Background-blend-mode:overlay; }

The above is the use of CSS to achieve a variety of picture filter effect of the whole content, I hope you can see after the harvest.