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 +132

    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 +8

      The best Crossover ever!!!

    • @OnlineTutorialsYT
      @OnlineTutorialsYT  Před rokem +26

      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

  • @deepakjoyjose8189
    @deepakjoyjose8189 Před rokem +2

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

  • @NurioonSoftware
    @NurioonSoftware Před rokem +1

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

  • @manuelenng
    @manuelenng Před rokem +1

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

  • @balajiravi9259
    @balajiravi9259 Před rokem +3

    Good to see this css legends👏

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

  • @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 😭🥺❤️

  • @farhan_jiwani
    @farhan_jiwani Před rokem +2

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

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

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

  • @tomail1167
    @tomail1167 Před rokem

    Excellent job of implementing it this way.

  • @anonymous_basics
    @anonymous_basics Před rokem

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

  • @ketosensei8549
    @ketosensei8549 Před rokem

    you're amazing! you make it easier!

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

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

  • @sudsierspace9010
    @sudsierspace9010 Před rokem

    WOW good idea and design and skills

  • @codeinmobile
    @codeinmobile Před rokem +1

    Man gye guru🎉🎉❤❤❤❤

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

    wow bro! awesome

  • @paracodewebdev
    @paracodewebdev Před rokem

    Your video is mind blowing bro ❤❤❤🎉🎉

  • @Iskael
    @Iskael Před rokem

    love it

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

    very nice bro

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

  • @xantaclaws
    @xantaclaws Před rokem

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

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

    osham boss 👌

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

    thanks

  • @muhammadadnanzafar473

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

  • @fatokifemiemmanuel8565

    Waoow

  • @raghavwastaken
    @raghavwastaken Před rokem +4

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

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

  • @basitjawad4090
    @basitjawad4090 Před 24 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🎉🎉

  • @i_AmCurious
    @i_AmCurious Před rokem +1

  • @neutralitat2570
    @neutralitat2570 Před 3 měsíci

    Clipping would make css cleaner 😉

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

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

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

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

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

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

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

  • @princemakwana3285
    @princemakwana3285 Před rokem

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

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

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