Learn CSS Border Animations in 6 Minutes

แชร์
ฝัง
  • เผยแพร่เมื่อ 23 พ.ย. 2024

ความคิดเห็น •

  • @saeentist-hb
    @saeentist-hb 4 หลายเดือนก่อน +213

    a CSS Legend is Born

    • @JuanCardona
      @JuanCardona 3 หลายเดือนก่อน

      @@saeentist-hb th-cam.com/video/-VOUK-xFAyk/w-d-xo.htmlsi=tYj-cSRghmJpDGBk

    • @CodingWithAlbert-O
      @CodingWithAlbert-O 3 หลายเดือนก่อน +1

      literally

    • @user-hi2ob9sv9d
      @user-hi2ob9sv9d หลายเดือนก่อน +1

      and a javascript developer got died ....

    • @spaceowl5957
      @spaceowl5957 หลายเดือนก่อน

      Bro-rn

    • @user-hi2ob9sv9d
      @user-hi2ob9sv9d หลายเดือนก่อน

      @@spaceowl5957 xd

  • @zS1L3NT
    @zS1L3NT 4 หลายเดือนก่อน +63

    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 3 หลายเดือนก่อน

      @@zS1L3NT th-cam.com/video/-VOUK-xFAyk/w-d-xo.htmlsi=tYj-cSRghmJpDGBk

    • @drunkeroc
      @drunkeroc 2 หลายเดือนก่อน +2

      No he doesn't 😊

    • @duckner
      @duckner หลายเดือนก่อน

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

  • @rubenmolina5566
    @rubenmolina5566 2 หลายเดือนก่อน +20

    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 🙏

  • @The-CoIIector
    @The-CoIIector 10 วันที่ผ่านมา +1

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

  • @coding__by__HAFIZ
    @coding__by__HAFIZ 4 หลายเดือนก่อน +13

    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 4 หลายเดือนก่อน +9

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

  • @Pvanwoensel
    @Pvanwoensel 4 หลายเดือนก่อน +7

    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 27 วันที่ผ่านมา

      Could you show the code using Tailwind?

  • @Arygua
    @Arygua 2 หลายเดือนก่อน +4

    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.

  • @GlixedYouTube
    @GlixedYouTube 3 หลายเดือนก่อน +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 4 หลายเดือนก่อน +4

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

    • @coding2go
      @coding2go  4 หลายเดือนก่อน

      Thank you so much 😀

  • @azrfn
    @azrfn 4 หลายเดือนก่อน +1

    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 หลายเดือนก่อน +3

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

    • @azrfn
      @azrfn 3 หลายเดือนก่อน +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  3 หลายเดือนก่อน +2

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

  • @orange_district
    @orange_district หลายเดือนก่อน

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

  • @oleg07010
    @oleg07010 หลายเดือนก่อน

    You are blowing my mind with these css videos

  • @Waradu
    @Waradu 3 หลายเดือนก่อน +2

    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  3 หลายเดือนก่อน

      Thanks, I didn't think of that.

  • @mohamedrahal4783
    @mohamedrahal4783 4 หลายเดือนก่อน +11

    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)

  • @nadeemakramansari1331
    @nadeemakramansari1331 3 หลายเดือนก่อน +2

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

  • @spaceowl5957
    @spaceowl5957 หลายเดือนก่อน

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

  • @marwanak10
    @marwanak10 หลายเดือนก่อน

    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

  • @kingkilafootball321
    @kingkilafootball321 3 หลายเดือนก่อน +2

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

  • @TharinduMayanthaBasnayake
    @TharinduMayanthaBasnayake 4 หลายเดือนก่อน +2

    Seriously you are making fire on CSS

  • @周韬-r6i
    @周韬-r6i 19 วันที่ผ่านมา

    thank u bro, it helps a lot🎉

  • @ramzyabdul185
    @ramzyabdul185 4 หลายเดือนก่อน +1

    This was simple and easy to follow, I will try it the moment I am out of work. And see if I can replicate this

  • @pokepi-yt3bt
    @pokepi-yt3bt หลายเดือนก่อน

    Very thank you for this. Very good explanation

  • @gouravthakur8094
    @gouravthakur8094 4 หลายเดือนก่อน +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  4 หลายเดือนก่อน

      Thanks a lot man! Thats great to hear

  • @wengdavo6786
    @wengdavo6786 3 หลายเดือนก่อน +1

    Wow thank you soo much this is so smart

  • @ChandreshSingh12
    @ChandreshSingh12 3 หลายเดือนก่อน

    Thanks for this video, explained nicely and easily.

  • @joshuamodiba853
    @joshuamodiba853 3 หลายเดือนก่อน +10

    You blew my mind
    I was smiling so maniacally

  • @TablePho1
    @TablePho1 2 หลายเดือนก่อน

    thanks big dawg, explained it perfectly

  • @spaceowl5957
    @spaceowl5957 หลายเดือนก่อน

    Bro, you’re a real bro 🤜🤛

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 2 หลายเดือนก่อน +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

  • @_____vieve
    @_____vieve 2 หลายเดือนก่อน

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

  • @mohammadakradi8289
    @mohammadakradi8289 3 หลายเดือนก่อน

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

  • @vidiogramas
    @vidiogramas 4 หลายเดือนก่อน

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

    • @coding2go
      @coding2go  4 หลายเดือนก่อน

      Glad you enjoy it!

  • @VermiNew8475
    @VermiNew8475 3 หลายเดือนก่อน

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

  • @Silverdagger258
    @Silverdagger258 3 หลายเดือนก่อน

    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  3 หลายเดือนก่อน +1

      Sure, that will work too. Thanks for sharing

  • @elpatotengu31
    @elpatotengu31 2 หลายเดือนก่อน

    You deserve more attention. Great videos

  • @alimansimov1929
    @alimansimov1929 4 หลายเดือนก่อน

    Perfect explanation with interesting topic

  • @Turabbo
    @Turabbo 3 หลายเดือนก่อน

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

  • @Deevenkumar-rd5bz
    @Deevenkumar-rd5bz 3 หลายเดือนก่อน

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

  • @serious_17
    @serious_17 4 หลายเดือนก่อน +4

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

  • @Naxity
    @Naxity 4 หลายเดือนก่อน

    Sir seriously your videos are the best among the rest.

  • @digwillhachi
    @digwillhachi 3 หลายเดือนก่อน

    awesome stuff. Will def be using this .

  • @antonchigurh4125
    @antonchigurh4125 4 หลายเดือนก่อน +1

    Superbly explained. Thank you. Subbed!

  • @shreyaskulkarni4805
    @shreyaskulkarni4805 4 หลายเดือนก่อน

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

    • @coding2go
      @coding2go  4 หลายเดือนก่อน

      Thanks for the sub! Welcome to the channel 👋

  • @virtugraph
    @virtugraph 2 หลายเดือนก่อน

    Perfect, please make more videos about css

  • @atulgupta-g
    @atulgupta-g 3 หลายเดือนก่อน +1

    This is really awesome 🎉❤
    Thanks!

    • @coding2go
      @coding2go  3 หลายเดือนก่อน +1

      You're welcome 😊

  • @marcosangelmedina5845
    @marcosangelmedina5845 23 วันที่ผ่านมา

    epic tutorial, subscribed

  • @CrAzZyKiLleR01
    @CrAzZyKiLleR01 3 หลายเดือนก่อน

    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  3 หลายเดือนก่อน

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

  • @brunomoraes2718
    @brunomoraes2718 3 หลายเดือนก่อน

    very nice! so simple

  • @zrxmax_
    @zrxmax_ 3 หลายเดือนก่อน +3

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

  • @programmingwiththotho4641
    @programmingwiththotho4641 3 หลายเดือนก่อน

    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  3 หลายเดือนก่อน

      Awesome, thank you!

  • @xsya26
    @xsya26 4 หลายเดือนก่อน

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

  • @paweczajkowski2176
    @paweczajkowski2176 4 หลายเดือนก่อน

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

    • @coding2go
      @coding2go  4 หลายเดือนก่อน

      Thanks! you too ✌

  • @Verxa-3
    @Verxa-3 หลายเดือนก่อน +1

    are you able to do this with a block

  • @kamisama4274
    @kamisama4274 3 หลายเดือนก่อน

    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❤

  • @rahulpagidimarri4677
    @rahulpagidimarri4677 3 หลายเดือนก่อน

    Thanks !!

  • @imtiazshoykat
    @imtiazshoykat 4 หลายเดือนก่อน

    This is so helpful. Thanks a lot.

  • @All_the_arcs
    @All_the_arcs 2 หลายเดือนก่อน

    THIS WAS SO SICK TO CODE

  • @AttiqaZaki1
    @AttiqaZaki1 หลายเดือนก่อน

    It's so amazing

  • @rootcodinggood
    @rootcodinggood 4 วันที่ผ่านมา

    i love this video

  • @SunilKumar-jc5cb
    @SunilKumar-jc5cb 4 หลายเดือนก่อน

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

  • @ronysarkar3851
    @ronysarkar3851 4 หลายเดือนก่อน

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

  • @alonga3975
    @alonga3975 28 วันที่ผ่านมา

    So good man

  • @Shizus
    @Shizus 4 หลายเดือนก่อน

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

  • @CS-Amanjha
    @CS-Amanjha 4 หลายเดือนก่อน

    Please make a full tutorial on responsiveness.

  • @leonardodesouza659
    @leonardodesouza659 3 หลายเดือนก่อน

    Awesome video. Congratulations 🎉

    • @coding2go
      @coding2go  3 หลายเดือนก่อน

      Thanks!

  • @lebronisthegoatla
    @lebronisthegoatla 3 วันที่ผ่านมา

    that was awesome

  • @NoBody_0v0
    @NoBody_0v0 2 หลายเดือนก่อน

    Great work, keep it up 👍

  • @juanpablo9717
    @juanpablo9717 3 หลายเดือนก่อน

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

  • @_BonsaiBen
    @_BonsaiBen 2 หลายเดือนก่อน

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

  • @print.helloworld
    @print.helloworld 4 หลายเดือนก่อน

    thank you

  • @RebecaMarques
    @RebecaMarques หลายเดือนก่อน

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

  • @captain.dolphin
    @captain.dolphin 4 หลายเดือนก่อน

    This is so fricking amazing, really cool💥

  • @MaxAlekseyev
    @MaxAlekseyev หลายเดือนก่อน

    Super! 😀

  • @KshytizChandel
    @KshytizChandel 28 วันที่ผ่านมา

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

  • @benitoelwerito
    @benitoelwerito 3 วันที่ผ่านมา

    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?

  • @CodingWithAlbert-O
    @CodingWithAlbert-O 3 หลายเดือนก่อน

    amazing!

  • @martindejonge695
    @martindejonge695 3 หลายเดือนก่อน

    This is my opinion a cleaner solution than using an SVG

  • @programar-dev
    @programar-dev 3 หลายเดือนก่อน

    Very nice man. Thats impressive!

    • @coding2go
      @coding2go  3 หลายเดือนก่อน

      Thanks!

  • @maurosampietro9900
    @maurosampietro9900 4 หลายเดือนก่อน

    Fascinating

  • @samueljun
    @samueljun 4 หลายเดือนก่อน

    Tks bro! awesome content!

  • @Rudraj-if5jz
    @Rudraj-if5jz 3 หลายเดือนก่อน +1

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

  • @xjankix
    @xjankix หลายเดือนก่อน

    this is beautiful!

  • @shivamrathour011
    @shivamrathour011 3 หลายเดือนก่อน

    Awesome 👍👍👍

  • @waleedbinshabbir1542
    @waleedbinshabbir1542 4 หลายเดือนก่อน

    Amazing brother

  • @dihydrogenmonoxideistasty340
    @dihydrogenmonoxideistasty340 3 หลายเดือนก่อน

    thanks

  • @mohitkaushik21
    @mohitkaushik21 3 หลายเดือนก่อน +1

    🙂 nice

  • @Code_Cosmoss
    @Code_Cosmoss 4 หลายเดือนก่อน

    Finally!! 😢 Thanks ❤, liked and subbed

  • @gamerstube3737
    @gamerstube3737 21 วันที่ผ่านมา

    so nice broo 😍

  • @ProfessorThock
    @ProfessorThock หลายเดือนก่อน

    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

  • @AnilDehariya-o5i
    @AnilDehariya-o5i 4 หลายเดือนก่อน

    Great video! But what about the browser support of @property
    This video taught me that everything is possible just you need your brain to do that

  • @emnhay
    @emnhay 3 หลายเดือนก่อน

    Hi, the tutorial is great! Can I create something like a polyfill for unsupported browsers?

  • @denns0r
    @denns0r หลายเดือนก่อน

    remove top, left, height and width and use inset: 0 instead on the after element ... 😀

  • @okforcoding
    @okforcoding 2 หลายเดือนก่อน

    Good Video Brother

  • @Anas-cg1cs
    @Anas-cg1cs 4 หลายเดือนก่อน +1

    can u do a video about css grid property

    • @literrataa
      @literrataa 4 หลายเดือนก่อน

      check Nova Designs

  • @Dexter101x
    @Dexter101x 4 หลายเดือนก่อน

    Nice one

  • @mastertechtutorials9166
    @mastertechtutorials9166 4 หลายเดือนก่อน

    💥 Superb

  • @kalavdikar
    @kalavdikar 2 หลายเดือนก่อน

    How to make this animation work only when mouse is hovered on the content box or border, BTW awesome video and explaining 😊

  • @petarkolev6928
    @petarkolev6928 10 วันที่ผ่านมา

    Bruh, amazing! You got a sub from me 🍻

    • @coding2go
      @coding2go  9 วันที่ผ่านมา

      Awesome, thank you!

  • @Alireza-s6o
    @Alireza-s6o 2 หลายเดือนก่อน

    Useful