Border Animation CSS | Quick Animation

Рет қаралды 47,198

Күн бұрын

Create a Border Animation CSS | Quick Animation, step-by-step from scratch.
______________________________________________________________
🌟 Source Code: devmadeeasy.gumroad.com/l/bor...
______________________________________________________________
🌟 Source Code: devmadeeasy.gumroad.com/l/bor...
🌱💜Support our channel from as little as $1-3 by becoming a Patreon because by doing that, you will help our Channel and also you will have access to 🖥️ Source Code of our videos!
➤ bit.ly/3sthx5B
______________________________________________________________
⏱️Chapters:
00:00:00 | Intro Border Animation CSS
00:00:28 | Boilerplate & Markup
00:01:06 | CSS - Fonts & CSS Reset
00:02:19 | CSS - Body | Putting the Content in the Middle of the Page
00:03:14 | CSS - box | giving it a size and positioning it
00:03:57 | CSS- h2 Sizing and Color
00:05:02 | CSS - Create Pseudo-class Before
00:06:19 | CSS - Animation Keyframes
00:07:33 | CSS - boxAfter
______________________________________________________________
📚Resources
Markup | Pics used in this Project: bit.ly/3cp2S5W
______________________________________________________________
🏆Recommended Videos🏆
🎬Login & Registration Form Using HTML & CSS & JS✨
➤ • Login & Registration F...
🎬Neumorphism Login Form | HTML & CSS✨
➤ • 🎬Neumorphism Login For...
🎬CSS Text Typing Animation | HTML & CSS✨
➤ • CSS Text Typing Animat...
🎬Top 10 CSS & JavaScript Projects✨
➤ • 🎬Top 10 CSS & JavaScri...
🎬Build a Step Progress Bar | JavaScript✨
➤ • Build a Step Progress ...
______________________________________________________________
🛴 Follow me on:
👉Facebook: bit.ly/3cp2S5W
______________________________________________________________
🎵Background Music for Videos:
bensound.com
uppbeat.io/t/hartzmann/no-tim...
License code: QYJLBIQRS1691ECL
uppbeat.io/t/prigida/cozy
License code: GVSCFQSDNPRJN6QG
______________________________________________________________

Пікірлер: 49

@DevMadeEasy 2 ай бұрын

🌟 Source Code: devmadeeasy.gumroad.com/l/border_animation

@agent4525 Жыл бұрын

I couldn't understand this rotating border for quite a while now. You explained it so well now i understand it. Thanks a lot.

@DevMadeEasy Жыл бұрын

Great to hear!

@rotes3106 Жыл бұрын

Haha this is amazing dear! That was so heloful and clear! Thanks!

@DevMadeEasy Жыл бұрын

Glad it was helpful!

@kofi.rubies 5 ай бұрын

I like the way you explain every code and how you take your time when doing things I've not really watched most of your videos but from what I've watched on your channel, I can say you are good Big Ups bro😎💯👊

@DevMadeEasy 5 ай бұрын

I appreciate that!

@rajdeepmovies7215 Жыл бұрын

thankss🙂🙂🙂

@simonnganga1740 5 ай бұрын

This is awesome. I request you do a long video since you are demystifying the concept very well and with ease

@DevMadeEasy 5 ай бұрын

Thanks, will do!

@thedarkbountyhunter7592 5 ай бұрын

This one was so easy and understandable. 🎉🎉🎉

@DevMadeEasy 5 ай бұрын

I am glad you liked my friend. Happy Coding!

@WaliaIbex 10 ай бұрын

You are the best . New subscriber

@DevMadeEasy 10 ай бұрын

Thanks and welcome

@user-vl1li8lj5u 6 ай бұрын

It's good. Thanks 😊

@DevMadeEasy 6 ай бұрын

I'm glad you like it

@muitocompouco3396 2 жыл бұрын

Hello, I'm from Brazil, I'm starting in the development area. this content was amazing, I already signed up to follow more classes!

@DevMadeEasy 2 жыл бұрын

