Little idea to start this?

Hello everyone, I am a beginner as a junior dev, here I have a design that I would like to make, I would like a part to have a form of folder and currently I have tried several ways on codepen but none It's effective and I admit that this design is giving me a hard time. Do you have any idea where I could start? A big thank you to you.
No description
30 Replies
clevermissfox
clevermissfox11mo ago
What have you tried ? Clip-path or possibly bg image with clip mask comes to mind
J0K3RY
J0K3RY11mo ago
J'ai essayer de partir de cette vidéo mais a mon niveau actuel ceci est compliquer https://www.youtube.com/watch?v=khjVPkO35F0
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...
capt_uhu
capt_uhu11mo ago
did something similar to this a couple of days ago maybe you can use it as a starting point: https://codepen.io/jsnkuhn/pen/BaMXaOg
glutonium
glutonium11mo ago
i always feel like these might be easier to do with sn svg for the cut and masking but i never managed to wrap my head around masking ;-;
Jochem
Jochem11mo ago
it's best to keep responses in English. We've got a few Francophones on the server, but most people don't speak French Cubiq's been working on somewhat similar stuff https://discord.com/channels/436251713830125568/448294302053957632/1186018784180445214 and https://discord.com/channels/436251713830125568/1185981691752370319
capt_uhu
capt_uhu11mo ago
lots of folks seem to be suggesting clipping/masking for these things. Please remember that clipping and masking are not just for creating shapes they are for clipping elements to those shapes. It would be easy to accidentally chop entire elements out of the design with clipping/masking.
clevermissfox
clevermissfox11mo ago
What do you mean clipping elements TO those shapes? Shape-outside can help too.
J0K3RY
J0K3RY11mo ago
first of all sorry for the answer in French I had copied the wrong translation, I thank you for your opinions and your answers I will try to start with jsn's answer and see if I can do this form because it gave me looks really complex to achieve if you have easier methods, I would gladly listen to you
capt_uhu
capt_uhu11mo ago
probably worth confirming for the OP that this is not really a beginner friendly design. But it does seem to be a design that's cropping up more and more this year. Also gave this a second try to simplify a bit more with some fake content and a slightly different approach: https://codepen.io/jsnkuhn/pen/PoLowgo?editors=1100
capt_uhu
capt_uhu11mo ago
Unless i'm missing something: shape-outside only has an effect on the placement of element text so i'm not sure how it would be useful here.
Jochem
Jochem11mo ago
this is not really a beginner friendly design
Definitely this, yeah
J0K3RY
J0K3RY11mo ago
Thank you for your help, I have tried several methods to make the shape in css but each time it is the rounded curves that give me a problem. I start with a rectangle then I also use a triangle and rounded corners but that does not work at all I am completely overwhelmed by this design and I confirm that it is not for a beginner, here are the different designs that I have to do on mobile and desktop and moreover I should re-use this shape on several cards as shown below so I am completely overwhelmed at the moment
No description
No description
No description
No description
clevermissfox
clevermissfox11mo ago
Can you share your code?
J0K3RY
J0K3RY11mo ago
yes here it is very bad and useless, I can't start from that and I have no idea I watch lots of videos but in the end I can't get the right result it becomes frustrating
J0K3RY
J0K3RY11mo ago
the best I have
J0K3RY
J0K3RY11mo ago
but I still don't have this curve on the left
clevermissfox
clevermissfox11mo ago
heres an example with a clipPatjh
J0K3RY
J0K3RY11mo ago
In reality I'm looking to make the big rectangle on top around it. I would use the container of the element with a border-radius. I'm still looking to make this curve on the left and a friend told me that it would be easier to do. do it in svg but as I have to reuse this element everywhere with transparency I know if the svg is a good idea. this left curve is complicated.
No description
Jochem
Jochem11mo ago
yeah, that slanted bit on the tab pretty much requires an SVG (or svg based CSS solution like clip path or whatever)
J0K3RY
J0K3RY11mo ago
My friend made this for me, can it be used in my case since I will have to reuse it several times on other elements which will be transparent, if I use masks in css I could use it matter where?
Jochem
Jochem11mo ago
I haven't used SVGs enough recently to be current on the syntax, so I'll leave answering tha tone to one of the others in here
clevermissfox
clevermissfox11mo ago
This is a pseudo element ontop around it instead of a clipPath on the white container. But okay good luck!
J0K3RY
J0K3RY11mo ago
I try to use the easiest method because it's the first time I'm confronted with a design like this and I can't do it and it frustrates me even the svg I can't use it because at the moment to resize it it doesn't fit I'm totally confused now.
clevermissfox
clevermissfox11mo ago
SVGs can be rough to work with
cubiq
cubiq11mo ago
i took this as a challenge a few days ago and wanted to find about as many ways on how to create such "meta-shape" effect. what i found out is that it really depends on the application and whether it is really important or not, each method has its pros and cons. the most reliable is using the gradient applied on the pseudo element, ive reverse engineered the way how daisyui made it and used it for my little card. https://daisyui.com/components/tab/#sizes https://codepen.io/thecubiq/full/xxMaGqK the problem of this method is that you cannot use it if you want to apply backdrop filter on that shape. in my case, blur so that the card was this glassmorphism-ish. that was the time when i went for custom svg shape way: https://codepen.io/thecubiq/pen/abXPvGz the effect is there and the compatibility is somewhat still fine. im not so sure about safari as their support for inline svgs is still weird. the most flexible way is using either svg mask or svg clip path. last but not least, the css filter as to apply filter blur on the main elements and then contrast on the parent element to once again create this gooey meta effect, that's also a way. svg goo filter: https://codepen.io/thecubiq/pen/NWoEJyz (responsive, breaks when backdrop blur) css filter: https://codepen.io/thecubiq/pen/abXQgNg (responsive, mix blend mode has to be applied so can be messy, no backdrop blur either) gradient pseudoelement: https://codepen.io/thecubiq/pen/WNPLbwW (great crossbrowser support, no background blur, harder to setup, reliable, unresponsive however) inline svg static clipmask: https://codepen.io/thecubiq/pen/abXPvGz (great one, poor support, no responsive) svg pattern mask: https://codepen.io/thecubiq/pen/eYxwzZz (poor support, limited responsiveness) svg filter mask: https://codepen.io/thecubiq/pen/qBgzyrP but my most favorite is using responsive svg filter mask: https://codepen.io/thecubiq/pen/LYqwRLM the great feature of this version is that you actually can easily set the corner radius which in my case was basically gamechanger. the support once again for mask-image along with inline svg however is still poor. it is expected to get better support within 2 to 4 months. as it's something that css devs are currently looking into. check out all the versions. there might be probably more ways so if you find any, make sure to ping me if you find better ones <3 have a great one <3
cubiq
cubiq11mo ago
just make sure to add some reaponsive padding so that it doesn't affect the functionality lol
clevermissfox
clevermissfox11mo ago
Clip-path: path() has 94% support and is good in all major browsers, for several versions now. It definitely can be responsive you just have to use the correct values to make it so. (Referred to as inline svg static clip mask in the comment above )
Want results from more Discord servers?
Add your server