One day I saw a few pictures shared by my friend Fish. I was attracted by their slight blur and the subtle glowing effects, and wondered what kind of filter function was used. But then she told me it's just because the camera lens wasn't wiped clean.
I really liked this effect, afterwards I tried to create it with CSS, mixing two identical images together with one of them blurred and semi-transparent.
Now I look back and find two other ways to do so.
I'll use this photo in the examples below, which was taken in the park last April.
In fact, all those methods are based on the concept of stacking multiple layers like in Photoshop.
The first method I mentioned above was to use a blurred layer on top of the original image,
and then merged them with
(I learned later from HN comments that the
mix-blend-mode is not needed.)
property is quite special, it'll use its underneath layer as the filter source if the background of itself is transparent.
And it seems to be able to merge layers automatically. We could reduce one
img tag with this approach.
SVG filter is hard to understand for most people. But once you've learned how it works you'll see how straightforward it is.
First we need to clone the source image and make it blurry with command
In SVG filter, each command will use the output of its previous command as input by default. The head command will use the element which it applies to as the source input. In this case, the original image.
Continue to adjust the blurred result to make it semi-transparent and a little more bright.
By achieving that we use command
feComponentTransfer to modify its RGBA channel.
In the end, merge the transformed result with the original image by using command
feBlend command accepts two sources,
in2 and the omitted
The original image is specified with
SourceGraphic, while the
in is passed by default
with the result of its previous command. Of course, we may also give each result a name, which would be more readable.
So there is the final result.
Applying the effect
The above methods are basically only one that interpreted in different ways. The SVG filter is my favorite since it's most applicable.
I've used it once in one of my artwork.
#generative #CSS #SVG pic.twitter.com/aKEpsbqYKX— yuanchuan (@yuanchuan23) May 27, 2022
Some camera effects will emerge together with the
And I think there are more use cases.