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? 😭 🪲
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
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
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
This is a doozy folks!
One of those little design touches that looks like it should be an easy fix, but the generalized solution — to get this working for any colour combination, and to be able to set those colours in CSS stylesheets — is an absolute brain twister. Ana's going to take you on a tour of the possibilities & limitations of CSS & SVG filters.
(And even the final fix, while supported cross-browser, can chew up your CPU doing graphical rendering.)
https://frontendmasters.com/blog/overlapping-inline-backgrounds/
I'd love to see some discussion about how we could incorporate better backgrounds for inline elements directly in CSS.
Could we have `box-decoration: merge` that paints the backgrounds on a multi-line inline element as one operation, after merging together?
Or for the issue of the background of one inline overlapping the text of the previous line, a property like `paint-order` to send them to the back?
Or `background-clip: line-boxes` for when the full block should have highlight?
@AmeliaBR I absolutely love Ana's article since doing this type of accessible design (i.e. promoting good color contrast no matter what the background image) while not having unintended overlaps has been tricky in the past. Thanks @anatudor !
(And yes -- it would be great if there was a native CSS solution ... but this'll do for now ... 🙂 )
Ana Tudor 🐯
Mosen
Amelia Bellamy-Royds
Zoltan Hawryluk
Patrick H. Lauke