Тёмный

How to use mix-blend-mode, and how to avoid problems with it 

Kevin Powell
Подписаться 913 тыс.
Просмотров 71 тыс.
50% 1

You don't hear a lot about mix-blend-mode, but after mentioning it in a previous video, a lot of people asked for something more in-depth, so here we are!
🔗 Links
✅ First codepen: codepen.io/kevinpowell/pen/dy...
✅ Second codpen: codepen.io/kevinpowell/pen/3c...
✅ MDN information on it: developer.mozilla.org/en-US/d...
✅ Ana Tudor CodePen I mentioned: codepen.io/thebabydino/pen/dy...
✅ Ana Tudor's CSS-Tricks article: css-tricks.com/taming-blend-m...
✅ background-blend-mode video: • CSS Blending Modes
⌚ Timestamps
00:00 - Introduction
01:39 - The basics of mix-blend-mode
05:25 - Issues with text
08:29 - Using isolation
09:56 - opacity vs mix-blend-mode
11:50 - more on isolation
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my RU-vid channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Опубликовано:

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 80   
@zachjensz
@zachjensz 2 года назад
6:50 Kevin: My favourite thing in the world which is a Pseudo Element Kevin's Kids: 😢
@KevinPowell
@KevinPowell 2 года назад
😂😂
@Timooooooooooooooo
@Timooooooooooooooo 2 года назад
Surely his kids would be a kevin::after pseudo element?
@GauravKumar-ue7nz
@GauravKumar-ue7nz 2 года назад
@@Timooooooooooooooo lol
@valeriomattera7277
@valeriomattera7277 2 года назад
Brilliant, just yesterday I used mix blend mode at work and this video gave me a better understanding of its use. Thank you!
@TheZamirOrion
@TheZamirOrion 6 месяцев назад
You are definitely the best, interesting, in-depth and at the same time bite-sized ressource. Thank you so much. You made me love CSS again.
@Mark_MKII
@Mark_MKII 2 года назад
Thanks for the video - it's crazy how much you can do with CSS now! To clarify one point, 'multiply' darkens the image by 'multiplying' the color values of the upper layer onto the lower layer (not just letting darker pixels through). Even pixels from the lower layer that are darker than the upper layer are darkened *further*. Not sure about CSS, but in Photoshop the 'darken' blending mode is closer to what's described in the video.
@srinathmuthusamy9661
@srinathmuthusamy9661 2 года назад
I haven't used CSS mix blend mode but hope that's useful waiting for the premier
@rhvsingh
@rhvsingh 2 года назад
Today, I was searching for mix-blend-mode and found some useful information and now you made a video on it. Now I will master it. 😄😄😄
@shubhamsingh1409
@shubhamsingh1409 2 года назад
I have used mix-blend-mode a lot but could not figure out the gradient look. Thank you Kevin.
@francolamattina1803
@francolamattina1803 2 года назад
Love your content, really enjoyable for learning and entretainment. Thank u!
@meghakg6283
@meghakg6283 2 года назад
Hey, Kevin! Learning sooo much from your videos. It's fun, love your videos. Thank youuu😇🙏
@tushardorale5347
@tushardorale5347 2 года назад
You are amazing!!! Because of you I'm falling in love with CSS ❤️
@peternicholson26
@peternicholson26 2 года назад
Definitely need to be using this more in my hero sections. Good share and great expansion as always chief
@Norell88
@Norell88 2 года назад
The timing... synchronicity. Thank you for this. :)
@crunckNATIon
@crunckNATIon 2 года назад
This came right on time to my suggested videos...now I'm going to watch the css blend modes
@Stoney_Eagle
@Stoney_Eagle 2 года назад
I don't see that being used anywhere but it looks really good. I'm fixated on that scroll animation hehe, looks like a pool ball kicking another 🎱
@VasilyPavlik
@VasilyPavlik 2 года назад
Looks absolutely fantastic! Thanks a lot
@mohammedsamir5142
@mohammedsamir5142 2 года назад
I have just learnt new useful CSS stuff!!
@Colstonewall
@Colstonewall 2 года назад
You are the "CSS KING." No doubt about it.
@makeitbollywood
@makeitbollywood 2 года назад
love it
@theman7050
@theman7050 Год назад
Ohh that isolation is such a handy tip. Thanks, man ✌🏽😁
@mdshadab3369
@mdshadab3369 2 года назад
Great! CSS property Love to learn CSS from U Love❤❤ from India🇮🇳
@lindascoon4652
@lindascoon4652 2 года назад
css is so painful, thank you for helping ease the pain a little
@shinmini99
@shinmini99 Год назад
Thank you Kevin :)
@dave6012
@dave6012 2 года назад
This layout example reminds of an issue I’m sure you could give some insight on. That is, what are design best practices when making this type of hero layout responsive?
@nyarehd
@nyarehd 2 года назад
I'm gonna use this in my portfolio project.
@user-es9yl3rm9f
@user-es9yl3rm9f 2 года назад
thanks Kevin
@hagergamal2856
@hagergamal2856 2 года назад
Amazing video 👍 Could u make a video on using sticky that explains how u made it up and down 👍
@afzalmahmudd8365
@afzalmahmudd8365 2 года назад
Love you. Make a video about staking context. Please. I love you❤️
@GauravKumar-ue7nz
@GauravKumar-ue7nz 2 года назад
Thank you Kevin
@kevincrinklaw7422
@kevincrinklaw7422 2 года назад
Hey, side note but that's a nice use of position: sticky on the scrollups. I think it made for a nice demo. (Although if it's something different, I'd be curious to know what).
@KevinPowell
@KevinPowell 2 года назад
Yeah, I love position sticky 😁
@BadmintonAllOut
@BadmintonAllOut 2 года назад
Sir, can we tap the background under the .overlay? Tq
@normanomli8703
@normanomli8703 2 года назад
hi kevin i have an issue where background image loses its transparency during a bootrap carousel transition, any idea why?
@yaldakarimi3772
@yaldakarimi3772 2 года назад
Still the best! Could you show how you did that scroll thing as well? Looked cool
@RaveKev
@RaveKev 2 года назад
Is inside the codepen. Sections and sticky positions
@Aabara_ka_dabara
@Aabara_ka_dabara Год назад
what is the diffrence between background-blend-mode and the mix-blend mode? can you please tell me or make a video on this.
@dysb
@dysb Год назад
I'm working on a site where user's can specify their own background image. Is there a blend mode that is good at providing contrast against an arbitrary background?
@gamertag8721
@gamertag8721 2 года назад
nice use of Sticky to show comparison :)
@_ap__
@_ap__ 2 года назад
Hi Kevin. Big fan of your CSS tutorials. Wanted to ask if there is any possibility of you making an Intermediate level tutorial of Customizing Bootstrap -5 with SASS and Bootstrap's new Utility API? Any thoughts?
@KevinPowell
@KevinPowell 2 года назад
I don't have any plans on covering Bootstrap anytime soon, sorry.
@Billiam112
@Billiam112 2 года назад
Non related to your vid Kevin; What are your thoughts on Tailwind? I just saw a video of new features for tailwind and just wanted to hear Your thoughts on it and just commented on the first video I could find of yours. 😁 Personally, I'm worried about css knowledge in the community would decrease tremendously, if tailwind becomes sort of standard. I mean, it has the obvious benefits of styling things incredible fast. Do you have a video on this topic? If not, perhaps the topic would be interesting enough for one? Allt the best to you!
@picturit
@picturit 2 года назад
Instead of setting z-index, in this case, using a ::before I/o an ::after would solve the issue imho.
@KevinPowell
@KevinPowell 2 года назад
A lot of people have said that, but it doesn't work. mix-blend-mode creates a new stacking context by default, so either way it's on top.
@bramvanoverveld6982
@bramvanoverveld6982 2 года назад
the "mix-blend-mode: difference", is to take the opposite of each color, so on 4:32 you see a black screen because the default screen on photoshop is white
@Jarreddesigns
@Jarreddesigns 2 года назад
love the new music lol
@AmlanDasKarmakar
@AmlanDasKarmakar 2 года назад
I think we can also go for ::before pseudo element instead of working with isolation and z-index in this context.
@Tom-xi4vk
@Tom-xi4vk 2 года назад
Yes indeed, then the text is automatically added after that one and has a better z-index by default :-)
@user-fc8xw4fi5v
@user-fc8xw4fi5v 2 года назад
yeahhh i did this on my website and it was super easy
@thcdenton
@thcdenton 2 года назад
3:58 "Acid Trip Kevin isn't real. He can't hurt you."
@XTANCE
@XTANCE 2 года назад
Anyone knows whats the font for the thumbnail of video? "CSS" word
@fuad7258
@fuad7258 2 года назад
please make a video with slick slider
@AidaHashemii
@AidaHashemii 4 месяца назад
awesome
@bimalpandey9736
@bimalpandey9736 2 года назад
If I use transform property, that mix-blend-mode magic disappears, anyone know why?
@krishjgupta3017
@krishjgupta3017 2 года назад
Plz make a video on eliminate vertical scroll bar
@KevinPowell
@KevinPowell 2 года назад
Hopefully you mean horizontal? I've looked at debugging in the past... sometimes things like 'overflow-x: hidden' are useful for that though, but it can be good to find what's causing it.
@pulkitsaxena7668
@pulkitsaxena7668 2 года назад
how does he comment the line with shortcut... I have searched alot and I cant find the shortcut to comment.. Does anyone know how to do it?
@anulama2191
@anulama2191 2 года назад
Ctrl+/ ?
@emon123utube
@emon123utube 2 года назад
Dear Sir, your all video tutorial undoubtedly best on RU-vid, your viewer all over the world, so for Non native English people like us its hard to understand while you talk too much fast in every tutorial, so i request you please while you talk please think about for non-native people
@KevinPowell
@KevinPowell 2 года назад
Been trying to slow down for 5 years now, it's hard 😂. You can slow the video down in the settings, and also turn on captions. I do my best to slow down as well!
@56polobzh
@56polobzh 2 года назад
Why not use a "background-color: rgba()" for this example ?
@KevinPowell
@KevinPowell 2 года назад
Same result as when I dropped the opacity 🙂
@56polobzh
@56polobzh 2 года назад
But the texts are not affected, no ?
@KevinPowell
@KevinPowell 2 года назад
@@56polobzh that's true, it's easier to do, it just doesn't look as nice though.
@GbpsGbps-vn3jy
@GbpsGbps-vn3jy 2 года назад
- Hey, someone mix-blends Kevin Powell in Photoshop! - Dude, this is HIS channel ... - Oh, ok ... nevermind!
@mountainslopes
@mountainslopes 2 года назад
Couldn't you just use ::before instead of ::after to make it behind the text?
@KevinPowell
@KevinPowell 2 года назад
Nope, same result. Try it out in the codepen :) - as soon as we declare position: absolute, it's pulled from the flow and going on top.
@Jarreddesigns
@Jarreddesigns 2 года назад
you should do youtube shorts with some of these small tips you always mention, should give you a bigger audience
@mikul3122
@mikul3122 2 года назад
text-shadow?
@ShaunLevett
@ShaunLevett 2 года назад
I quite often use a color mix blend with a layer over the top of images in signposts, then fade the opacity of it in on hover. So you get a nice tinted hover, but man Safari doesn't like animating that stuff. Terrible flickering. Had to throw on the traditional 'transform3d(0,0,0)' to help it, but looks totally different when I do this. I've accepted Safari isn't very good and moved on.
@endenman1872
@endenman1872 2 года назад
Before i used rgba or hsl as the background, now i use mix blend mode!
@mythrail
@mythrail 10 месяцев назад
This would be a good video to show off the 'Layers' panel in chrome dev tools, provides a great way to visualize the stacking contexts. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6je49J67TQk.html
@itsPenguinBoy
@itsPenguinBoy 2 года назад
Sadly chrome on android does the wrong blend modes 😕
@nomadshiba
@nomadshiba 2 года назад
epic
@Dexter101x
@Dexter101x 2 года назад
A bit like photoshop... Later on: Oh you know already
Далее
5 Useful CSS Properties You Didn't Know
18:17
Просмотров 57 тыс.
100❤️
00:20
Просмотров 4,8 млн
I Became a Bus Driver for a Day
00:13
Просмотров 2,9 млн
Three fun uses for  ::before and ::after
12:04
Просмотров 123 тыс.
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 50 тыс.
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 414 тыс.
I've been challenged to a CSS Battle!
33:00
Просмотров 202 тыс.
Are you using the right CSS units?
6:30
Просмотров 440 тыс.
What would you call this layout?
23:11
Просмотров 32 тыс.
23 CSS features you should know (and be using) by now
31:31
50 Website Design Mistakes (And Why)
8:24
Просмотров 62 тыс.
100❤️
00:20
Просмотров 4,8 млн