Тёмный

Border Animation CSS | Quick Animation 

Web Dev Made Easy
Подписаться 16 тыс.
Просмотров 45 тыс.
50% 1

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
______________________________________________________________

Хобби

Опубликовано:

 

16 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 46   
@DevMadeEasy
@DevMadeEasy Месяц назад
🌟 Source Code: devmadeeasy.gumroad.com/l/border_animation
@agent4525
@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
@DevMadeEasy Год назад
Great to hear!
@rotes3106
@rotes3106 11 месяцев назад
Haha this is amazing dear! That was so heloful and clear! Thanks!
@DevMadeEasy
@DevMadeEasy 11 месяцев назад
Glad it was helpful!
@kofi.rubies
@kofi.rubies 4 месяца назад
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
@DevMadeEasy 4 месяца назад
I appreciate that!
@thedarkbountyhunter7592
@thedarkbountyhunter7592 4 месяца назад
This one was so easy and understandable. 🎉🎉🎉
@DevMadeEasy
@DevMadeEasy 4 месяца назад
I am glad you liked my friend. Happy Coding!
@muitocompouco3396
@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
@DevMadeEasy 2 года назад
Welcome aboard! And Happy Coding my Friend!
@samuelwesley1598
@samuelwesley1598 9 месяцев назад
I'm from Brazil too and I agree. What a amazing content. Greetings!
@simonnganga1740
@simonnganga1740 4 месяца назад
This is awesome. I request you do a long video since you are demystifying the concept very well and with ease
@DevMadeEasy
@DevMadeEasy 4 месяца назад
Thanks, will do!
@user-vl1li8lj5u
@user-vl1li8lj5u 5 месяцев назад
It's good. Thanks 😊
@DevMadeEasy
@DevMadeEasy 5 месяцев назад
I'm glad you like it
@WaliaIbex
@WaliaIbex 9 месяцев назад
You are the best . New subscriber
@DevMadeEasy
@DevMadeEasy 9 месяцев назад
Thanks and welcome
@MahfuzAhmed-75
@MahfuzAhmed-75 Год назад
🎉you are the best👀😃
@DevMadeEasy
@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! 😃💻👍
@silentstar2760
@silentstar2760 4 месяца назад
Suck cool animation! Thank you 🙏!
@rajdeepmovies7215
@rajdeepmovies7215 Год назад
thankss🙂🙂🙂
@roshinif
@roshinif 8 месяцев назад
Ohh my god.. the fps rate of the vid is super
@RafaelSouza-bq6yy
@RafaelSouza-bq6yy 2 года назад
pika to fly, das galaxias, meu patrão!
@DevMadeEasy
@DevMadeEasy 2 года назад
Opa Rafael, fico feliz que tenha gostado. Happy Coding!
@Trazynn
@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
@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.
@kakoozaxenyondo00
@kakoozaxenyondo00 5 месяцев назад
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
@DevMadeEasy 5 месяцев назад
I am glad you liked it. Happy Coding my friend.
@LePhenixGD
@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
@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
@syediqbalahmed3176 2 года назад
*_good ... ocay ..._*
@DevMadeEasy
@DevMadeEasy 2 года назад
Hello Syed, I'm glad you liked it!
@ficus8741
@ficus8741 6 месяцев назад
Hello, i want to send this animation to back of all my content. How can i do ?
@batataleal
@batataleal 8 месяцев назад
Are you Silvio Santos teaching CSS ? If not your voice is the same.
@tyagigaming9784
@tyagigaming9784 4 месяца назад
who is your code editor ?
@DevMadeEasy
@DevMadeEasy 4 месяца назад
In this project specifically I used 'Brackets'. Happy Coding my Friend!
@prmersal6450
@prmersal6450 3 месяца назад
I want to add image at centre make it circle how
@DevMadeEasy
@DevMadeEasy 3 месяца назад
You can use any content you want... Happy Coding my friend!
@muthurams4809
@muthurams4809 Год назад
Sir provide the video for how to make responsive web site.... And how to use bootstrap in web site
@hemantsharma-xf3ub
@hemantsharma-xf3ub 26 дней назад
source code is not getting in link
@DevMadeEasy
@DevMadeEasy 26 дней назад
Fixed, thanks for your feedback!
@lexgim
@lexgim Месяц назад
this is so cool man, but i dont understand what is content: ''; i see it in every video but idk what it means
@DevMadeEasy
@DevMadeEasy 27 дней назад
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!
@umapessoaaleatoria9119
@umapessoaaleatoria9119 27 дней назад
tu é br né mano?
@DevMadeEasy
@DevMadeEasy 26 дней назад
Eu sou Português, vivo em Portugal!🇵🇹
Далее
CSS Text Typing Animation | HTML & CSS
13:38
Просмотров 42 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 905 тыс.
АНДЖИЛИША в платье 😍
00:27
Просмотров 629 тыс.
Opa-singillar kelganda😂😂😂
00:47
Просмотров 412 тыс.
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн
10 CSS animation tips and tricks
20:13
Просмотров 167 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
Use these instead of vh
6:06
Просмотров 469 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 55 тыс.
Every CSS Animation property
9:26
Просмотров 55 тыс.
CSS Tips And Tricks I Wish I Knew Before
12:12
Просмотров 432 тыс.
Когда папа ВОЛШЕБНИК!🤩
1:00
Просмотров 6 млн
might be my last day babysitting…
0:23
Просмотров 11 млн
Самые вкусные помидоры
0:33
Просмотров 1,8 млн