Inverted Border Radius
I have recently found myself liking the minimalistic look of inverted border radius when being used in a website. I am having some trouble though laying out my content and then breaking them up in sections.
I have added a couple of images that I am inspired by to create my portfolio based on this style. Does anyone have any pointers of how they progressed through the pseudo elements? And have you accomplished anything like this before?
3 Replies
there are quite a few posts in this channel about this if you search. mostly youll find links to KPows videos on the subject and the suggestion to use clip-path;
https://discord.com/channels/436251713830125568/1207046910268014612/1207046910268014612
https://www.youtube.com/watch?v=khjVPkO35F0
https://www.youtube.com/watch?v=JXaTx4s0kEk
https://youtu.be/SkML640BcoA?feature=shared
Kevin Powell
YouTube
Creating an inverted border-radius with CSS
The other day on Twitter, @FlorinPop pulled me into a conversation, wondering how to create inverted, round corners. Mask-image was probably the easy answer, but after someone in the thread said that making an SVG mask felt like overkill, I had to try and see if I could think of an alternative way!
š Links
ā
The original tweet: https://twi...
Online Tutorials
YouTube
How To Create Inverted border-radius Card With CSS @KevinPowell | C...
This Idea Inspired By Kevin Powell's Videos https://www.youtube.com/watch?v=khjVPkO35F0
------------------
Click For More : https://www.youtube.com/c/OnlineTutorials4Designers/videos?sub_confirmation=1
------------------
Enroll My Course : Next Level CSS Animation and Hover Effects
https://www.udemy.com/course/css-hover-animation-effects-from-be...
Kevin Powell
YouTube
Create a clean, modern navigation with HTML & CSS
Looking to step up your CSS game? I have free and premium courses: š https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=funkynavigation
š Links
ā
Chrome Canary: https://www.google.com/intl/en_ca/chrome/canary/
ā
Finished code: https://github.com/kevin-powell/funky-nav
ā
Finished version live site (animation will ...
masks might be the best solution, even though I didn't do that in any of my own videos š
Much appreciated! š