#blendmode — Public Fediverse posts

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

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.

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)?

#CSS #SVG #filter #svgFilter #code #web #dev #webDev #webDevelopment #coding #frontend #blendMode #blending

Hi, mastodon 🦣 I have a new article out!

A Deep Dive into the Inline Background Overlap Problem: https://frontendmasters.com/blog/overlapping-inline-backgrounds/

How do you get the below result (semi-transparent background on inline span) with large padding & no overlap?

Answer in article, but think a bit about it first. 😼

#CSS #SVG #filter #svgFilter #code #web #dev #webDev #webDevelopment #coding #frontend #blendMode #blending

Oh, Firefox, why are you doing this? 😭 🪲

https://bugzilla.mozilla.org/show_bug.cgi?id=1951653

#CSS #blending #blendMode #bug

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.

#filter #code #coding #frontend #cssfFilter #web #dev #webDev #webDevelopment #blendMode #blending

Really cool to see people linking my Frontend Masters article as a resource https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/

#CSS #code #coding #frontend #pattern #cssPattern #cssGradient #halftone #web #dev #webDev #webDevelopment #filter #cssFilter #blendMode #blending

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/

#CSS #SVG #filter #blending #code #web #webDev #frontend #coding #dev #webDevelopment #blendMode #svgFilter #cssGradient

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.

#CSS #pattern #gradient #halftone #cssPattern #cssGradient #filter #blending #blendMode #code #coding #frontend #web #dev #webDev #webDevelopment

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/

#blendMode #code #coding #frontend #web #dev #webDev #webDevelpment #interactive #CodePen #JS #JavaScript #slider #comparison #comparisonSlider

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! 🙏

#CSS #blending #blendMode #cssTransforms #code #coding #web #dev #frontend #webDevelopment #webDev

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! 🙏

#CSS #frontend #web #dev #code #coding #webDev #webDevelopment #blending #blendMode

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

#SVG #CSS #filter #svgFilter #blendMode #blending #code #coding #frontend #web #dev #webDev

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!

#SVG #CSS #filter #svgFilter #cssGradient #code #coding #blending #blendMode #frontend #webDev #web #dev #webDevelopment

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

#blending #blendMode #duotone #graphicEffect #code #coding #frontend #web #webDev #webDevelopment #dev

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 🪄✨

Live on @codepen https://codepen.io/thebabydino/pen/gONbppb

#filter #svgFilter #cssGradient #blending #blendMode #noise #extrusion #code #textEffect #coding #frontend #web #dev #webDev #webDevelopment

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/

#CSS #blend #blendMode #blending #code #coding #xor #frontend #web #webDev #dev #webDevelopment

6⃣ 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

#halftone #pattern #gradient #cssGradient #blendMode #blending #fliter #cssFilter #code #coding #frontend #web #webDev #dev #webDevelopment

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.

#CodePen #css #filter #cssFilter #blendMode #blending #code #coding #duotone #frontend #web #webDev #webDevelopment

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

#CodePenChallenge #CodePen #svg #filter #svgFilter #blendMode #blending #css #code #coding #frontend #web #webDev #dev #monochrome #webDevelopment

Monochrome images! Seen various approaches to this over the years, but was never super happy with results, so down the rabbithole I went.

My 3 options on @codepen https://codepen.io/thebabydino/pen/qBGdwje require a single img (no wrapper needed for effect) + a simple #SVG #filter.

#CodePenChallenge #CodePen #svgFilter #blendMode #blending #css #code #coding #frontend #web #webDev #dev #monochrome #webDevelopment

3 more such animated pure #CSS, no SVG, single element animated halftone patterns on #CodePen:

✨ https://codepen.io/thebabydino/pen/mdmVjaV
✨ https://codepen.io/thebabydino/pen/abWdaGO
✨ https://codepen.io/thebabydino/pen/NWjxaVG

#halftone #cssGradient #gradient #blendMode #blending #filter #cssFilter #noSVG #code #coding #web #dev #webDev #webDevelopment