Welcome aboard! And Happy Coding my Friend!

@akabestbrazilianbishop 10 ай бұрын

I'm from Brazil too and I agree. What a amazing content. Greetings!

@silentstar2760 5 ай бұрын

Suck cool animation! Thank you 🙏!

@MahfuzAhmed-75 Жыл бұрын

🎉you are the best👀😃

@DevMadeEasy Жыл бұрын

👋Hey there, Web Warrior! Thank you so much for the kind words and support! 🙌🎉 It means a lot to me and I'm glad that I can help you on your web dev journey. Happy Coding my friend! 😃💻👍

@roshinif 9 ай бұрын

Ohh my god.. the fps rate of the vid is super

@Trazynn 2 жыл бұрын

This is neat and very creative, but surely there's a cleaner way of tracing a gradient across a path? A more complex edge would look weird using this trick.

@DevMadeEasy 2 жыл бұрын

Hey Trazyn Yes, CSS is a powerful tool and this is just one of the many ways to get this result. You can do it another way and share it with us on Codepen, for example. It's this curiosity, this desire to do things differently that makes us web developers! Happy Coding my friend.

@RafaelSouza-bq6yy 2 жыл бұрын

pika to fly, das galaxias, meu patrão!

@DevMadeEasy 2 жыл бұрын

Opa Rafael, fico feliz que tenha gostado. Happy Coding!

@kakoozaxenyondo00 6 ай бұрын

Thank you so much. My pc is a 11th gen machine, it can't execute previous syntax of code. It needs latest versions of programming language syntax. Your syntax has worked on my pc. I appreciate your video.

@DevMadeEasy 6 ай бұрын

I am glad you liked it. Happy Coding my friend.

@LePhenixGD 2 жыл бұрын

Thank you mate! Though I'm curious to know, what does the "inset" property work? I personally never used that property in CSS

@DevMadeEasy 2 жыл бұрын

Thanks for watching, I'm glad it helped. I believe I will do a short teaching just this property soon. Thanks for the feedback and Happy Coding my friend!

@syediqbalahmed3176 2 жыл бұрын

*_good ... ocay ..._*

@DevMadeEasy 2 жыл бұрын

Hello Syed, I'm glad you liked it!

@ficus8741 7 ай бұрын

Hello, i want to send this animation to back of all my content. How can i do ?

@user-gu5vd2fo9o 7 күн бұрын

Hi, great video, is it possible to have a solid border, only animate on hover? Thank you

@DevMadeEasy 4 күн бұрын

Yes, absolutely

@batataleal 9 ай бұрын

Are you Silvio Santos teaching CSS ? If not your voice is the same.

@tyagigaming9784 5 ай бұрын

who is your code editor ?

@DevMadeEasy 5 ай бұрын

In this project specifically I used 'Brackets'. Happy Coding my Friend!

@prmersal6450 4 ай бұрын

I want to add image at centre make it circle how

@DevMadeEasy 4 ай бұрын

You can use any content you want... Happy Coding my friend!

@Nextronlab 23 күн бұрын

How do I add image on the button and make the image rotating once it's clicked @@DevMadeEasy

@muthurams4809 Жыл бұрын

Sir provide the video for how to make responsive web site.... And how to use bootstrap in web site

@hemantsharma-xf3ub Ай бұрын

source code is not getting in link

@DevMadeEasy Ай бұрын

Fixed, thanks for your feedback!

@umapessoaaleatoria9119 Ай бұрын

tu é br né mano?

@DevMadeEasy Ай бұрын

Eu sou Português, vivo em Portugal!🇵🇹

@lexgim 2 ай бұрын

this is so cool man, but i dont understand what is content: ''; i see it in every video but idk what it means

@DevMadeEasy Ай бұрын

Hello dev! Pseudo-elements: content is a property commonly used with ::before and ::after pseudo-elements to insert content before or after the element’s actual content. Empty content: '' '' means an empty string will be inserted. Happy Coding!