Beside the halftone part, it also uses the new and improved frame technique detailed in a previous post
https://mastodon.social/@anatudor/115842104085981942
#CSS #SVG #filter #code #cssFilter #blendMode #svgFilter #coding #frontend #web #dev #webDev #webDevelopment #cssGradient #halftone
If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you 🙏 and second, I've just published something detailing how to easily get halftone-masked images with blend modes and filters.
❇️ https://ko-fi.com/post/Halftone-masking-with-the-frame-technique-W7W81S7LIW
❇️ https://www.patreon.com/posts/halftone-masking-148100795
#CSS #filter #SVG #blendMode #cssFilter #svgFilter #halftone #coding #frontend #web #dev #webDev #webDevelopment #code #cssGradient
Noticed this got featured on @codepen: an animated XOR background - enjoy!
https://codepen.io/thebabydino/pen/JoKYVeB
Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3
#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code
Single element, minimal #CSS (20 declarations and only that many to even out browser inconsistencies), minimal #JS (just updates a custom property value), comparison slider (original image vs. desaturated one) on @codepen https://codepen.io/thebabydino/pen/MWMvxxX
#code #coding #frontend #blending
#web #dev #webDev #webDevelopment
#blendMode
Because this @codepen demo just got hearted and I've never shared it here before https://codepen.io/thebabydino/pen/VwmQQwJ
The concept behind the XOR is something I explained in this
@csstricks article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
(should probably redo it with view transitions)
#CSS #blending #blendMode #coding #web #dev #webDev #webDevelopment #code #frontend
You can find a very detailed explanation about the how behind in my Taming Blend Modes: `difference` and `exclusion` article on @csstricks https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
#CSS #blending #blendMode #cssGradient #code #web #webDev #webDevelopment #dev #coding #frontend
And here are cards with gradual left to right inversion: from no inversion at all on the left, to full inversion on the right. Again, minimal code, single div, no pseudos necessary, 2 #CSS declarations.
Live demos on @codepen
✳️ https://codepen.io/thebabydino/pen/mdOzLxE
✳️ https://codepen.io/thebabydino/pen/dyOVgeR
#blending #blendMode #cssGradient #code #web #webDev #webDevelopment #dev #coding #frontend
Here's another set of cards with varying patterns, all created with the exact same 4 blended CSS gradients, it's just the stops list `--c` that changes for each card.
So basically, it's again just one `background` + one `background-blend-mode` property.
Live demo on @codepen
https://codepen.io/thebabydino/pen/vYyNyER
#CSS #blending #blendMode #pattern #cssGradient #coding #frontend #code #web #dev #webDev #webDevelopment #cssPattern #cssPatterns #patterns
And here's a cards demo with a cool, yet very simple trick: these left to right gradients are vibrant at the top, but then progressively get more and more desaturated going down, until fully grey.
Live on @codepen https://codepen.io/thebabydino/pen/xxzjJXL - only 2 CSS declarations necessary!
#CSS #tinyCSStip #blending #blendMode #cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment
By the way, the code is heavily commented https://codepen.io/thebabydino/pen/MYWxeew
So you can see how it works without JS, without wrapping individual elements into spans, just letting it wrap naturally. And without covers that wouldn't allow for an image backdrop behind the text.
#CSS #SVG #filter #svgFilter #blendMode #blending #code #coding #frontend #web #dev #webDevelopment #webDev
Ana Tudor 🐯
