A missed opportunity in this was to explain the reason we're making it white. In this case, the color is getting **subtracted**. Using #000000 (black) means you're subtracting 0, so the element remains invisible (white). On the other hand, when you set it to #FFFFFF (white), you're subtracting 255 from the color value. As a result, the element is displayed as black (0) because 255 (white background) - 255 (white element) = 0 (displayed black). Cheers! 🍻 Regardless thank you so much for the video!! Informative and concise as always, Kevin!
Yes, he kinda suggested that the reason it's called Difference is because in Photoshop it was used to find difference between elements, but this subtraction math where you find numerical difference between two colors is actually the reason why it's called difference
So a medium grey would become a negative number? Or does it get absoluted back. But then the logo should dissapear again on a color of 128 which gets subtracted to -127 and inverted back to 127. This way the logo would dissapear?
Me too. Every day a new way to fancy up my sites a little bit. I am a fan of really subtle effects. transitions shorter than .1s almost invisible textures, etc. You brain will recognize them but you are not consciously aware of them (unless you actively look for them). This way the site always feels better. Can't describe it. It just enhances it greatly without being noticed (or demanding a lot of ressources)
I'm literally working on a practice project with overlapping backgrounds as you scroll down. Yesterday I was thinking to myself "Man it would be awesome if I could change up the navigation's font color to keep contrast on different backgrounds..."
Thought its gonna be difficult. But its very easy. step-1/ make the color of logo white step-2/ apply mix-blend-mode:difference; to the logo Thanks for the video❤
This is a very interesting and clean way to do this! I've previously done this by having duplicate menu bars and using clip-path, which might still be useful as it does give more control in regards to colors. Though at the time, the main reason was that mix-blend modes just weren't fully supported yet.
Or avoid setting fill inside the SVG and instead set it in context? For multicolored SVGs I define classes inside the SVG and refer to them from page CSS.
I usually keep an eye on CSS news, but this time my mind is completely blown. Don't know if this property is new but I have never seen it. Might come really handy in the future
I've been playing extensively with blend modes in Affinity Photo for the past couple years. Astounding how useful it could be in CSS if I'd remember to use it . . .
That is absolutely great, but I wonder how would you do something similar, with multiple colours. I saw something like that on a Dropbox page (years ago), I think. It had multiple, different coloured sections. Both logo and navigation were changing the way it does in Your example, but with different colour for each section. I wasn’t able to recreate it.
The only downside to this is that you're expected to have a complete black/white page, for you to successfully use this trick. This is most times not the case for anyone. You will probably somewhere have a bit of color on the page.
Hi Kevin, absolutely awesome video. I've been struggling to get this to work for ages. So I set it up exactly as you did and it worked. The problem I was having was I was placing my logo element into a header. Why would placing this inside another div/header cause issues?
Nice effect there. It started to get problematic, the taps in my broswer are getting greater and greater because youtube keeps suggesting your nice videos XD
ChatGPT: `mix-blend-mode: difference` calculates the absolute difference between the color values of the element and the background for each of the RGB channels separately. Here's how it works with black and white logos against black and white backgrounds, explained with RGB values: - **White logo on white background:** turns black (`|rgb(255, 255, 255) - rgb(255, 255, 255)| = rgb(0, 0, 0)`). - **White logo on black background:** remains white (`|rgb(255, 255, 255) - rgb(0, 0, 0)| = rgb(255, 255, 255)`). - **Black logo on white background:** turns white (`|rgb(0, 0, 0) - rgb(255, 255, 255)| = rgb(255, 255, 255)`). - **Black logo on black background:** remains black (`|rgb(0, 0, 0) - rgb(0, 0, 0)| = rgb(0, 0, 0)`). This explains why it works with a white Logo but not with a black Logo. Thanks Kevin & Chatty! ^^
Hey! I was stuck on a problem, and this video is a part solution to it. However, I want to make a small tweak i.e. my background colour is #A91232 and on reaching this background, I need the text colour to be white only. How do I do it? Please help. Thanks
Do you have any solution if my logo has black/white typography and color image? I'm mean I'd like to change color of typography just like you presented but keep the colors untouched (not inverted)
Hi Kevin, I was wondering if it would be possible to provide the starter files for tutorials you are doing in VS Code. It is kind of difficult to replicate everything you are doing in the tutorial unless we have the same starting point. Love what you do in these videos. Much appreciated :)
I've been trying to use this only for when I scroll over images, but not on the background (behind the images and - in this case - heading). Anyone got any idea on how to only use the mix-blend-mode when scrolling over elements (images), but not the background of the section/div?
Hello Kevin, in case you read this comment, I've been wondering something. I keep seeing a lot of websites that don't use hover effects on their navigation menues. And it's clearly not a mistake or something they forgot, they are just not using it deliberately . What's your thoughts?
You didn't work with IE6-8 if you're saying that 😅 It's definitely had it's issues, but it's often landing new features before Chromium does now. They've invested a lot into the team, and they've really leveled up a lot. The issue is, of course, people on older iPhones can't update, so we do have to keep them in mind.
A missed opportunity in this was to explain the reason we're making it white. In this case, the color is getting **subtracted**. Using #000000 (black) means you're subtracting 0, so the element remains invisible (white). On the other hand, when you set it to #FFFFFF (white), you're subtracting 255 from the color value. As a result, the element is displayed as black (0) because 255 (white background) - 255 (white element) = 0 (displayed black). Cheers! 🍻
Regardless thank you so much for the video!! Informative and concise as always, Kevin!
Yes, he kinda suggested that the reason it's called Difference is because in Photoshop it was used to find difference between elements, but this subtraction math where you find numerical difference between two colors is actually the reason why it's called difference
So a medium grey would become a negative number?
Or does it get absoluted back. But then the logo should dissapear again on a color of 128 which gets subtracted to -127 and inverted back to 127. This way the logo would dissapear?
@@NineSun001 grey background = white logo becomes grey, black logo becomes grey.... :(
I’m a professional frontend dev, and I learn so much from these videos. I would’ve never known about mix blend mode on my own.
You can never know everything by hearth, not to mention that new things come along every few months. This is why such videos are so useful
Me too. Every day a new way to fancy up my sites a little bit. I am a fan of really subtle effects. transitions shorter than .1s almost invisible textures, etc. You brain will recognize them but you are not consciously aware of them (unless you actively look for them). This way the site always feels better. Can't describe it. It just enhances it greatly without being noticed (or demanding a lot of ressources)
I'm literally working on a practice project with overlapping backgrounds as you scroll down. Yesterday I was thinking to myself "Man it would be awesome if I could change up the navigation's font color to keep contrast on different backgrounds..."
You're lucky😂You got your solution when you needed it
@@goodshiro10 right?? LOL
Genius!!
The time you put in to discover and learn these things, just so you can share with us, is amazing!
Thanks❤
Thought its gonna be difficult. But its very easy.
step-1/ make the color of logo white
step-2/ apply mix-blend-mode:difference; to the logo
Thanks for the video❤
This is a very interesting and clean way to do this!
I've previously done this by having duplicate menu bars and using clip-path, which might still be useful as it does give more control in regards to colors.
Though at the time, the main reason was that mix-blend modes just weren't fully supported yet.
thank you so much for sharing those "simple" tutorials, you make css looks so easy hehe
You can use CSS filter: brightness(100); or invert(1); to turn your black/colored logo into white without modifying it.
Exactly
why wuld you do that?
Kevin thanks a lot.... Whenever I face a problem in css, I find your videos very useful👍.
I will forever salute you. Most of the things I know now is because of you, thank you so much
Exactly what I was looking for! THANK YOU SOOOOO MUCH!!!
Use currentColor in the svg to avoid multiple files
I thought currentColor only worked with inline SVGs?
@@Shaffefr currentColor is a CSS property, it will grab the closest color value. For example from the parent class.
@@wheeldwell yes, what I was saying is that I think that currentColor doesn't work for external SVGs.
Or avoid setting fill inside the SVG and instead set it in context? For multicolored SVGs I define classes inside the SVG and refer to them from page CSS.
I usually keep an eye on CSS news, but this time my mind is completely blown. Don't know if this property is new but I have never seen it. Might come really handy in the future
Greta job Kevin! It's very useful!!
I've been playing extensively with blend modes in Affinity Photo for the past couple years. Astounding how useful it could be in CSS if I'd remember to use it . . .
Thanks for your great videos! You are a great teacher 😊
That is absolutely great, but I wonder how would you do something similar, with multiple colours. I saw something like that on a Dropbox page (years ago), I think. It had multiple, different coloured sections. Both logo and navigation were changing the way it does in Your example, but with different colour for each section. I wasn’t able to recreate it.
You could probably do it using the svg as a mask or clip-path... Would have to give it a bit of thought though
I am also for something like this..
I click the like before the video starts. Kevin brings CSS satisfaction guaranteed!
The only downside to this is that you're expected to have a complete black/white page, for you to successfully use this trick. This is most times not the case for anyone. You will probably somewhere have a bit of color on the page.
use grey, and nothing works :D
Very cool trick! Now I know one more. Thanks a lot!
Thank you Kevin !
This is so simple yet elegant, Thank you so much Kevin!
Perfect timing!
A very nice effect :)
Thank you , Kevin
Thanks much! Just finished a course on mixed-blend-mode and had the same question "why it disapears?" :)
Love you men keep blowing my mind
Great effect
Hi Kevin, absolutely awesome video. I've been struggling to get this to work for ages. So I set it up exactly as you did and it worked. The problem I was having was I was placing my logo element into a header. Why would placing this inside another div/header cause issues?
I coded this on a project litterally this morning
Very nice and helpful.
Nice video
gracias, ily
How can we do this when the section has a different color than black?
I am running into this issue right now. With black it works, but not otherwise.
not wroking for me with transparent mui appbar... the problem is appbar transparent background. not sure how to fix that
Very cool!
Nice effect there. It started to get problematic, the taps in my broswer are getting greater and greater because youtube keeps suggesting your nice videos XD
Great 👏
Yet another amazing video! Thank you so much, Kevin! One can learn something new everyday thanks to you 🍻🍻
ChatGPT:
`mix-blend-mode: difference` calculates the absolute difference between the color values of the element and the background for each of the RGB channels separately. Here's how it works with black and white logos against black and white backgrounds, explained with RGB values:
- **White logo on white background:** turns black (`|rgb(255, 255, 255) - rgb(255, 255, 255)| = rgb(0, 0, 0)`).
- **White logo on black background:** remains white (`|rgb(255, 255, 255) - rgb(0, 0, 0)| = rgb(255, 255, 255)`).
- **Black logo on white background:** turns white (`|rgb(0, 0, 0) - rgb(255, 255, 255)| = rgb(255, 255, 255)`).
- **Black logo on black background:** remains black (`|rgb(0, 0, 0) - rgb(0, 0, 0)| = rgb(0, 0, 0)`).
This explains why it works with a white Logo but not with a black Logo. Thanks Kevin & Chatty! ^^
I am trying to do something like that with the nav bar and then it changes colors and sticks to thte jtop with tailiwind :)
How should we get the source code you have above?
Because I need it :)))))))))))))))
but what if i want to do this with colours? black and white hurt my eyes
Hey! I was stuck on a problem, and this video is a part solution to it. However, I want to make a small tweak i.e. my background colour is #A91232 and on reaching this background, I need the text colour to be white only. How do I do it? Please help. Thanks
Do you have any solution if my logo has black/white typography and color image? I'm mean I'd like to change color of typography just like you presented but keep the colors untouched (not inverted)
Will this work for a logo that is a JPG, PNG, or GIF?
Is this stop working in modern browsers? I tried using the same code and not working anymore
Thank you for the trick...
Do you think this can be used to change navigation color according to the background ?
Love it.
Hi Kevin, I was wondering if it would be possible to provide the starter files for tutorials you are doing in VS Code. It is kind of difficult to replicate everything you are doing in the tutorial unless we have the same starting point. Love what you do in these videos. Much appreciated :)
Dammit where was this video weeks ago when I was trying to do this for a job interview!?!?!?! Lol
Oh no! Lol, hope it went well otherwise!
I've been trying to use this only for when I scroll over images, but not on the background (behind the images and - in this case - heading). Anyone got any idea on how to only use the mix-blend-mode when scrolling over elements (images), but not the background of the section/div?
Why don't you show or upload the entire initial setup code and files so that I can refer to it?😅😅
This guy is Gale Boetticher of front-end
How to save color for some text for :hover ? .chapterLink:hover{color: #f00 !important;} ???
quick question on the slight off white - the shorthand #fff is the same as #f0f0f0, right? 6:48 - since it;s a svg we can use fill:white; no?
#xyz is a shorthand for #xxyyzz. So #fff is a shorthand for #ffffff, i.e. white.
@@ScriptRaccoon Alright! I always thought that I read somewhere it's padded with 0s...
Awsome
Cool 😎
you know that the effect is really easy to recreate when the video size is just 8mins 😂
Hello Kevin, in case you read this comment, I've been wondering something. I keep seeing a lot of websites that don't use hover effects on their navigation menues. And it's clearly not a mistake or something they forgot, they are just not using it deliberately . What's your thoughts?
👍
Try to make a short video and director to the point
Why couldn't they come up with this syntax in the first place???????????????
Nothing is ever supported in Safari. It's worse than the IE was.
You didn't work with IE6-8 if you're saying that 😅
It's definitely had it's issues, but it's often landing new features before Chromium does now. They've invested a lot into the team, and they've really leveled up a lot. The issue is, of course, people on older iPhones can't update, so we do have to keep them in mind.
It will be your pleasure, to provide the images/logo as well. along with all lectures.
I thought using px for media queries was bad practice?