An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
January 24, 2022 04:04 am GMT
Original Link: https://dev.to/rolandixor/css-funstuff-animated-halfway-borders-24fp
CSS Funstuff: Animated Halfway Borders
Hi! Been a minute, but I'm back with another CSS tutorial!
This one will be pretty quick, but should give you a great launch point for extrapolating and creating something special.
Now you probably know that you can add borders to specific sides of an element, using, for instance:
.border-top { border-top: 1px solid white;}
Result:
But what you may not realize, is what happens when you add a very simple additional property: border-radius! Now, maybe this sounds super obvious, but just how cool it is, isn't obvious until you see it in action, so let's do that:
.border-top-round { border-radius: 50%; border-top: 1px solid white;}
Result:
Cool, isn't it? No?
Well let's make it so!
Animating it all:
If the first bit wasn't all that impressive, maybe adding a little fun and flare should do the trick.
Check it out!
So what's the code for this one? Grab it here (it's free!):
Original Link: https://dev.to/rolandixor/css-funstuff-animated-halfway-borders-24fp
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To