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