clip-path : An Awesome CSS Property You Should Be Using

clip-path : An Awesome CSS Property You Should Be Using

Hey friend! You must have heard of the clip-path property in css. No? Then you might be in for a treat. If yes wouldn?t you agree that it?s quite awesome and I would assume you landed here wondering where you could use it in your application. Here I?ll give a few use-cases with examples that would help you get started with using clip-path property in your application and the rest you can easily figure out.

The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

By the definition you must be wondering it must be used for clipping images. Yup you could definitely clip the images using the clip-path property and I think most probably people have been using it as an alternative to using border-radius property to make circular images like that in avatars.

Image for post

But you could do a lot more!

<clipPath>

Image for post

With <clipPath/> you can define a custom path for applying the clip-path property. So yeah we can do a lot more than circles and polygons with it.

Image for post

Card

Image for post

If you have used dribbble, you?ve seen the hover effect where you see the buttons on the cards when you hover on them. You can achieve the similar effect with clip-path by using the inset property.

Image for post

Hence it can be used as an alternative to the translate property. A different way of animating in HTML isn?t it?

Ripple

Do you remember the ripple effect in buttons that had all the hype back some years ago. That can be easily achieved by using clip-path property.

Image for post

Just add a transition of clip-path property with circle value changing from 0% to 100% on hover event and you could achieve it easily without breaking a sweat.

Image for post

Floating Action Button

Image for post

This is something I saw on the internet being used as an application of the clip-path property and found quite interactive which can be achieved the same way the ripple effect was carried out.

Polygons

Image for post

By now it must have been obvious to you that you can define custom shapes as values to the clip-path property. But writing custom polygons is hard so you could use online tools to define the polygon instead of spending hours trying to set values to write the polygon. Here?s one that you could use:

Clippy – CSS clip-path maker

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle?

bennettfeely.com

There are numerous properties in CSS that we might be unaware of and this is just my take on how we could use one of them.Hope it helped you think of other ways you could use clip-path property in your application or how you could integrate one of my examples in it.That?s all for now folks. Keep on dreaming! 🙂

10

No Responses

Write a response