![]() |
Extruded container effect - Printable Version +- Sinisterly (https://sinister.ly) +-- Forum: Design (https://sinister.ly/Forum-Design) +--- Forum: Web Design (https://sinister.ly/Forum-Web-Design) +--- Thread: Extruded container effect (/Thread-Extruded-container-effect) |
Extruded container effect - Inori - 10-12-2017 A few weeks ago I was looking for a way to create a 3D, cube extruded-looking effect in place of a drop shadow or something similar, but found nothing and decided to create my own. It uses some basic CSS3 transformations to get the angled effect and a really cool tint function to "shade" the additional sides relative to the color of the container the effect applies to. The source is available on GitHub here, and below is an example of the code in use. The rest of the site (theme included) is a work in progress, don't pay attention to my shitty padding and buttons ![]() ![]() RE: Extruded container effect - phyrrus9 - 10-12-2017 (10-12-2017, 05:23 AM)Inori Wrote: A few weeks ago I was looking for a way to create a 3D, cube extruded-looking effect in place of a drop shadow or something similar, but found nothing and decided to create my own. It uses some basic CSS3 transformations to get the angled effect and a really cool tint function to "shade" the additional sides relative to the color of the container the effect applies to. That could be neat if you were developing some form of window manager. Windows being effectively slabs. RE: Extruded container effect - insidious - 10-12-2017 This is interesting...I'd like to see a website totally designed in this style to see how it comes out. If it embraces it in the correct way it could probably look pretty good RE: Extruded container effect - Boudica - 10-12-2017 I would also be curious to see how this could develop. I used to hate minimalist styles since win8 came out.. but people are getting much more innovative with simpler designs imo. |