How To Create Inverted border-radius Card With CSS

Sdílet
Vložit
  • čas přidán 25. 05. 2023
  • This Idea Inspired By Kevin Powell's Videos • Creating an inverted b...
    ------------------
    Click For More : czcams.com/users/OnlineTutor...
    ------------------
    Enroll My Course : Next Level CSS Animation and Hover Effects
    www.udemy.com/course/css-hove...
    CSS Infinity Course : www.udemy.com/course/infinity...
    Another Course : Build Complete Real World Responsive Websites from Scratch
    www.udemy.com/course/complete...
    ------------------
    Join Our Channel Membership And Get Source Code of My New Video's Everyday!
    Join : / @onlinetutorialsyt
    ------------------
    Source Code : / onlinetutorials
    Facebook Page : / onlinetutorialsyt
    Instagram : / onlinetutorials_youtube
    Twitter : / onlinetutoria16
    Website : www.onlinetutorialsweb.com
    Buy Me A Coffee : www.buymeacoffee.com/onlineTu...
    ------------------
    #onlinetutorials #csseffect #topcsseffects
    ------------------
    give proper credit if you repost this on other social media platform
    ------------------
    image source : www.pexels.com/
    ------------------
    Disclaimer video is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use

Komentáře • 62

  • @KevinPowell
    @KevinPowell Před rokem +131

    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! 😅

    •  Před rokem +7

      The best Crossover ever!!!

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  Před rokem +25

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

    • @ScriptyVijay
      @ScriptyVijay Před rokem

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

    • @CMB696
      @CMB696 Před rokem +2

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

    • @sylvesterpromise3300
      @sylvesterpromise3300 Před rokem

      ​@@CMB696 Me too

  • @manuelenng
    @manuelenng Před rokem +1

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

  • @NurioonSoftware
    @NurioonSoftware Před rokem +1

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

  • @balajiravi9259
    @balajiravi9259 Před rokem +3

    Good to see this css legends👏

  • @inariiii
    @inariiii Před rokem +1

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

  • @deepakjoyjose8189
    @deepakjoyjose8189 Před rokem +2

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

  • @love4ever026
    @love4ever026 Před rokem +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!!

  • @tomail1167
    @tomail1167 Před rokem

    Excellent job of implementing it this way.

  • @farhan_jiwani
    @farhan_jiwani Před rokem +2

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

  • @codeinmobile
    @codeinmobile Před rokem +1

    Man gye guru🎉🎉❤❤❤❤

  • @ketosensei8549
    @ketosensei8549 Před rokem

    you're amazing! you make it easier!

  • @lukas.webdev
    @lukas.webdev Před rokem

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

  • @anonymous_basics
    @anonymous_basics Před rokem

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

  • @RobiulIslam-dn9mm
    @RobiulIslam-dn9mm Před rokem

    wow bro! awesome

  • @sudsierspace9010
    @sudsierspace9010 Před rokem

    WOW good idea and design and skills

  • @heidar_dev
    @heidar_dev Před 2 měsíci

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

  • @Iskael
    @Iskael Před rokem

    love it

  • @bh-slys
    @bh-slys Před rokem +1

    osham boss 👌

  • @NguyenMinh-yr6wu
    @NguyenMinh-yr6wu Před rokem +1

    very nice bro

  • @paracodewebdev
    @paracodewebdev Před rokem

    Your video is mind blowing bro ❤❤❤🎉🎉

  • @fatokifemiemmanuel8565

    Waoow

  • @dhrt6126
    @dhrt6126 Před 11 měsíci

    thanks

  • @xantaclaws
    @xantaclaws Před rokem

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

  • @i_AmCurious
    @i_AmCurious Před rokem +1

  • @muhammadadnanzafar473

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

  • @raghavwastaken
    @raghavwastaken Před rokem +4

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

  • @wandtellermann
    @wandtellermann Před rokem

    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.

  • @basitjawad4090
    @basitjawad4090 Před 14 dny

    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 Před 2 měsíci

    Clipping would make css cleaner 😉

  • @MrDarkYT56
    @MrDarkYT56 Před rokem +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 ❓

  • @sanicspeed1672
    @sanicspeed1672 Před rokem +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  Před rokem

      I will do this experiment and tell

    • @sanicspeed1672
      @sanicspeed1672 Před rokem

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

    • @muhammadadnanzafar473
      @muhammadadnanzafar473 Před rokem

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

  • @-xyzan-
    @-xyzan- Před rokem +1

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

  • @pankichal
    @pankichal Před rokem +3

    Kevin Powell?

    • @lolous-studio
      @lolous-studio Před rokem

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

    • @pankichal
      @pankichal Před rokem +1

      I thought about that too

  • @user-xf5df6bj4y
    @user-xf5df6bj4y Před rokem

    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.

  • @vice-108
    @vice-108 Před rokem +1

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

  • @theishu404
    @theishu404 Před rokem

    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  Před rokem

      czcams.com/video/BMphVl9suxA/video.html i hope its helpful to you

  • @princemakwana3285
    @princemakwana3285 Před rokem

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

  • @HikaruAkitsuki
    @HikaruAkitsuki Před 8 měsíci

    Nevermind. I still doing it on Illustrator.

  • @proteus1
    @proteus1 Před rokem

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

  • @memestomeme5566
    @memestomeme5566 Před rokem +3

    Sir instead of music plz put ur voice

    • @MikeHerzog_de
      @MikeHerzog_de Před rokem +1

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

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  Před rokem +1

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

  • @goodshiro10
    @goodshiro10 Před rokem +1

    bro, explain with some voice and code, music sucks

  • @grigoldvali4124
    @grigoldvali4124 Před 8 měsíci

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