Create a pulsing animation with CSS
ฝัง
- เผยแพร่เมื่อ 8 ก.ย. 2024
- CSS is so much fun! In this video I look at how to add a pulsing animation on hover to a card component that I'm building out. At the start I do it at 5x the size so we can really see what's happening, before later integrating it into the popdog card that I'm trying to clone.
I hope you enjoy this one!
Creating the card: • Animated card with HTM...
Setting up the Font Awesome Icons: • Setting up Font Awesom...
The Code: github.com/kev...
#css #popdogclone
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowel...
---
Help support my channel
👨🎓 Take a course: www.kevinpowel...
👕 Buy a shirt: teespring.com/...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstu...
---
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/kev...
Github: github.com/kev...
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
When you made opacity 0 on 100% I was like holy shit! This is so simple and so elegant at the same time. I love all of this. I haven't even finished the video yet.
haha, awesome, glad you're enjoying it
I love this, God Bless You for everything.
Like the fact that you are so good with core css that you don't need to debug(inspect element) to fix random issues. Always learn something or the other from your videos. Keep up the good work.
That's still what I do when I'm stuck, but I give myself a few seconds to see if I can figure it out first :)
I yes, I stole that for a micro-page I am working on. Thank you Sir, so much for your ideas, and for also little skills when it comes to responsive CSS. All combined "make my life easier".
My new favorite channel, I'm a full stack developer and my weakest side is certainly CSS, design, styling , hell even how to think about everything. Need more channels with this type of focus ^_^ thanks so much!
Hi Kevin. I wanted to mention how I think your videos are professional, intuitive and genuine. I'm not even a developer myself. I have an understanding of web development through many online videos or books that I view away from my completely unrelated field of work. I don't watch every video of yours but the ones I do when I have time made me want to offer support and encouragement towards your efforts in what you do! Keep up the good work!
You’ve helped me understand just how much you can do with CSS. Thank you very much for all your content!
Watching you code makes me happy🤩
Watching this magic on the couch is like meditation 👍😀
Thank you! Your tutorial helped me to make an oval shadow growing and back, just changing a dew things! THANKS A LOT! :D
I have signed up for Scrimba but instead I have found myself spending all my time here. I need to get back to Scrimba and show off what I have learnt here! Great tutorial!
for some reason I thought this was going to be hard to make lol, but it's so simple! I think sometime we overthink ways to code stuff that in the end the simplest way is the best and easiest!
after watching the other videos with sass, this was confusing. so many icon classes...
still freaking amazing and so happy that the github repo had with sass, so I could make it look pretty agian.
Thank you for your videos, Kevin! They made me regain my motivation and I actually started designing again. I forgot how much I enjoyed it. You are awesome!
Like others have said, I'm really enjoying the popdog series too. Great video! Thanks Kevin
I've been following along these great videos with SCSS. Managed to fix that shivering hover state when you approach the card from the bottom side. I'm just gonna wait for the fourth part and make a PR on GH.
Looked so easy but wasn't. So good. Thanks, Kevin.
I'm loving this videos about the popdog component, great and fun way to explore new ideas! keep them coming please!
Dude, you’re a CSS beast!!!
I've been following your channel for quite a while now, and I have learned a lot from your videos. Thank you!
Thanks very much for everything you did for us, I have a suggestion if you please, if videos are shorter than it is now I think it would be great, thanks again
Nice. I didn't realize that specificity was increased if there were more classes targeted in the rule.
Kevin the best :) . Learning amazing things
THANK YOU SO MUCH !
Careful with that bombay sapphire! Can be dangerously drinkable stuff! Love your videos man often learn something new so thanks for putting in the time and effort to make these.
Haha, that's my wife's. I can't stand gin personally. More of a beer guy, though I won't say no to a good scotch 😊 🍻
@@KevinPowell Good choice lol. I love tequila infused beer, and good English cider (Im from the UK) but one xmas my friend got his mixing skills a bit backward and I had near half a pint of gin with a couple shots of mixer! Spent the next 4 hours making snow angels in every front yard in our village haha.
pulse effect we can make with box-shadow also is more simple
thanks for nice content
What is this sorcery! woah
Amazing content as usual, thanks a lot!
Hello Kevin. I'm a backend developer focused primarily on using typescript on node.js, so I'm no front end developer. Right now I'm starting to learn some front-end using Angular. Nevertheless designing has always been difficult for me. The colors, shapes, sizes, all that stuff has never been my strong point.
Do you believe this is something you're born with? That is the ability to discern colors and select the right shape for every case
As an example, you have a perfect eye for shapes, sizes, and color, like OMG! I wish I could do the same.
Anyways, Although I'm not a front-end developer (yet, hopefully) I've been subscribed to you for a long time now, and i LOVE what you do. It's such a nice work, you inspire me to keep learning.
Thanks for your hard work. Please keep it up :) Greetings from Latin America
PD: I have a basic knowledge of CSS, but it's just basic. Do you recommend me to stick to CSS or rather learn something like SASS? ty
Design is a learned skill just as much as anything else. Some people might have a natural tendency toward it, but you can 100% learn to be a good designer.
Personally I love Sass, but a good foundation in CSS is a good starting point 😊. Sass adds loops and functions to CSS though, so it's super handy.
@@KevinPowell Thanks!!! That is very helpful ;)
Wow ,actually css is fun
Great Sir
Brilliant. Love the content.
Should use transparency on videoplay icon
I love everything that you do. You are an inspiration to us all. What screen casting software do you use?
OBS 😊
Who else first hits like button before watching his new videos
Much better than the purple
Really? I find I look orange and blend into the background, lol. I'll be playing with it more :)
@@KevinPowell i read an article long ago and it said that warm tones complement skin tones, the optimal shade may differ for different skin tones but they're definitely better than pure red/green/blue. I didn't believe it back then but that orange background really made me remember and believe it. You could make a dark background work if you get some neon art back there. The idea of an endless void behind you is sub-consciously distracting, maybe👀
Hi Kevin! I am having some problems when you changed the position of the image container as "Relative". My "text-align : center doesn't work after that and 2 things happen-
1. The round image goes to the left instead of the center.
2. The red-colored background that we are using for the pseudo element for .icon becomes a big ellipse and fills up the whole width of the window.
I am not sure how to solve this and have been brainstorming ideas for a few hours now.
Would really appreciate some help. But otherwise, I love your videos and they inspire me to code everytime I watch them,
Hi kewin , can you suggest tips for designing a website for beginner.Whenever I start designing, I felt empty
Try to find some inspiration through other sites first. Not to copy, but to give you a direction to start working in.
@@KevinPowell thank you 💓
Interesting... I imagined you were going to do this with either shadows or borders.
Animating shadows can really quickly lead to some janky animations. Would probably look decent, bit I'd be worried about performance.
Dude want to play with this and sync it up to music
Great series! Since a lot of this is done on mouseover action, what is the UX on this animation stuff for people on mobile?
Haven't even really considered it to be honest. Mobile wouldn't have any animations in this case, they'd click on the card and be brought directly to the page for that game, where the streams are set up in order of popularity anyway. At least that's how it's set up on their actual site :)
sir, please start series on tailwindcss
Hi,sir i have one problem can u solve me.
When iam started to doing project.My mind like blank,no idea will come in my mind about design.like how look my website,content etc how resolve my mind..?
Can we use animation with flexbox ? I just want animation when switching flex-direction from column to column-reverse and vice versa.
I am quite dissapointed: one of the things that made me suffer the most is trying to manage images within pages but, if I understood you well, you choose to work with one photo instead of another because of the size of it.
Does that mean we have to force images sizes and resolutions?
i cant find the answer in google . The drop shadow is working to font awesome icon..
but i want to be a drop shadow inset.. can you make this KingofCSS ?
Me,an Intellectual: Uses Tailwind class ping
Have any begginers css animation tutourials?
The play icon not showing up in codepen?
anyone found this bit confusing? since apparently user icon also have the class of .icon
Sorry about that. I fixed the scope on github, nesting everything I did here as .streamer .icon { ... } so that it leaves the intial one alone. I probably should have named it all a little better looking back at it. Maybe I'll do a refactor of it live one day to clean things up.
How would you go about this with ie11?
can you do a seperate video on replaced elements I'm really interested to know how they work and Thanks
I'll add it to my todo. Bascially it just means it's taking the tag you have, and switching it for content from one of it's attributes. So, an image is "replaced" by the image itself. An is "replaced" by the site that's in the .
@@KevinPowell Thanks you are a legend
Dude looks like Jerry from Rick and Morty
He should apply comma while talking.
create a functioning rubric cube using html css and JavaScript plzzzzzZzz......
Could be a fun project, but if I do it, it might be a loooong way away, lol. I'd have to figure it out first.
@@KevinPowell do it plzzz😍
Here..
Hi Kevin, just wonder if you have checked out this: twitter.com/MengTo/status/1296425988746817536
Not exactly the most user-friendly UI, but definitely look good. Perhaps in-depth perspective transform and blend mode for your next topics some times in the future?
First Here can I get a prize :)
👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻
Amazing video from Kelvin Sir❤️
I like this video........
👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻
Cringe