#selectivesaturation — Public Fediverse posts

1️⃣3️⃣ Finally, we add the bottom half (the text with shadow) on top - this gives us the final result! 🎉

Even if filtered, the text is actual figcaption text, so it's selectable (styled so it's legible). The image is an actual img element, so right clicking it gives us the proper right click menu.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect #CSS #compositing

That's it for the 2nd filter!

Now you could say we can do without mask smoothing of the text drop-shadow and in that case we wouldn't need to break the filter into multiple ones. Oh, well...

1️⃣2️⃣ In the third filter, we move the input down by half its height so the image is now in the bottom half.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect #CSS #compositing

We've also painted https://mastodon.social/@anatudor/112157559510002242 the text fill & stroke when extracting it (this technique https://mastodon.social/@anatudor/115751019080555300) from the red & blue channels.

1️⃣0️⃣ We combine the stroked part with the 'fill' part, then add a drop shadow on the whole text.

1️⃣1️⃣ We add back the image in the top half.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect #CSS #compositing

8️⃣ We extract just the dress area mask from the green channel, smooth out jagged edges & save result as 'mask'.

9️⃣ We extract just the text fill from the blue channel, subtract mask area out of it & save result as 'fill'. Similarly, extract just the stroke from the red channel & intersect with mask.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect #CSS #compositing

We map parts of the filter input with an alpha of .5 (the image) to an alpha of 1 (opaque) and parts with an alpha of 1 (the text & mask bottom half) to an alpha of 0 (transparent). This basically gives us just the opaque image and we save this result as 'back'.

We extract bottom half the same way.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect #CSS #compositing

This blending result is saved as 'main'.

5️⃣ Extract just the top half (where the image is) and make its alpha .5 everywhere.

6️⃣ Add in the blending output in the bottom half which is opaque everywhere. This is the output of the 1st filter!

7️⃣ The 2nd filter uses fixed px length values.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect #CSS #compositing

3️⃣ So we move on to text extraction https://mastodon.social/@anatudor/112095185713025704 from the filter input.

Taking into account the stroke alpha https://css-tricks.com/adventures-in-css-semi-transparency-land/, we extract the fill on the blue channel & save it as 'fill' and the stroke on the red channel.

4️⃣ We blend the text stroke & fill & then the mask.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect #CSS #compositing

We have to do it for the entire filter https://blog.master.dev/svg-filters-guide-getting-started-with-the-basics/

But the extracted mask looks kind of rough - we want to smoothen its edges before applying it. This includes a small a blur whose radius is 2-3px, NOT relative to filter input box size. So we cannot do it in *this* filter.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect

But this means we then need to move the image mask in the text half to intersect them. Move it by a distance equal to half the filter input height. This means using input box relative values for length attributes like dy for the entire filter. We can't pick what type of units we use per primitive...

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect

2️⃣ In the filter, we first extract the intersection area on the green channel, move it in the lower half where our final result should be and save it as 'mask'.

We don't apply it yet.

The image and the text need to be in different halves so we're able to easily get the pixels of both unaltered.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect

So what then? How do we visually place the image in the top half, but still get the img right click menu in the bottom half? The best way is using this technique https://blog.master.dev/something-nobody-told-you-about-the-image-element-it-can-overflow/

(unfortunately, it doesn't work in Safari, so the cross-browser demos above use a fallback)

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect

1️⃣ Filter input is made up of 2 parts, the img in the top one, visually outside the box it will be in at the end (green grid-area highlight). You'd think just placing it there via layout/ translation from under the figcaption will do, but it won't - we'd get the right click menu in the top half then.

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect

For anyone wondering about the actual demos from the collage, I've shared them before, but here are the @codepen links again:

❇️ https://codepen.io/thebabydino/pen/dyEeVrg?editors=1100

❇️ https://codepen.io/thebabydino/pen/gOJzXEL?editors=1100

❇️ https://codepen.io/thebabydino/pen/BaexVyG?editors=1100

❇️ https://codepen.io/thebabydino/pen/xxNjzqr?editors=1100

❇️ https://codepen.io/thebabydino/pen/JjzvXye?editors=1100

#SVG #filter #imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect

Same masking technique can be used for styling text differently depending on whether it intersects an area of the image.

Just an #SVG filter on a figure with an img & figcaption. No extra elements or pseudos to duplicate the text or img. Selectable text, right click menu on img.

#imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend #textEffect

Selective saturation 🍊

Just a super simple #SVG #filter does it in 3 steps:

1️⃣ mask out all outside areas with RGB channels in a certain range (🍊 here) & save result
2️⃣ desaturate entire image
3️⃣ place masked result on top of desaturated image 🥳🎉

Live demo on @codepen: https://codepen.io/thebabydino/pen/ExMLmZL?editors=1100

#imageEffect #imageEditing #svgFilter #selectiveSaturation #code #coding #web #dev #webDev #webDevelopment #frontend