How To Create Inverted border-radius Card With CSS

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

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

  • @KevinPowell
    @KevinPowell ปีที่แล้ว +147

    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

  • @manuelenng
    @manuelenng ปีที่แล้ว +1

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

  • @inariiii
    @inariiii ปีที่แล้ว +2

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

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

  • @anonymous_basics
    @anonymous_basics ปีที่แล้ว

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

  • @codeinmobile
    @codeinmobile ปีที่แล้ว +1

    Man gye guru🎉🎉❤❤❤❤

  • @farhan_jiwani
    @farhan_jiwani ปีที่แล้ว +2

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

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

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

  • @sudsierspace9010
    @sudsierspace9010 ปีที่แล้ว

    WOW good idea and design and skills

  • @nicoleeyranzo
    @nicoleeyranzo 2 วันที่ผ่านมา

    gracias compa me sirvio muchisimo

  • @xantaclaws
    @xantaclaws ปีที่แล้ว

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

  • @keto.sensei
    @keto.sensei ปีที่แล้ว

    you're amazing! you make it easier!

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

    Nice one!

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

  • @lukas.webdev
    @lukas.webdev ปีที่แล้ว

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

  • @RobiulIslam-dn9mm
    @RobiulIslam-dn9mm ปีที่แล้ว

    wow bro! awesome

  • @paracodewebdev
    @paracodewebdev ปีที่แล้ว

    Your video is mind blowing bro ❤❤❤🎉🎉

  • @bh-slys
    @bh-slys ปีที่แล้ว +1

    osham boss 👌

  • @raghavwastaken
    @raghavwastaken ปีที่แล้ว +4

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

  • @NguyenMinh-yr6wu
    @NguyenMinh-yr6wu ปีที่แล้ว +1

    very nice bro

  • @TheBBigBoss
    @TheBBigBoss 29 วันที่ผ่านมา

    If background is image, how create such effect?

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

  • @-xyzan-
    @-xyzan- ปีที่แล้ว +1

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

    • @abhaykumar9806
      @abhaykumar9806 ปีที่แล้ว

      its really annoying, isn't it?

    • @-xyzan-
      @-xyzan- ปีที่แล้ว

      yeah
      @@abhaykumar9806

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

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

    wouldn't svg file be better?

  • @vice-108
    @vice-108 ปีที่แล้ว +1

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

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

    Clipping would make css cleaner 😉

  • @muhammadadnanzafar473
    @muhammadadnanzafar473 ปีที่แล้ว

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

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

    Tanks🙏👏

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

    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🎉🎉

  • @HikaruAkitsuki
    @HikaruAkitsuki ปีที่แล้ว +1

    Nevermind. I still doing it on Illustrator.

  • @Iskael
    @Iskael ปีที่แล้ว

    love it

  • @fatokifemiemmanuel8565
    @fatokifemiemmanuel8565 ปีที่แล้ว

    Waoow

  • @princemakwana3285
    @princemakwana3285 ปีที่แล้ว

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

  • @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 ❓

  • @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  ปีที่แล้ว

      th-cam.com/video/BMphVl9suxA/w-d-xo.html i hope its helpful to you

  • @dhrt6126
    @dhrt6126 ปีที่แล้ว

    thanks

  • @i_AmCurious
    @i_AmCurious ปีที่แล้ว +1

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

  • @حذيفةأحمد
    @حذيفةأحمد 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 !!