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) 💖
ua-cam.com/users/FollowAndrew?s...
Live Scrimba Code: scrimba.com/scrim/cocf6487e99...
📢 Social Media 📢
TWITTER (@followandrewedu) ➞ / followandrewedu
#css #clippath #webdev

[@FollowAndrew]

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

[@luiszaragoza969]

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! :)

[@Lyonnais1985]

is it possible to do this invert? from inside out?

[@salentipy]

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?

[@ezeanichucks3728]

They are x, y coordinates. Each pair of numbers always start at the top-left of their containers and find their way around (depending on the value of x and y).
My explanation might need diagrams for you to further clearly understand, but trust me, it's an extremely simple concept once you get it

[@bengbeng2005]

you got a new subscriber Andrew thank you

[@colindante5164]

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. *)

[@bimokayoba]

i want a website to edit the clip path for css image online or an app for computer, please !

[@fixesdev]

Excellent video! how can I add an animation to it?

[@manojht8036]

You can't control width and height of clipping 😐
Anyone know any workaround for that ?

[@GraphicDabbles]

Very helpful. Thanks :)

[@ballonura]

Thx

[@MohamedHassan-tk5bq]

Do you use photoshop or Ai to make your thumbnails?

[@FollowAndrew]

Mostly PS

[@jssumon1918]

💞💕💕💞