Learn CSS Border Animations in 6 Minutes

Поділитися
Вставка
  • Опубліковано 21 гру 2024

КОМЕНТАРІ • 308

  • @saeentist-hb
    @saeentist-hb 5 місяців тому +234

    a CSS Legend is Born

    • @JuanCardona
      @JuanCardona 4 місяці тому

      @@saeentist-hb ua-cam.com/video/-VOUK-xFAyk/v-deo.htmlsi=tYj-cSRghmJpDGBk

    • @CodingWithAlbert-O
      @CodingWithAlbert-O 4 місяці тому +2

      literally

    • @spaceowl5957
      @spaceowl5957 Місяць тому +1

      Bro-rn

    • @ezwtwrziehag1736
      @ezwtwrziehag1736 Місяць тому

      propbably just some others find on the internet and he stole it

  • @rubenmolina5566
    @rubenmolina5566 3 місяці тому +24

    I'm doing an online boot camp to be a game dev and needed to make some CSS Effects for an assignment. This video helped me out a lot. Thanks, bro 🙏

  • @zS1L3NT
    @zS1L3NT 5 місяців тому +69

    bro you really give the best css videos out there. you cover the most obscure css properties, you explain and break everything down so clearly and you make your videos short enough to not get draggy. love your content 🔥🔥

    • @JuanCardona
      @JuanCardona 4 місяці тому

      @@zS1L3NT ua-cam.com/video/-VOUK-xFAyk/v-deo.htmlsi=tYj-cSRghmJpDGBk

    • @drunkeroc
      @drunkeroc 3 місяці тому +3

      No he doesn't 😊

    • @duckner
      @duckner 2 місяці тому +2

      He didn't use any obscure properties tho? Only thing "odd" would be showcasing a new CSS feature.
      I love the short videos

  • @Arygua
    @Arygua 3 місяці тому +6

    That was CLEAN! I don't do a ton of CSS in my experience as a full stack dev, just because internal tools don't have to have the fanciest UI but I would like my resume site to look cool and have some uniqueness.
    And the presentation of this was just phenomenal, the subscribe button having the animation around the border when you said to subscribe just put the cherry on top.

  • @coding__by__HAFIZ
    @coding__by__HAFIZ 5 місяців тому +14

    I found video when I came to yt after being tired from googling border design for button.Then i found this. Thanks for uploading at time

  • @aurelien_aep
    @aurelien_aep 5 місяців тому +12

    Was actually trying to do it this morning! This video drop right on time aha

  • @azrfn
    @azrfn 4 місяці тому +2

    I´m a aspiring computer scientist and it helps me a lot to understand css. I´m bulding my own portfolio website and I´ll integrade the border animations - thanks for help us! Many greetings from Germany!

    • @coding2go
      @coding2go  4 місяці тому +4

      That's nice! Good luck with your Portfolio. Und beste Grüße dir ebenfalls👋

    • @azrfn
      @azrfn 4 місяці тому +1

      @@coding2go I have a question :) Is it possible that I can download the script / code of the textbox and the animated border script / css code? I´m struggling regarding the code and my result is not so good like yours in your video...

    • @coding2go
      @coding2go  4 місяці тому +3

      @@azrfn Hey, it has been some time and I don't know if you still need the code but I am letting you know anyways that I recently added the source code to my website coding2go.com in case you want to download it.

  • @GlixedYouTube
    @GlixedYouTube 4 місяці тому +4

    Thanks for the tutorial! I’ve been trying to get back into html/css/js, but I didn’t know where to start. But thanks to you, I now know what I really want to do!

  • @wiseguy7355
    @wiseguy7355 5 місяців тому +4

    This channel is really getting popular, deserves it too! I like the way you explain stuff like this

    • @coding2go
      @coding2go  5 місяців тому

      Thank you so much 😀

  • @mohamedrahal4783
    @mohamedrahal4783 4 місяці тому +12

    Excuse me sir, but your content is just BRILLIANT ! I'm just a beginner in CSS and thanks to you I've understood positions in under 4 minutes, and I'm now we're doing this ! you make it look so easy and simple ...
    My mind is blown, you are amazing, thanks ! (and a bigger thanks to those who actually created those CSS functionalities because we're just standing on their shoulders here)

  • @The-CoIIector
    @The-CoIIector Місяць тому +1

    Amazing!!! I didn't even get bored!

  • @Pvanwoensel
    @Pvanwoensel 4 місяці тому +8

    Using tailwind, I did have to set my box-sizing to initial. After that it worked fine.
    Thanks for sharing!

    • @ashishkumar-jo7cj
      @ashishkumar-jo7cj 4 місяці тому +1

      This is the answer i am looking for at first zindex then i forgot to reset my box-sizing property thanks for telling your opinion

    • @lacerdae
      @lacerdae Місяць тому

      Could you show the code using Tailwind?

  • @joshuamodiba853
    @joshuamodiba853 4 місяці тому +11

    You blew my mind
    I was smiling so maniacally

  • @TharinduMayanthaBasnayake
    @TharinduMayanthaBasnayake 5 місяців тому +2

    Seriously you are making fire on CSS

  • @kingkilafootball321
    @kingkilafootball321 4 місяці тому +2

    Sir what you are doing is crazy😡... Pls continue doing it. You are the best.

  • @TheMetalMag
    @TheMetalMag 19 днів тому

    thx, glad you credited the great CSS teachers on utube!

  • @orange_district
    @orange_district 2 місяці тому

    This is insane! Great work. I would never have the patience to dig this deep into CSS myself.

  • @marwanak10
    @marwanak10 2 місяці тому

    and here I thought you were gonna apply a transform rotation around the origin but you went above and beyond lol you earned a sub for the fun

  • @oleg07010
    @oleg07010 2 місяці тому

    You are blowing my mind with these css videos

  • @Waradu
    @Waradu 4 місяці тому +3

    inner border radius (10) + padding (3) = outer border radius (13) (for the after/before element in this case)
    with this the rounded edges align with themself

    • @coding2go
      @coding2go  4 місяці тому

      Thanks, I didn't think of that.

    • @SiddhantSuvagiya
      @SiddhantSuvagiya 10 днів тому

      Thanks for explaining this - really useful!

  • @nadeemakramansari1331
    @nadeemakramansari1331 4 місяці тому +2

    @property --angle {} was the thing that blows my mind. Thank you for making such content.

  • @serious_17
    @serious_17 4 місяці тому +4

    As someone who has learnt CSS and continued to Javascript, I find this new and very informative.

  • @elpatotengu31
    @elpatotengu31 3 місяці тому

    You deserve more attention. Great videos

  • @gouravthakur8094
    @gouravthakur8094 5 місяців тому +1

    Hey Fabian, I've been following you since a while now. You're doing really well with these concise & to the point tutorials, Good luck man!!

    • @coding2go
      @coding2go  5 місяців тому

      Thanks a lot man! Thats great to hear

  • @Naxity
    @Naxity 5 місяців тому

    Sir seriously your videos are the best among the rest.

  • @spaceowl5957
    @spaceowl5957 Місяць тому

    Bro, you’re a real bro 🤜🤛

  • @Deevenkumar-rd5bz
    @Deevenkumar-rd5bz 4 місяці тому

    Super helpful. please don't stop making these videos.

  • @antonchigurh4125
    @antonchigurh4125 5 місяців тому +1

    Superbly explained. Thank you. Subbed!

  • @wengdavo6786
    @wengdavo6786 4 місяці тому +1

    Wow thank you soo much this is so smart

  • @antwon.t
    @antwon.t 3 місяці тому

    thanks big dawg, explained it perfectly

  • @spaceowl5957
    @spaceowl5957 Місяць тому

    Really awesome simple explanation. I love it, and the glow effect looks beautiful.

  • @_____vieve
    @_____vieve 3 місяці тому

    woww this is so cool, ur explanation is direct tooo, thank u!!!

  • @zrxmax_
    @zrxmax_ 4 місяці тому +3

    1:50 Border radius should be 13, because of padding 3

  • @VermiNew8475
    @VermiNew8475 4 місяці тому

    Thank you for the awesome CSS tutorial. I really liked that orange double lines one with that imitation of border

  • @atulgupta-g
    @atulgupta-g 4 місяці тому +1

    This is really awesome 🎉❤
    Thanks!

    • @coding2go
      @coding2go  4 місяці тому +1

      You're welcome 😊

  • @pokepi-yt3bt
    @pokepi-yt3bt 2 місяці тому

    Very thank you for this. Very good explanation

  • @vidiogramas
    @vidiogramas 5 місяців тому

    so much fun i love it! i'm a begginer and i love your tutorials! thank you so much for the content

    • @coding2go
      @coding2go  5 місяців тому

      Glad you enjoy it!

  • @marcosangelmedina5845
    @marcosangelmedina5845 Місяць тому

    epic tutorial, subscribed

  • @virtugraph
    @virtugraph 3 місяці тому

    Perfect, please make more videos about css

  • @programmingwiththotho4641
    @programmingwiththotho4641 4 місяці тому

    Thank you for sharing, I purchased your course on Udemy, and I'm looking forward for more course content like sass and etc

    • @coding2go
      @coding2go  4 місяці тому

      Awesome, thank you!

  • @ChandreshSingh12
    @ChandreshSingh12 4 місяці тому

    Thanks for this video, explained nicely and easily.

  • @digwillhachi
    @digwillhachi 4 місяці тому

    awesome stuff. Will def be using this .

  • @All_the_arcs
    @All_the_arcs 3 місяці тому

    THIS WAS SO SICK TO CODE

  • @mohammadakradi8289
    @mohammadakradi8289 4 місяці тому

    thank you for your extensive tutorials. I like your videos thank you

  • @juniordefariasdev
    @juniordefariasdev 19 днів тому

    Thank you so much!!!!!!!!!!!!!!!!!!!!!!!

  • @Kiki-15382
    @Kiki-15382 4 місяці тому

    Bro you're my life saver😭🙏thank you so much i needed this for so long i couldn't understand it but this helped me so much❤

  • @Silverdagger258
    @Silverdagger258 4 місяці тому

    Very nice video - I found that for me using the pseudo before and after elements size works better to control the "border" width around 102% to 105%

    • @coding2go
      @coding2go  4 місяці тому +1

      Sure, that will work too. Thanks for sharing

  • @周韬-r6i
    @周韬-r6i Місяць тому

    thank u bro, it helps a lot🎉

  • @benitoelwerito
    @benitoelwerito Місяць тому +1

    I see that a lot of other tutorials do the same. What if you have a semi-transparent background for the main element that is in front of the pseudo element?

  • @NoBody_0v0
    @NoBody_0v0 3 місяці тому

    Great work, keep it up 👍

  • @imtiazshoykat
    @imtiazshoykat 5 місяців тому

    This is so helpful. Thanks a lot.

  • @alimansimov1929
    @alimansimov1929 4 місяці тому

    Perfect explanation with interesting topic

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 3 місяці тому +3

    this is great always wanted to learn that but could yo do the same with CSS properties which are widely supported and not experimentation

  • @shreyaskulkarni4805
    @shreyaskulkarni4805 5 місяців тому

    Very simple and easy-to-follow explanation. You earned a subscriber. 🙌
    Thanks... 😁

    • @coding2go
      @coding2go  5 місяців тому

      Thanks for the sub! Welcome to the channel 👋

  • @xjankix
    @xjankix 2 місяці тому

    this is beautiful!

  • @captain.dolphin
    @captain.dolphin 5 місяців тому

    This is so fricking amazing, really cool💥

  • @Verxa-3
    @Verxa-3 2 місяці тому +1

    are you able to do this with a block

  • @Turabbo
    @Turabbo 4 місяці тому

    Lovely tutorial. I feel like this would've been a good context to teach people about inset though too.

  • @leonardodesouza659
    @leonardodesouza659 4 місяці тому

    Awesome video. Congratulations 🎉

  • @_BonsaiBen
    @_BonsaiBen 3 місяці тому

    Liked subscribed. Amazing. Also I didn’t mind the background music :)

  • @paweczajkowski2176
    @paweczajkowski2176 5 місяців тому

    Thank U for this lesson. It's very usefully. Have a nice day

    • @coding2go
      @coding2go  5 місяців тому

      Thanks! you too ✌

  • @Code_Cosmoss
    @Code_Cosmoss 5 місяців тому

    Finally!! 😢 Thanks ❤, liked and subbed

  • @ronysarkar3851
    @ronysarkar3851 5 місяців тому

    great ............ so helpful for us. 👌👌👌👌👌

  • @brunomoraes2718
    @brunomoraes2718 4 місяці тому

    very nice! so simple

  • @Rudraj-if5jz
    @Rudraj-if5jz 4 місяці тому +2

    Bro can you please make video on *Webkits* and *Combinators*

  • @alonga3975
    @alonga3975 Місяць тому

    So good man

  • @SunilKumar-jc5cb
    @SunilKumar-jc5cb 5 місяців тому

    Very informative video, I learned a new thing, thanks dear!
    👍👍👍😊😊

  • @Shizus
    @Shizus 5 місяців тому

    Great content! Very informative and looks great. 👏👏👏👏

  • @programar-dev
    @programar-dev 4 місяці тому

    Very nice man. Thats impressive!

  • @nirlekaarthamevira
    @nirlekaarthamevira 5 місяців тому

    I wonder how the hell did you figure it out, it's an amazing technique

  • @MaxAlekseyev
    @MaxAlekseyev 2 місяці тому

    Super! 😀

  • @juanpablo9717
    @juanpablo9717 4 місяці тому

    Thanks!!!!
    Amazing video! I really want see more content like this one!
    Thanks from Colombia 🇨🇴
    Like and new sub

  • @CrAzZyKiLleR01
    @CrAzZyKiLleR01 4 місяці тому

    Awesome content. Got one video of your channel suggestes and instantly subscribed to the channel. One small improvement tough: When you mention experimental properties, please show the caniuse page for a second so I don't have to! Thank you, keep growing!

    • @coding2go
      @coding2go  4 місяці тому

      Thanks, I will include info about browser support in future videos.

  • @AttiqaZaki1
    @AttiqaZaki1 2 місяці тому

    It's so amazing

  • @waleedbinshabbir1542
    @waleedbinshabbir1542 5 місяців тому

    Amazing brother

  • @KshytizChandel
    @KshytizChandel Місяць тому

    So cool.... Subsribed right away...

  • @xsya26
    @xsya26 4 місяці тому

    i really appreciate your videos. they're simple to understand. can you make a video about media queries?

  • @samueljun
    @samueljun 5 місяців тому

    Tks bro! awesome content!

  • @okforcoding
    @okforcoding 3 місяці тому

    Good Video Brother

  • @gamerstube3737
    @gamerstube3737 Місяць тому

    so nice broo 😍

  • @martindejonge695
    @martindejonge695 3 місяці тому

    This is my opinion a cleaner solution than using an SVG

  • @mohitkaushik21
    @mohitkaushik21 3 місяці тому +1

    🙂 nice

  • @nunkeish
    @nunkeish 17 днів тому

    Hey Fabian, nice video, tho i have a question, how do you make it double like this part on the video? 0:06 Thanks.

  • @CS-Amanjha
    @CS-Amanjha 5 місяців тому

    Please make a full tutorial on responsiveness.

  • @lebronisthegoatla
    @lebronisthegoatla Місяць тому

    that was awesome

  • @rahulpagidimarri4677
    @rahulpagidimarri4677 4 місяці тому

    Thanks !!

  • @thejokersmile9302
    @thejokersmile9302 6 днів тому +1

    Pls I’d appreciate if you can show the html as well since I’m a beginner and I don’t understand the card, box, text yet

  • @RebecaMarques
    @RebecaMarques 2 місяці тому

    Great, it'd like to know more about this @property and other nice uses for it.

  • @shivamrathour011
    @shivamrathour011 4 місяці тому

    Awesome 👍👍👍

  • @rootcodinggood
    @rootcodinggood Місяць тому

    i love this video

  • @petarkolev6928
    @petarkolev6928 Місяць тому

    Bruh, amazing! You got a sub from me 🍻

  • @CodingWithAlbert-O
    @CodingWithAlbert-O 4 місяці тому

    amazing!

  • @mastertechtutorials9166
    @mastertechtutorials9166 5 місяців тому

    💥 Superb

  • @sudeepwarriorofficial
    @sudeepwarriorofficial 4 місяці тому +1

    Goat

  • @ProfessorThock
    @ProfessorThock 2 місяці тому

    Sweet tip about @property I hadn’t heard about that feature yet. Is it faster to animate the gradient using @property than to animate the background element to spin? I wonder how efficient the gradient calculation is. With the old way I hate having to oversize the background to cover the corners and then cleaning up the overflow

  • @print.helloworld
    @print.helloworld 5 місяців тому

    thank you

  • @maurosampietro9900
    @maurosampietro9900 5 місяців тому

    Fascinating

  • @hankakim3267
    @hankakim3267 Місяць тому

    Pro tip 😍

  • @juanetehOK
    @juanetehOK 3 місяці тому

    wowowo, thanks!

  • @Anas-cg1cs
    @Anas-cg1cs 5 місяців тому +1

    can u do a video about css grid property

    • @literrataa
      @literrataa 4 місяці тому

      check Nova Designs