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?
6 месяцев назад+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 🤔
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
@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.
Nice! ❤
liked it and would like to see more.
Wow! - a really great tutorial on how to create an animated border-gradient with TailwindCSS!. Thanks, Ariel.
{2024-04-21}
Cool!!
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?
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.
Yeah, it's mindblowing to use tailwind to do something as basic as this.
Hahahaha, a bro troll -)
But yes, true :p
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
Thanks bro, it really helps me
This is super nice
Amazing
Amazing tutorial
Nice tutorial. Thank you. Would be nice if you could do the same on a shadCN button!
thx bro, amazing content
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?
wow great creation :)
Can the height of the card-wrapper be dynamic (auto)?
very cool 😀
hi Ariel, i love your udemy courses, hence do you thinking to create a complete animation course for tailwind?
That was cool
Keep it up bro did you have discord
I'll set it up!