Sometimes it feels like we have a lack of creativity when it comes to building CSS containers. They’re either round, somewhat round, square, or rectangular. They get the job done but aren’t especially unique or exciting.
But with modern CSS and an occasional dash of JavaScript, we can design containers that really stand out amongst the circles and squares. In fact, taking a short jaunt through CodePen provides plenty of inspiration in this area.
Here are 10 unorthodox container designs that eschew the standard shapes and kick things up a notch in their own way.
Notched Boxes
Chris Coyier of CSS-Tricks fame built this example that, while subtle, offers a much fresher take on the standard box. By simply angling off the sharp edges, we have a more nuanced look. This type of effect provides a much more artistic feel while maintaining usability.
Angled Full-Width Image
Images (or any container) that stretch out over the viewport’s full width can really benefit from doing something a bit different in terms of shape. In this example, the angled borders we see are a nice way of creating a cool visual effect that doesn’t overwhelm the user. Subtle is usually better.
Accent Containers
While we often use containers as places to hold content, they can also make nice design accents. Take this example, where a few shifts of CSS border-radius create an interesting effect that also complements the content below.
Windows (Not That Kind)
CSS clipping paths can do some amazing things. They bring one of the staples of print design into a more interactive medium. Here, we have a clip-path used to create a window-shaped effect around a set of images – complete with beautiful hover animation.
I love this series of diamond-shaped buttons because they turn what could be boring (a collection of navigation links) into something unique. While this may not be 100% simple to maintain in the long-term (adding items would require more CSS), it shows that you don’t have to settle for ordinary.
Diagonal Animation
As they say, why not make your entire page a non-standard shape? Okay, they probably don’t say that. But here we have an example of someone who did create a full-screen animation that bends along with your cursor position. One practical use might be to allow users to “reveal” an object hidden underneath.
The Famous Exploding Polygons
Polygon shapes are being used quite often in web design, but not necessarily in the same way as this example. Here they are used to build a letter (“J,” in this case) that explodes as you hover over it. It makes for an interesting logo and can add a bit of unexpected fun to a website.
A Curvaceous Container
Shaping text around an image is another print effect that isn’t quite so easy to port over to the web. It takes some extra effort, but here’s a look at how stunning it can be. The whole container has much more of a natural flow than one with standard squared-off text.
Corner Shaping
Buttons are another element where we too often settle for standard shapes. But in the right setting, something different can be quite welcome. These buttons not only have various notched-corners, but they also offer a shape-shifting hover animation as well.
The Shape of Things to Come
The use of shaped containers can open up the doors to all kinds of creative looks and layouts. And with the advent of techniques such as CSS Grid, it’s now possible to implement shapes on a much larger scale.
While the examples above may not be a perfect fit for every use case, they prove that the web is slowly but surely moving beyond the basics. So, for your next project, try to literally think outside the box (or circle).
Related Topics
Top