Theme-Toggle: Filter? BG Blend? Mix-Blend?
Hi everyone. I'm trying to use this theme toggle so that i have the little circle that shows which option is toggled on. Im wondering if there is a way to use blend modes or filters (or masks maybe?) so that only the item that the circle is over has saturation. Doesnt have to be a pseudo element, and the internal icons (the logos) dont have to be bg images.
https://codepen.io/Ceecee-Hart/pen/VwObNQe?editors=1100
13 Replies
with :has() you can do this
if label has a radiobutton that is not checked
thank you, that is close to what i started with, was just trying to figure out blend modes with the actual circle wherever it lands
i think im structuring it wrong in the html or where im putting the blend-mode
if your circle is laying on top of the image, you can give the circle a mix-blend-mode: saturation.
something like this.
Im away from my desk, so can't apply it to your pen (or test is). but maybe this snippet helps
doesn't have to be on a pseudo, can be any other element that is laying on top of it
i was trying mix-blend-modes with the setup i have now which is:
where the images are background images on each label, and the 'circle' is a pseudo element of theme-toggle since i want it to travel the length of 'theme-toggle'. Should mix-blend-mode work with this setup , parents pseduo element blending with childrens bg images?
oh i found backdrop-filter: saturate() is kind of doing what i want. but backwards... and the circle has to be on top of the labels to work. hmph.
grr this is taking up way to much time. was hoping for some kind of blend mode solution so that anything thats mixed with the circle would be saturated or else its desaturated. trying to figure out the transition timing is driving me nuts.
Id prefer somehow if the circle/pseudo was only overlapping the bgImg by 10px and stopped there, only that 10px of the img is saturated
i basically need the opposite of what i have now where its desaturing whats under the circle
How about adding a pseudo element on each of the labels?
Ahh Chris! Hi!!
That gives me the same issue as I’m having when I have a regular on it though , right? It doesn’t cut out the main toggle circle.
Like I want the labels desaturated unless the circle is over it. So if the circle was stuck in the middle, the label images are desaturated except for the part that the circle/pseudo is mixing with them.
Kinda like I have it but reverse since the circle is making them desaturated. Need to flip it so that when the circle is mixing they are more saturated.
I keep getting close but can’t find the right properties that work together. The other issue is that this current reverse saturation is only working when the circle is on top of the images when ideally they would be behind
I had something similar that mark improved upon by cutting out a selector with
label:not(:has(input[type=radio]:checked )) { filter: saturate(30%)I'm not 100% sure of what you are trying to achieve.
How about this: https://codepen.io/cbolson/pen/dyERyQr
Hm I’m on phone but I’m not seeing the desaturation piece working on the new pseudo elements.
I’m trying to have the bg imgs of the sun and moon desaturated unless the circle/toggle is on top of them like a filter saturating then. So if the toggle is only covering half of it , the half that’s under the toggle is saturated and the other half isn’t. So it’s kinda like a lens where only what it’s on top of has saturation.
I’ve managed to do it backwards so only what the toggle is on top of is DEsaturated but I need to reverse it.
So the toggle acts like a mask or a filter where everything it covers has saturation. I can try to make a static example in psd if I’m still not making sense
I think that this is about as close as I can get, at least for now.
I have changed a fair few things from your original code to get this to work and it is important to note that there are a couple of magic numbers in there which obviously is not a good idea.
- As per my previous version, it maintains the use of a (somewhat modified) pseudo element on the parent element for the circle and pseudo elements on each of the labels for the saturation. These have straight edges but I think that at the size your are doing this that is not noticeable.
- I have swapped the 2 separate radio buttons for a single checkbox as this seemed better in my mind and was certainly simpler to control in the CSS as it is either checked or no rather than having to track the checked state of 2 separate radios.
https://codepen.io/cbolson/pen/yLWXzar
🤦 I have just realized that I still have it the wrong way round.
Thanks do much Chris, its really close! Hmm good plan on the single checkbox I may have to so exactly that. I've just gotta figure out somehow to get the circle that's basically a lens or mask so only what's inside it is saturated. The curved hard edge here (of what's inside the circle is saturated and what's outside isn't) is really difficult to achieve esp taking into account transition timings and the circular edge that basically needs to cut through the image. I'm wondering if I need more elements and my html setup like this isn't working to achieve the blend mode I need.
I really appreciate the effort Chris! You'd think a saturation mask would be something achievable in css.
I just realized it's hard to tell from the screenshot but everything outside of the bordered circle is desaturated 🤣
Gonna try with mask-image and radial gradients next and see if I can combine the filter somehow
just wanted to share a super sloppy, magic-numbery version with mask but a tad closer
https://codepen.io/Miss-Fox/pen/zYQzbXR?editors=1100
https://codepen.io/Miss-Fox/pen/abrwMjq?editors=0100 (using clip-path but when i turn on overflow:hidden or clip so the filter pieces dont bleed out onto whats below it, things get weird)