Great video one of the best explanations by far for the concept i was able to implement it flawlessly after understanding the concept and a little bit of chat gpt's help :P Looking forward to learn more tailwind css tricks like this thank you. So i actually implemented in one of my passion project it looks absolutely stunning however there was some issues I ran into which were as followed 1. for some reason calc() function decided not to work now that might be happening cause it is being overridden trough other height and width modifires 2. when you are trying to achive this in glassmorphic design it does not quite work well as the pseudo element is visible through other elements to counter the 1st issue i opted in using padding as we want 2px,3px or whatever size around the container which worked out fine for the 2nd part I am yet to figure out how to do it. if any one find it out please reply back on the comment
9 месяцев назад+1
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 🤔
@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?
I learnt a lot, thank you! Truly mind blowing.
Great !Thanks !
Thanks bro, it really helps me
I found a problem, when the card is a rectangle instead of a square, it doesnt work as intended. Can you make another video on this on how to fix etc?
This is super nice
thx bro, amazing content
wow great creation :)
Amazing tutorial
Nice! ❤
The Auth Kit website has a very beautiful design. What is this design method and style called?
Amazing
Nice tutorial. Thank you. Would be nice if you could do the same on a shadCN button!
very cool 😀
Cool!!
hi Ariel, i love your udemy courses, hence do you thinking to create a complete animation course for tailwind?
Great video one of the best explanations by far for the concept i was able to implement it flawlessly after understanding the concept and a little bit of chat gpt's help :P Looking forward to learn more tailwind css tricks like this thank you.
So i actually implemented in one of my passion project it looks absolutely stunning however there was some issues I ran into which were as followed
1. for some reason calc() function decided not to work now that might be happening cause it is being overridden trough other height and width modifires
2. when you are trying to achive this in glassmorphic design it does not quite work well as the pseudo element is visible through other elements
to counter the 1st issue i opted in using padding as we want 2px,3px or whatever size around the container which worked out fine
for the 2nd part I am yet to figure out how to do it. if any one find it out please reply back on the comment
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 🤔
Of course, but you can do à clip mask with border radius.
Wow! - a really great tutorial on how to create an animated border-gradient with TailwindCSS!. Thanks, Ariel.
{2024-04-21}
This wont work when they cards have dynamic width or height, instead the gradient should be bg for card-wrapper without ::before
liked it and would like to see more.
I like the explanation, but the audio was kinda low for me.
Maybe add mouse interaction next ?
@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?
@@codinglyio FUCKING SCUM. I KNOW WHERE U RESIDE
Yeah, it's mindblowing to use tailwind to do something as basic as this.
Hahahaha, a bro troll -)
But yes, true :p
tailwind is especially good for basic things
Can the height of the card-wrapper be dynamic (auto)?
That was cool
Keep it up bro did you have discord
I'll set it up!
@@codinglyio YEH SHARE... AND I WILL EXPOSE U, U ZIONIST DIRTY SCUM