How can I create these "bezels" (for lack of a better word) that is shown throughout this design?
I have been given a static design in Adobe Illustrator where the designer has created these "bezels". The bezels are used in multiple places throughout the design and vary in size. I'm thinking I could create a different SVG for each of the different sized bezels, however I'm not sure how I can make these SVGs responsive? Would love some help pointing me in the right direction.
14 Replies
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
Just to follow up on @Posoroko s reply, you could also use the same trick of transparent borders by using pseudo elements to avoid the extra empty markup.
Here is an example using pseudo elements, I have also used custom properties and calculations to show how it could easily be adapted to each use case : https://codepen.io/cbolson/pen/XWyWWWO
wow thank you guys, really appreciate the replies
is it possible to make the diagonal lines curved like how it is in the design? (might be a bit hard to see with the image i posted)
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
hmm yeah thats why i was thinking SVG... but figured responsiveness would be an issue?
the heights differ throughout the design
yes, to do that you will have to get creative with SVGs.
You also have the issue with the opacity - I notice that in the capture some of the bezzled boxes have semi-transparent backgrounds.
(I have updated my pen with a background image and given the boxes some opacity)
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
ohhh yes, this sounds like a good approach for the curved ends
didnt think of doing it like that...
thank you both again!
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
FYI, SVGs can be made to stretch like rastor images if you add
preserveAspectRatio="none" to the SVG tagNice!
I hope you don't mind, and just to extend your suggestion, I have taken your SVG image and made a responsive version, again using pseudo elements and custom properties for the calculations.
https://codepen.io/cbolson/pen/QWJWwyR
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I don’t know if it would be better as an svg file. This was just the way I felt it would work best I order to create a reusable component. It quite possible would work just as well as file. I didn’t actually try 😀
I have just thrown some simple animation at it to see how well it holds up 😆
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View