How To Create Inverted border-radius Card With CSS

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

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

  • @KevinPowell
    @KevinPowell Год назад +143

    Loved it! Fun seeing another approach here. Never would have thought of using the box-shadows of transparent circles 👍 - Just made me think of a really simple way to do something that I had been doing in a much more complicated way previously as well, thanks! 😅

    •  Год назад +9

      The best Crossover ever!!!

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  Год назад +28

      Thanks Kevin, you also completed this challenge very beautifully, I learned a lot while doing this.

    • @ScriptyVijay
      @ScriptyVijay Год назад

      so are we going to see another approach on your channel sir

    • @CMB696
      @CMB696 Год назад +2

      Happy to see you both hear Kevin and online tutorials ✌️

    • @sylvesterpromise3300
      @sylvesterpromise3300 Год назад

      ​@@CMB696 Me too

  • @NurioonSoftware
    @NurioonSoftware Год назад +2

    Im glad you follow these trend challanges between the Css legend players. Cause ure one of them too

  • @inariiii
    @inariiii Год назад +2

    I love this 😭😭😭🥺😭😭❤️❤️❤️, i even love it more that Kevin replied here and both my legends know each other now 😭🥺❤️

  • @manuelenng
    @manuelenng Год назад +1

    I always knew Online Tutorials was crazy with CSS. A literal guru

  • @balajiravi9259
    @balajiravi9259 Год назад +3

    Good to see this css legends👏

  • @love4ever026
    @love4ever026 Год назад +3

    wow awesome logic for the border, i created similar one but code was mess and long which would be trouble for a new guy to read and understand and i used many div elements!!

  • @deepakjoyjose8189
    @deepakjoyjose8189 Год назад +2

    This is a fantastic approach to solving this challenge. Great tutorial as always.

  • @farhan_jiwani
    @farhan_jiwani Год назад +2

    Very clever!
    I'll try it out on one of my side projects 😊

  • @anonymous_basics
    @anonymous_basics Год назад

    you are our favourite online css instructor 😍 take love brother.

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

    amazing card and wonderful trick to round the corners so practical thanks a lot

  • @codeinmobile
    @codeinmobile Год назад +1

    Man gye guru🎉🎉❤❤❤❤

  • @sudsierspace9010
    @sudsierspace9010 Год назад

    WOW good idea and design and skills

  • @keto.sensei
    @keto.sensei Год назад

    you're amazing! you make it easier!

  • @wandtellermann
    @wandtellermann Год назад

    hey there, with a border radius of 50% by ::after and ::before there are some annoying pixels.
    Using a border-radius of 10px makes it better.

  • @raghavwastaken
    @raghavwastaken Год назад +4

    Pretty nicer way... His looked a little advance. Yours is a little bit simpler

  • @paracodewebdev
    @paracodewebdev Год назад

    Your video is mind blowing bro ❤❤❤🎉🎉

  • @xantaclaws
    @xantaclaws Год назад

    Is this a sequel to Kevin Powell's creation ? 😂 ... Loved it by the way

  • @lukas.webdev
    @lukas.webdev Год назад

    Awesome! Very helpful video and I love your approach here... 😉🔥

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

    Nice one!

  • @bh-slys
    @bh-slys Год назад +1

    osham boss 👌

  • @muhammadadnanzafar473
    @muhammadadnanzafar473 Год назад

    Love to see your design..but make videos also with the help of elementor and copy pasting the codes

  • @TheBBigBoss
    @TheBBigBoss 8 дней назад

    If background is image, how create such effect?

  • @NguyenMinh-yr6wu
    @NguyenMinh-yr6wu Год назад +1

    very nice bro

  • @RobiulIslam-dn9mm
    @RobiulIslam-dn9mm Год назад

    wow bro! awesome

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

    I understand everything but with video if you have explained what were you doing it would be much more better. but still it was great🎉🎉

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

    Clipping would make css cleaner 😉

  • @shahramhz1444
    @shahramhz1444 3 месяца назад

    Tanks🙏👏

  • @HikaruAkitsuki
    @HikaruAkitsuki Год назад +1

    Nevermind. I still doing it on Illustrator.

  • @sanicspeed1672
    @sanicspeed1672 Год назад +1

    Cant you place the top at a lower z index, gove the bottom one border radius and a border and would work thr same?

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  Год назад

      I will do this experiment and tell

    • @sanicspeed1672
      @sanicspeed1672 Год назад

      @@OnlineTutorialsYT it wouldn't work with background image but with a solid color it should work

    • @muhammadadnanzafar473
      @muhammadadnanzafar473 Год назад

      How to add spots on the image and make it color ful in Elementor?

  • @-xyzan-
    @-xyzan- Год назад +1

    what is the purpose for doing position: relative; on all elements ?

  • @MrDarkYT56
    @MrDarkYT56 Год назад +1

    Make a polyrhythm with dots it's moving infinite when it touches then music is play i watch a video it's awesome
    Chanel Name :- Hypeplexed
    Pls make a complete video on it ❓

  • @pankichal
    @pankichal Год назад +3

    Kevin Powell?

    • @lolous-studio
      @lolous-studio Год назад

      I think he tried to do it with his own approach after seeing Powell's video

    • @pankichal
      @pankichal Год назад +1

      I thought about that too

  • @dhrt6126
    @dhrt6126 Год назад

    thanks

  • @vice-108
    @vice-108 Год назад +1

    Wha was use of those 2 circles at the end??

  • @no-name168
    @no-name168 3 месяца назад +1

    wouldn't svg file be better?

  • @fatokifemiemmanuel8565
    @fatokifemiemmanuel8565 Год назад

    Waoow

  • @Iskael
    @Iskael Год назад

    love it

  • @Aleks-q1r
    @Aleks-q1r Год назад

    When ur use border-radious -> this inside radious and outside radious NOT the same! but when ur using box-shadow it's just the shadow and it's not good look cause u have FAT Line.

  • @theishu404
    @theishu404 Год назад

    Hello brother, I was working on one project but their is one problem I don't know how to animate a border while someone input:focus please bro tell me please. If you need any details I will give you about my project.
    But Please help me.

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  Год назад

      ruclips.net/video/BMphVl9suxA/видео.html i hope its helpful to you

  • @i_AmCurious
    @i_AmCurious Год назад +1

  • @princemakwana3285
    @princemakwana3285 Год назад

    Hello bro I need help you can help me ?? Please ans

  • @حذيفةأحمد
    @حذيفةأحمد 3 месяца назад

    مذهل

  • @memestomeme5566
    @memestomeme5566 Год назад +3

    Sir instead of music plz put ur voice

    • @MikeLukuma
      @MikeLukuma Год назад +1

      That’s the style of the videos 🤷‍♂ 😁

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  Год назад +1

      my english and communication skills are not good bro that's why i use music in my videos

  • @proteus1
    @proteus1 Год назад

    Im sure you canndo this with less css and another way.

  • @goodshiro10
    @goodshiro10 Год назад +1

    bro, explain with some voice and code, music sucks

  • @grigoldvali4124
    @grigoldvali4124 Год назад

    thank you for your work, cann you send me link of google. font. please, thank you !!