CSS Clip Path Tutorial

Показать описание

Learn about the fancy CSS Clip Path property and how you can use that to clip (cover or hide) certain areas of images or other design elements. The CSS clip path property is even animatable, allowing for some real fancy user interactions and animations all from within CSS.

💖 SUBSCRIBE (Please) 💖

📢 Social Media 📢

#css #clippath #webdev

FollowAndrew

Рекомендации по теме

Комментарии

Half way there! Part 10 of 21 for the 21 CSS Tips for 2021!

FollowAndrew

Thanks for taking the time to do a tutorial! It would be a lot more beneficial if you explained what each of the numbers/percentages mean in the clip-path. As it stands, watching this, I didn't know what 0% 100%, 30% 0, etc... meant. 0% of what where? 100% of what where? etc. Is this something that one should just know or be able to easily discern?

salentipy

Thanks for the tutorial Andrew, it got me going in the right direction.

In case you do not have this information available, the overflow attribute is also beneficial in achieving a similar outcome. In addition, it is possible to maintain the original document flow using the position: relative attribute.

In essence, Clip Path kind of screws up document flow, whereas overflow enables you to trim everything that exceeds the boundaries of your container. For anyone that is trying to use pictures in their sites, I recommend the overflow attribute paired with position: relative! :)

luiszaragoza

Just a heads up to the folks that stumble on this tutorial that both image tags are referenced to the clip path with class attributes and the workaround for applying a drop shadow is to use the "filter" attribute. *)

colindante