8 CSS Items That Would Give Life a Cremorphism

We web designers certainly love design trends. Neumorphism, Glassmorphism, and now… Claymorphism. Look interesting and add “morphism” to the end – that’s how we roll.

So what is Claymorphism? It’s a bit retro with a hint of Mixed Content Design in. These elements usually have rounded corners as well as beveled edges. The result is a soft-detailed 3D shape that practically jumps off the screen.

In some ways, it is reminiscent of the ultra-thick images used in the 1990s. This time only, Photoshop designers do not need to open it. Instead, everything you need is available through the SEC.

If you are looking to use Claymorphic elements in your designs, you have come to the right place. We’ve put together eight fun examples that are shaped by creativity (see what we did then?) – enjoy!

Interface Designs by Brandon Caples

Having trouble keeping track of design trends? This helpful snippet provides you with labeled examples – including Claymorphism. You may want to print this out and keep it for future reference.

Check out the Pen UI Designs by Brandon Caples

Claymorphism in User Interfaces by Shahzod Tojiyev

UI cards seem to be everywhere these days. They provide an effective way of standing up for similar items of material. Here, Claymorphism is used to provide an extra impact without being overly visual. The blue glow around the individual elements is a nice touch.

See the Pen Claymorphism in User Interfaces by Shakhzod Tojiyev

Ventilo at Bailh

This section demonstrates that Claymorphism can transcend static elements. Here, 3D shapes fly around the screen in a confetti-like animation. JavaScript powers the movement, but the clay adds to the overall aesthetic.

Look at the Ventilo Pen with Bailh

Claymorphic Panel * (Responsive, CSS Only) and Mozzarella

The examples of design trends we share will usually focus on one element. But it’s interesting to find a full – fledged, content – oriented screen. This panel design includes buttons, cards and even a hero image. Be sure to check out the beautiful hover effects as well.

View the Claymorphic Pen Desktop * (Responsive, CSS Only) by MOZZARELLA

Claymorphism Form Component by Albert

Here is a real life example of a Claymorphic container containing a form. Imagine this being used in a sidebar or maybe even a modal window. The effect is subtle – making it a perfect fit for a business website.

See Albert Claymorphism Form Component by Albert

Claymorphism and Preethi

While there is nothing fancy about this fragment, it does offer a look at how this trend might be applied to an alert message. There is something to be said for simplicity here. It grabs your attention, but in a friendly way (the emoji doesn’t hurt, either).

See the Pen Claymorphism with Preethi

tear and Ward Larson

We found a couple of developers who were keen to combine Claymorphism with another trendy look. This one pairs the newbie with Glassmorphism, resulting in an ultra-cool UI. The semi-transparent glass container goes beautifully with the ready-beveled button.

Look at the Wip Pen with Ward Larson

Untitled by Scott Shields

The title of this cut may not be inspiring – but the work itself has a lot of meaning. It uses Clay.css, a framework that adds Claymorphism to design elements. This is perhaps the quickest solution for those who want to dive first in this style.

See the Untitled Pen by SS

Better Design through Clay

At first glance, Claymorphism may seem a little mild and silly. And it’s certainly capable of that kind of aesthetic. However, there is the potential to go deeper.

When used with a bit of subtlety, the style could be just the thing that liven up any type of website. It helps to create a natural separation between design elements (like cards) and creates a more intuitive UI (3D buttons). That could benefit everyone from bloggers to retailers and beyond.

Looking for more Claymorphism clips? Take a look at our CodePen collection!

Source link

By LocalBizWebsiteDesign

Leave a Reply

Your email address will not be published. Required fields are marked *