TailwindCSS Animated Border Gradient (MIND BLOWING!)

Подписаться 1,7 тыс.

Просмотров 7 тыс.

50% 1

Let's create an animated gradient border with Tailwind. It's absolutely stunning, and the technique is super interesting!
📚 Source Code:
play.tailwindcss.com/HGOa6lIqf6
🔗 Socials:
X - x.com/arielweinberger
LinkedIn - / arielweinberger
Timestamps:
00:00 Animated Gradient Border Effect
00:55 Demonstration
01:38 Coding The Effect
08:28 Adjustments/Customization
09:10 Outro
🎶 Credits
Music by: www.bensound.com/free-music-f...
License code: MIQTBMPCVR3OVLX0

Наука

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

20 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 23

@Agent-zn2gl 7 дней назад

This is super nice

@Pareshbpatel Месяц назад

Wow! - a really great tutorial on how to create an animated border-gradient with TailwindCSS!. Thanks, Ariel. {2024-04-21}

@reubenblamey11 2 месяца назад

I learnt a lot, thank you! Truly mind blowing.

@voldemortvi4264 18 дней назад

Amazing tutorial

@fernandoli6743 18 дней назад

thx bro, amazing content

@jfhandfield 18 дней назад

Nice tutorial. Thank you. Would be nice if you could do the same on a shadCN button!

@manoshandom4525 20 дней назад

wow great creation :)

@raiyansarker 2 месяца назад

liked it and would like to see more.

@2ru2pacFan 2 месяца назад

Nice! ❤

@iamparmjeetmishra 18 дней назад

Amazing

@ubfinn 2 месяца назад

Cool!!

@sakarsr 24 дня назад

very cool 😀

19 дней назад

I would be interested in seeing if we can use a clipping mask to achieve the same with a transparent background or backdrop-filter on the content element 🤔

@nkdeus 19 дней назад

Of course, but you can do à clip mask with border radius.

@SpeedCodes-oc7ed 19 дней назад

hi Ariel, i love your udemy courses, hence do you thinking to create a complete animation course for tailwind?

@user-hb6yb6bu8n Месяц назад

Can the height of the card-wrapper be dynamic (auto)?

@CristianKirk 19 дней назад

Yeah, it's mindblowing to use tailwind to do something as basic as this.

@nkdeus 19 дней назад

Hahahaha, a bro troll -) But yes, true :p

@bumpyy 2 месяца назад

I like the explanation, but the audio was kinda low for me. Maybe add mouse interaction next ?

@codinglyio 2 месяца назад

@bumpyy Fixed that in upcoming videos! It was my first video on the channel, took a while to to get the audio sorted. When you say mouse interaction, do you mean like in AuthKit.com, where you move your mouse and the container moves as well?