How to build 5 clip-path hover effects // HTML & CSS
Learn to build 5 awesome clip-path hover effects in this in-depth episode about HTML & CSS and see how to
✔️ use the CSS clip-path property
✔️ make clip-paths smoothly transitionable
✔️ use the the :hover and :active pseudo classes
✔️ clip an element using the polygon clip-path function
✔️ clip an element using the circle clip-path function
✔️ clip an element using the ellipse clip-path function
⌨️ CODE ⌨️
https://codepen.io/crayon-code/pen/GR...
🖇️ USEFUL LINKS 🖇️
🔗 CSS clip-path on MDN https://developer.mozilla.org/en-US/d...
🔗 polygon, circle & ellipse on MDN https://developer.mozilla.org/en-US/d...
🔔 SUBSCRIBE & LIKE 🔔
▶️ / @crayoncode
⚙️ USEFUL VSCODE EXTENSIONS ⚙️
Live server: https://marketplace.visualstudio.com/...
Bracket Pair Colorizer: https://marketplace.visualstudio.com/...
⏱️ TIMESTAMPS ⏱️
00:00 Basic HTML Setup
01:42 Next Style
02:43 Dot Style
03:10 Sunrise Style
03:32 Slant Style
04:02 Liquid Style
👋 FOLLOW
📸 INSTAGRAM: / crayon_code
🏷️ HASHTAGS 🏷️
#html #css #clip-path #tutorial