Ana Tudor 🐯<p>If we have an inline `span` inside a `p` & we give it a semi-transparent `background` + a `padding`, we get an alpha increase where backgrounds of adjacent lines overlap.</p><p>How would you solve this problem without text duplication, without stacking 2 identical `p` elements, one for background (opaque background + transparent text + opacity) and one for text (transparent background)?</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/blendMode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blendMode</span></a> <a href="https://mastodon.social/tags/blending" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>blending</span></a></p>
Recent searches
Search options
#blending
0 posts0 participants0 posts today
Pure #CSS 1 div halftone-masked background card https://codepen.io/thebabydino/pen/GRNKqRv on @codepen.
Made this 4 years ago - can you guess how before checking the code?
Doesn't work in Firefox due to an old bug 
https://bugzilla.mozilla.org/show_bug.cgi?id=1481498 not even related to the halftone mask, but caused by the duo text on the right.
Really cool to see people linking my Frontend Masters article as a resource https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
Continued thread
By the way, this is my second article for Frontend Masters.
My first was a few months ago and it was about creating dynamic split effects (image, text, page) without any content duplication whatsoever https://frontendmasters.com/blog/split-effects-with-no-content-duplication/
GIF
I have a new article out: 
Pure CSS Halftone Effect in Only 3 Declarations https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 
cooler, more interesting patterns.
frontendmasters.comPure CSS Halftone Effect in 3 Declarations – Frontend Masters BoostA halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be done in CSS alone, starting quite simply!
A little @codepen demo I made some years back: #duotone a B&W image using pure #CSS #blending (and very little code in total) https://codepen.io/thebabydino/pen/MWbdbrm
With a comparison slider between the two blend modes that may be used for the effect and a picker for duotone palette base.
Created for my Taming Blend Modes #CSSTricks article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
GIF
Another request, mastodon 
If you can test in Safari, can you let me know what the second (moving) line looks like for you?
https://codepen.io/thebabydino/pen/JjgdLQL?editors=1100
Cyan like expected/ Chrome/ Firefox? Lime like what I'm seeing with Epiphany?
Boosts appreciated if you cannot test. Thanks! 
If you can test in actual Safari, could you let me know how this looks for you?
https://codepen.io/thebabydino/pen/YzoobYd
Like in the first screenshot or like in the second?
Thanks!
Saw some familiar demos among those trending on @codepen 
blended layers
slice & offset
here is real magic 
dizzy 3D
no matrix gooey effect
realistic grainy shadows
slice
split text effect
If you like split effects, I've collected a bunch of them with no content duplication in this post https://frontendmasters.com/blog/split-effects-with-no-content-duplication/
Note that the recordings were made on an old laptop and they suffer from compression. The live demos look better.
Enjoy!
GIF
GIF
GIF
GIF
Continued thread
We can also go the other way with the exact same minimal structure: from black and white photography to a duotoned image - see it on @codepen: https://codepen.io/thebabydino/pen/jOjLRyp
single element, no ::before or ::after under 20 #CSS declarations #JS only needed to update 1 CSS variable on drag
Continued thread
First up, the comparison/ split type of demos. Something like this can be done with as little as just a range input - see this demo I made some years ago https://codepen.io/thebabydino/pen/qBqqoXa
Here the image is a track bg layer blended with another bg layer limited between thumb & right edge.
This is a demo I dissected in a lot of detail in an article I wrote on the topic of #CSS #blending at the time https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
This includes many other similar effects that don't involve content duplication.
GIF
GIF
No text duplication, no JS, no images save for CSS gradients, no long lists of values for anything (like text-shadow).
Just plain text + CSS gradients + blending + the magic of #SVG filters for extrusion + texture
Offset & XOR frame - another one of my faves on @codepen: https://codepen.io/thebabydino/pen/RwoBREa
Made a few years back for my Taming Blend Modes article https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
Continued thread
688 
Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) https://codepen.io/thebabydino/pen/NWxBzRv
A variation on the pure CSS halftone technique https://mastodon.social/@anatudor/112401133442879091
Continued thread
First played with this effect when creating use case demos for https://css-tricks.com/taming-blend-modes-difference-and-exclusion/#aa-gradual-inversion
Since then I've refined the technique with demos such as: https://codepen.io/thebabydino/pen/bGjjgRd https://codepen.io/thebabydino/pen/GRBBpeJ
But the SVG solution doesn't hit any of the limitations that the pure CSS demos do.
Continued thread
There's also the option of duotone images... and by the way, the palette can be animated (even if leaving the palette animation to randomness makes the result look more like monochrome at times).
Anyway, here's the demo on @codepen https://codepen.io/thebabydino/pen/RwdjEBW
