Тёмный

Stop animating box-shadows the wrong way! 

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

You can animate and transition just about anything with CSS, but that doesn't mean that it's a good idea to do it. Shadows and positioning are two things you don't want to animate, so in this video we look at alternatives and the positive impact using them has on your sites performance.
////// LINKS
The codepen: codepen.io/kevinpowell/pres/7...
The article by Tobias Ahlin Bjerrome: tobiasahlin.com/blog/how-to-a...
Where I got the shirt (not affiliated in any way with me): moderngeek.co/
Series on box-shadows:
The basics: • CSS Box-Shadow tutoria...
Making them look good: • CSS box-shadows - how ...
3 fun box-shadow hacks: • 3 Box Shadow Tricks Yo...
Pseudo-elements series;
The basics: • Before and After pseud...
The content property: • CSS Before and After p...
Using them as design elements: • CSS Before and After p...
✉ My newsletter: www.kevinpowell.co/newsletter
Chapters:
00:00 - Introduction
02:00 - the wrong approach
03:48 - the better approach
06:58 - comparing the performance
09:48 - an even worse approach
12:52 - outro
13:13 - bonus tip
#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
---
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.
Instagram: / kevinpowell.co
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!

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

 

8 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 89   
@leonardomorel9412
@leonardomorel9412 3 года назад
This is my third month being a self-taught student and this channel is gold, your videos help me immensely. Thanks for the content!
@cintron3d
@cintron3d 3 года назад
*TLDW:* Pre-render your shadows on a pseudo element and animate it's opacity to improve performance. Chrome DevTools has a performance monitor tab where you can see the impact of your CSS design. Opacity and Transforms are MUCH cheaper to animate than position, shadow, etc... Bonus: Shadows are tied to their respective element's z-depth. Thanks for the content Kevin! That's actually a neat approach I hadn't thought of and I should really start looking at the performance monitor more when designing.
@support2587
@support2587 3 года назад
It's like going down a rabbit hole, one video leads to the next! Nice work I'm finding new things every day.
@violet-trash
@violet-trash 3 года назад
Oh no. Buttons on my site have been using top:; this whole time. 😅 Can you do a video on general performance tips and best practices for CSS?
@PHEELL822
@PHEELL822 3 года назад
We need a series for learning how to use the performance tool!
@matejlaskomulej
@matejlaskomulej 2 года назад
This
@nitram_nosnibor
@nitram_nosnibor 3 года назад
Wow that's my geek-o-meter fill for the morning!! That was crazily interesting, I will be utilising the dev tools much more from now on - cheers Kevin!
@kiravolvo
@kiravolvo 3 года назад
hi kevin, gr8 tip. thank you. one thing though, you need to set the pseudo element that is positioned absolutely to either z-index:-1 or pointer-events to none, otherwise you can not click on the links in the box. :)
@ion-claudiutanase7850
@ion-claudiutanase7850 3 года назад
Totally agree on that. The link inside .pseudo-hover is unreachable...
@AmodeusR
@AmodeusR 2 года назад
I remember trying to animate buttons and shadows to make a hover effect and everything was slow as a turtle, and I didn't understand why xD Good to learn how I can surpass these problems, thanks as always, Kevin!
@KENAXION88
@KENAXION88 Год назад
ahhhhh this video is AMAZING. I didn't know I needed this at all.
@carolmckay5152
@carolmckay5152 3 года назад
Thankyou Tobias and Kevin, I needed this in my current project, so, WOW!
@dillanclark864
@dillanclark864 Год назад
I'm from South Africa and we currently have 'Loadshedding' (areas have their power turned off to cut back on power consumption because the power utility company is owned by the government and are a bunch of mizers) and I have just sat for 2 hour, in the dark, going through all your videos. The explanations are clear and you have some really great tips and tricks! Keep up the great work! Really enjoying this content!
@briancross4415
@briancross4415 3 года назад
I believe the performance is higher because the transform and opacity properties are GPU accelerated. Awesome tips Kevin!
@ajayrawat5603
@ajayrawat5603 2 года назад
thanks for showing how to measure the performance of these animations
@serveshchaturvedi2034
@serveshchaturvedi2034 2 года назад
What a video! Can't get enough of this. Absolutely gold info
@YurijVolkov
@YurijVolkov 2 года назад
That was really useful info for me! I didn't realize that most transition that I made was performance heavy even though I saw how laggy it is. Thanks!
@axMf3qTI
@axMf3qTI 3 года назад
I need that shirt!!
@KevinPowell
@KevinPowell 3 года назад
I got it from here moderngeek.co/ They have some great stuff!
@bobsfriend12
@bobsfriend12 3 года назад
Roses are red Violets are blue unexpected '}' on line 32
@DailyIntern
@DailyIntern 3 года назад
Me too😂
@matejlaskomulej
@matejlaskomulej 2 года назад
Dang it, the site no longer exists! Any other suggestions?
@EricPeelMusic
@EricPeelMusic 2 года назад
Added to my list of global things to do for my site. Will come back and watch again soon while implementing. Thanks, Kevin!
@franco-cespi
@franco-cespi 3 года назад
Awesome, as usual. This will come in handy for my next work. Just on time Kevin. Thanks!
@crawfordvining4208
@crawfordvining4208 3 года назад
great breakdown regarding animation performance in the dev tools! that will come in handy. thanks!
@FRONTRUS
@FRONTRUS 3 года назад
I'm the only one when I go to the video immediately put the like automatically?
@justice8703
@justice8703 Год назад
Sorry, but you're not the only one. I know someone who did too. He used to wonder the same. That someone is mush😊
@patrickc.6183
@patrickc.6183 3 года назад
Great video man! Nice use of the Chrome performance tools as well 😃!
@RussDnB
@RussDnB 3 года назад
One of the best tutors out there. Thank you Kevin :)
@kevinmc5249
@kevinmc5249 3 года назад
Thanks for the video, and bringing this info to our attention. Well done as always.
@RaskarKong
@RaskarKong 3 года назад
Very nice one thank you ! I've learned so much on CSS performances on that video
@acobster
@acobster 2 года назад
> a teenager, in the late 90s...waiting for images...to load-- I felt that.
@carinlynchin8255
@carinlynchin8255 Год назад
this is a great explanation... been a dev for years now and still didn't know how to use the performance tab LOL
@lawrenceardosa1730
@lawrenceardosa1730 3 года назад
I think you can replace top:0; left:0; right:0; bottom:0; with just inset:0; and it will still work the same.
@keharacek
@keharacek 3 года назад
Wow, this is a great approach! I tried this on my site and rendering/paint time went from about 50ms both to about 6ms and 2ms. Thanks!
@CodingAfterThirty
@CodingAfterThirty 3 года назад
Mind blown. I have been doing it all wrong. I often forget to use the performance tab so this was great reminder.
@robertotonino2916
@robertotonino2916 3 года назад
This is the type of content I really like, small performance tips which put together improve UX!
@francolamattina1803
@francolamattina1803 3 года назад
these tips are so powerful, ty!!
@podiac
@podiac 3 года назад
I really aopreciate your way of teaching. Thank you so much
@LanFeusT23
@LanFeusT23 3 года назад
Nice video! I ended up having to do something like that today and remembered about your video! Worked great, thanks!
@ukaszzbrozek6470
@ukaszzbrozek6470 3 года назад
Really great video!
@alvaroprietovideos
@alvaroprietovideos 2 года назад
This video was very useful for me, thanks for sharing
@luongkhai6435
@luongkhai6435 3 года назад
Wow. This is new aspect to learn about HTML and CSS
@ev721
@ev721 3 года назад
KP delivers once again!!!
@AlThePal78
@AlThePal78 2 года назад
Love your yeti mic : )
@ck0024
@ck0024 3 года назад
Awesome stuff
@tonyr.6637
@tonyr.6637 2 года назад
Love that shirt 🤓
@user-de6jb7pr1p
@user-de6jb7pr1p 3 года назад
Wow nice
@hcsftw
@hcsftw 3 года назад
I just tried a third option with drop-shadow. And box-shadow outperforms the filter too. I thought they were fast too 🤯
@jhimi7975
@jhimi7975 Год назад
I liked ur t-shirt btw.
@rathernotdisclose8064
@rathernotdisclose8064 3 года назад
shirt checks out lol
@cooroanima4519
@cooroanima4519 3 года назад
Hi. What coloured spot lights are you using for your background? It looks really good.
@rahul-thakare
@rahul-thakare 3 года назад
AWSM!.
@DaleDonnolly
@DaleDonnolly 11 месяцев назад
Hi Kevin, Thanks for this once-again very informative tutorial in CSS and the performance gains by using this method for implementing box shadows. I have applied this to a WooCommerce Product Archive Query loop which causes the 'Add to Cart' and 'Product link' links to become unaware or displaced. I presume it has something to do with the absolute positioning. Would you mind sharing some advice on how to counteract this behaviour please?
@sebaszwarc6028
@sebaszwarc6028 3 года назад
Nice t-shirt :)
@sarcasticdna
@sarcasticdna 3 года назад
Great video again! Can you make crash course on Styled components I like the way you teach 😄
@KevinPowell
@KevinPowell 3 года назад
I don't have very much experience with them :\
@sarcasticdna
@sarcasticdna 3 года назад
@@KevinPowell oh it is okay 😊.
@cannonblasters5957
@cannonblasters5957 3 года назад
You are a pro
@shreyastrivedi4134
@shreyastrivedi4134 Год назад
i have a question: the way you did hover for performance was best way i ever saw of... but. Q: the elements inside the box are now un-clickable like links and buttons, etc.. so is there a way to make it work with high performance way you showed but the links and all contents are clickable? can we do it with z-index?(i tried it but i might have done it wrong.. dosen't work for me) or is there some other way?
@majdazar5369
@majdazar5369 3 года назад
Okay. All fine and dandy. But what if you have some buttons/links inside the div? They get covered by the pseudo element.
@Marcieur
@Marcieur 3 года назад
Do you have any tips for the jittery text inside the boxes that have transform animated? Thanks for the tip on the box-shadows, just did the exact thing wrong the other day, so need to fix it asap!
@KevinPowell
@KevinPowell 3 года назад
I'm not sure if there is much we can do there sadly. Or if there is, I'd love to know!
@fazlerabbirana993
@fazlerabbirana993 3 года назад
@@KevinPowell I've been suffering from this problem for so long. Texts, icons... whatever I animate transform property on it gets blurry. It's horrible especially when creating infinite animation with keyframes. Any tips or a dedicated video regarding this problem will be very much helpful for someone like me.
@mrdeus1
@mrdeus1 3 года назад
When is it good to use will-change? Last I read on it was to not use it unless you've already run into performance issues. I've used it a bit, but perhaps a bit too often.
@ibrahimmanaf
@ibrahimmanaf 3 года назад
Hello KP, I tried the pseudo card and it is nice, but if there is a link on the card, is it clickable?
@MaximilianoBernasconi
@MaximilianoBernasconi 2 года назад
loved the img joke xD
@kshitijkarkera452
@kshitijkarkera452 Год назад
What if there is already a box-shadow of a container and on hover the box-shadow should turn inset, How can we do this by the technique shown by you??
@hristijantomovski8021
@hristijantomovski8021 3 года назад
Aren't both of the shadows showing on top of each other on hover? The one that's there always, and the hidden pseudo one you give the opacity 1 on hover. Or maybe I'm missing something... By the way, love all of your content, keep going :)
@siddhant_445
@siddhant_445 3 года назад
❤️
@bikramjeetsingh4943
@bikramjeetsingh4943 3 года назад
hey kevin, can we do it for background setting the opacity from 0 to 1 by rgba
@yashptel
@yashptel 3 года назад
Hi, I am trying to make en extension that zooms to fill videos on most sites. I am using transform scale for zooming the videos for sites like RU-vid, Netflix, etc. It lags for a higher quality video on my laptop. Is there a better way to animate scaling on a video?
@semen083
@semen083 3 года назад
Does it degrade the time to interactive cause of more complex html-dom and more numerous of html-elements(1 element+1 "after" pseudo element)?
@pkgacek
@pkgacek 3 года назад
Kevin, i love your videos. Please consider moving mic somewhere else - it looks like you have a black eye (due to its Shadow on your face)
@KevinPowell
@KevinPowell 3 года назад
yeah I know, it'll be fixed next time, lol
@cool_scatter
@cool_scatter 3 года назад
Great video, but you need to put pointer-events:none; on the pseudo-element, or else you can't click on anything in the second div since it's covered by the pseudo-element.
@maxovicsteiner9646
@maxovicsteiner9646 2 года назад
or set the z-index low
@brian554xx
@brian554xx 2 года назад
5:47 happily:hover::after
@sjn_
@sjn_ 3 года назад
Lol epic t shirt
@fazlerabbirana993
@fazlerabbirana993 3 года назад
Hi Kevin, this video is awesome. But there is a problem that I've been facing for so long and still can't find a proper solution. The problem is: The box contents (texts) are getting blurry while transforming. Is there any solution for this? Please help.
@KevinPowell
@KevinPowell 3 года назад
Yeah, it's an issue. Often depends on the transform. If there is a solution I don't know what it is
@fazlerabbirana993
@fazlerabbirana993 3 года назад
@@KevinPowell Oops...didn't see that coming. I hope you will try and be able to figure that out. BTW thanks for your quick response.
@kingrando
@kingrando 2 года назад
Came for animation, got transform 😛
@biertuose
@biertuose Год назад
Just wondered why you using top, right, left, bottom zero :D Then i saw this is 2 years old. Now you would use inset: 0; instead.
@ivan4486
@ivan4486 4 месяца назад
The problem is that the pseudo element covers the original card making it unclicable.
@Ostap1974
@Ostap1974 3 года назад
These tricks are very good to know. But to be honest, I don't understand the real reson why transform should actually outperform the top. There is no more algorithmical complexity, if anything, changing top should be simpler to implement efficiently (by browser).
@KevinPowell
@KevinPowell 3 года назад
Opacity and transforms are GPU accelerated, and also cause few repaints. Most other things shouldn't be animated if possible.
@thecscontent5110
@thecscontent5110 3 года назад
I also do videos about programming!😁
@Unknown-yt7zu
@Unknown-yt7zu 3 года назад
For fast animations: animate shadow opacity instead of animating shadow size. It's realy annoying to watch all 14 mins for such a small info...
Далее
#kikakim
00:11
Просмотров 1,8 млн
Super gymnastics 😍🫣
00:15
Просмотров 33 млн
Fun outline animations!
15:24
Просмотров 84 тыс.
CSS em and rem explained #CSS #responsive
16:54
Просмотров 377 тыс.
Amazing 3D CSS creations from my community
1:09:06
Просмотров 78 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн
A Fancy Box Shadow Trick Saved Me In This CSS Battle
42:00
#kikakim
00:11
Просмотров 1,8 млн