TailwindCSS Animated Border Gradient (MIND BLOWING!)

Поделиться
HTML-код
  • Опубликовано: 22 дек 2024

Комментарии • 32

  • @reubenblamey11
    @reubenblamey11 9 месяцев назад +1

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

  • @jte_gaming841
    @jte_gaming841 6 месяцев назад +1

    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?

  • @aliakbarmohajeruni3628
    @aliakbarmohajeruni3628 Месяц назад

    The Auth Kit website has a very beautiful design. What is this design method and style called?

  • @mostafahosseini2762
    @mostafahosseini2762 Месяц назад

    Great !Thanks !

  •  7 месяцев назад +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 🤔

    • @ulysse-2029
      @ulysse-2029 7 месяцев назад

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

  • @jfhandfield
    @jfhandfield 7 месяцев назад

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

  • @Agent-zn2gl
    @Agent-zn2gl 7 месяцев назад

    This is super nice

  • @2ru2pacFan
    @2ru2pacFan 10 месяцев назад +3

    Nice! ❤

  • @manoshandom4525
    @manoshandom4525 7 месяцев назад

    wow great creation :)

  • @firstlast7446
    @firstlast7446 6 месяцев назад

    Thanks bro, it really helps me

  • @fernandoli6743
    @fernandoli6743 7 месяцев назад

    thx bro, amazing content

  • @iamparmjeetmishra
    @iamparmjeetmishra 7 месяцев назад

    Amazing

  • @voldemortvi4264
    @voldemortvi4264 7 месяцев назад

    Amazing tutorial

  • @SpeedCodes-oc7ed
    @SpeedCodes-oc7ed 7 месяцев назад

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

  • @uzee2257
    @uzee2257 5 месяцев назад

    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

  • @Pareshbpatel
    @Pareshbpatel 8 месяцев назад +1

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

  • @aymanechaaba
    @aymanechaaba 8 месяцев назад

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

  • @sakarsr
    @sakarsr 8 месяцев назад

    very cool 😀

  • @raiyansarker
    @raiyansarker 10 месяцев назад +1

    liked it and would like to see more.

  • @ubfinn
    @ubfinn 10 месяцев назад +1

    Cool!!

  • @WAPBAN
    @WAPBAN 16 дней назад

    This wont work when they cards have dynamic width or height, instead the gradient should be bg for card-wrapper without ::before

  • @bumpyy
    @bumpyy 9 месяцев назад +1

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

    • @codinglyio
      @codinglyio  9 месяцев назад

      @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?

    • @aaaabbbbccc123
      @aaaabbbbccc123 Месяц назад

      @@codinglyio FUCKING SCUM. I KNOW WHERE U RESIDE

  • @CristianKirk
    @CristianKirk 7 месяцев назад +3

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

    • @ulysse-2029
      @ulysse-2029 7 месяцев назад

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

    • @zekiz774
      @zekiz774 24 дня назад

      tailwind is especially good for basic things

  • @ITSKILLSACADEMY
    @ITSKILLSACADEMY 8 месяцев назад

    That was cool

  • @godofwar8262
    @godofwar8262 9 месяцев назад +2

    Keep it up bro did you have discord

    • @codinglyio
      @codinglyio  9 месяцев назад

      I'll set it up!

    • @aaaabbbbccc123
      @aaaabbbbccc123 Месяц назад

      @@codinglyio YEH SHARE... AND I WILL EXPOSE U, U ZIONIST DIRTY SCUM