Stop animating box-shadows the wrong way!
ฝัง
- เผยแพร่เมื่อ 22 ก.ค. 2024
- 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 TH-cam 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!
![THE TOYS x NONT TANONT - ดอกไม้ที่รอฝน (spring) [Official MV]](http://i.ytimg.com/vi/pPa1d5cC8M4/mqdefault.jpg)
This is my third month being a self-taught student and this channel is gold, your videos help me immensely. Thanks for the content!
*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.
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?
It's like going down a rabbit hole, one video leads to the next! Nice work I'm finding new things every day.
We need a series for learning how to use the performance tool!
This
Thankyou Tobias and Kevin, I needed this in my current project, so, WOW!
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!
What a video! Can't get enough of this. Absolutely gold info
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. :)
Totally agree on that. The link inside .pseudo-hover is unreachable...
Awesome, as usual. This will come in handy for my next work. Just on time Kevin. Thanks!
ahhhhh this video is AMAZING. I didn't know I needed this at all.
Added to my list of global things to do for my site. Will come back and watch again soon while implementing. Thanks, Kevin!
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!
great breakdown regarding animation performance in the dev tools! that will come in handy. thanks!
Thanks for the video, and bringing this info to our attention. Well done as always.
One of the best tutors out there. Thank you Kevin :)
Great video man! Nice use of the Chrome performance tools as well 😃!
Very nice one thank you ! I've learned so much on CSS performances on that video
This is the type of content I really like, small performance tips which put together improve UX!
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!
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!
I believe the performance is higher because the transform and opacity properties are GPU accelerated. Awesome tips Kevin!
thanks for showing how to measure the performance of these animations
these tips are so powerful, ty!!
Nice video! I ended up having to do something like that today and remembered about your video! Worked great, thanks!
I'm the only one when I go to the video immediately put the like automatically?
Sorry, but you're not the only one. I know someone who did too. He used to wonder the same.
That someone is mush😊
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!
I really aopreciate your way of teaching. Thank you so much
This video was very useful for me, thanks for sharing
Really great video!
Mind blown. I have been doing it all wrong. I often forget to use the performance tab so this was great reminder.
KP delivers once again!!!
I need that shirt!!
I got it from here moderngeek.co/
They have some great stuff!
Roses are red
Violets are blue
unexpected '}' on line 32
Me too😂
Dang it, the site no longer exists! Any other suggestions?
Wow. This is new aspect to learn about HTML and CSS
this is a great explanation... been a dev for years now and still didn't know how to use the performance tab LOL
Love your yeti mic : )
> a teenager, in the late 90s...waiting for images...to load--
I felt that.
Love that shirt 🤓
Awesome stuff
I just tried a third option with drop-shadow. And box-shadow outperforms the filter too. I thought they were fast too 🤯
I liked ur t-shirt btw.
AWSM!.
Wow nice
shirt checks out lol
Nice t-shirt :)
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?
Great video again! Can you make crash course on Styled components I like the way you teach 😄
I don't have very much experience with them :\
@@KevinPowell oh it is okay 😊.
Hi. What coloured spot lights are you using for your background? It looks really good.
hey kevin, can we do it for background setting the opacity from 0 to 1 by rgba
You are a pro
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 TH-cam, Netflix, etc. It lags for a higher quality video on my laptop. Is there a better way to animate scaling on a video?
I think you can replace top:0; left:0; right:0; bottom:0; with just inset:0; and it will still work the same.
loved the img joke xD
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.
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!
I'm not sure if there is much we can do there sadly. Or if there is, I'd love to know!
@@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.
❤️
Okay. All fine and dandy. But what if you have some buttons/links inside the div? They get covered by the pseudo element.
Hello KP, I tried the pseudo card and it is nice, but if there is a link on the card, is it clickable?
Lol epic t shirt
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)?
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??
Came for animation, got transform 😛
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?
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)
yeah I know, it'll be fixed next time, lol
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.
or set the z-index low
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.
Yeah, it's an issue. Often depends on the transform. If there is a solution I don't know what it is
@@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.
5:47 happily:hover::after
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 :)
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.
The problem is that the pseudo element covers the original card making it unclicable.
I also do videos about programming!😁
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).
Opacity and transforms are GPU accelerated, and also cause few repaints. Most other things shouldn't be animated if possible.
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...