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.
Here are 10 unorthodox container designs that eschew the standard shapes and kick things up a notch in their own way.
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 stretches out over the full-width of the viewport can really benefit from doing something a bit different in terms of shape. The angled borders we see in this example are a nice way of creating a cool visual effect that doesn’t overwhelm the user. Subtle is usually better.
While we often use containers as places to hold content, they can also make for 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.
Diamond Navigation Menu
What I love about this series of diamond-shaped buttons is that 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.
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 one of those print effects 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 just has much more of a natural flow to it than one with standard squared-off text.
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.
A Badge of Honor
The good old badge is great for calling attention to a specific piece of content. However, we often see it used as an image. This example uses pure CSS (err, Sass) to create the same effect. What’s nice about this setup is that you could pair this up with a CMS like WordPress to make the contents of the badge dynamic. It looks great and would save plenty of Photoshop work.
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 are proof 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).
- 8 Code Snippets That Demonstrate the Power of CSS Grid
- Our 50 Favorite CSS Libraries, Frameworks and Tools from 2019
- Fun Examples of CSS Imitating Print Design
- Our 100 Favorite CSS Libraries, Frameworks and Tools from 2018
- 10 Handy CSS Grid Code Snippets
- Spread the Word: Beautiful Testimonial UI Examples