Awesome UI Interactions with the CSS Clip Path Property

Hey all! Today, we're going to take a close look at the CSS clip-path property. Specifically, we'll take a look at 3 different examples of how to use clip-path to create a micro interaction that reveals a card of information.

Codepen demo:

Let's get started!

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

What have you done with clip-path? Show me!

[SocksWithSandals]

I've been doing front end for 15 years and never heard of clip path before.
Never too old to learn!

[mathiasebner]

Love the video, pls do more UI interactions and aimations, it's so fun!

[ericpodhorecki]

just go straight to 5:45... that's where the clip-path comes in... good vid as always..

[whle]

It never ceases to amaze me how powerful CSS can be. Setting this up with JS must be a nightmare... As always, great video!

[wgalloPT]

Honestly, KISS principle applies tutorial, thank you...

[jackb]

Use box-sizing: border-box; over width: calc(100% - 2em); This will take padding in to account when calculating widths. You don't want to be duplicating your code. Keep it DRY!

[yusi]

How does youtube know what I need to watch suddenly? Thx a lot for this Gary 😄

[EzequielRegaldo]

Hi ! thanks for your videos :D u can use "place-items: center" instead "justify-items and align-items" or "place-items: start auto" for example if u want to combine both

[rajitgupta]

The fact that you are making tutorials on responsive css already made me sub😊


Keep up the good work!

[casiothestrong]

@DesignCourse, why would you transition color of the span instead of opacity?

Browsers recalculate a lot of layout information for all CSS properties except for opacity and transform. Those two properties are utilized in the Paint method of a browser so it's FAR less taxing on the computer/mobile device.

Another way to optimzie the transitions/animations of your elements would be to use the 'will-change' property which is supported by most major browsers to tell the browser itself to optimize those transitions. This will ensure a smoother and less taxing UI for computer and mobile users.

Just want to share this for all up-coming developers who want to learn the best practices.

PS: Great tutorial. I love this concept behind this element.

[CtheCity]

Amazing, didn't know so much was possible without any real coding like JavaScript or jQuery. Thanks!

[wrends]

wow! i've been searching for this so long...thank you sir!

[HikwaMehluli]

Always wanted to try clip path but never got around to it. Thank you for this, straightforward explanation & inspiring tutorial. ❤️ from 🇿🇼

[mdwebdevelopment]

The best ever design content I have found on youtube.

[blendjams]

With grid you can use place items, which is a combination of both justify and align items

[Horoe]

This is the first video I watched about sass and my brain is fried.

[quentinli]

i really like that circle part. thanks sir

[stevenwilson]

Love your videos. clean and easy to follow and they are well presented in efficient manner. Also your sound is good which is always appreciated or more unappreciated when sound is bad haha. Cheers

[coldqueen]

This is amazing! Please do more animations like this. I want to try making this with click event and add it to a div which already contains a paragraph.