How to build an unfolding tooltip with CSS clip-path // HTML & CSS in-depth
Learn to build a tooltip with an awesome unfolding effect effects using CSS clip-path in this in-depth episode about HTML & CSS and see how to
✔️ use the CSS clip-path property
✔️ make clip-paths smoothly transitionable
✔️ clip an element using the circle clip-path function
✔️ use the the :focus-within pseudo-class to make it work nicely on mobile devices
⌨️ CODE ⌨️
https://codepen.io/crayon-code/pen/ZE...
🖇️ USEFUL LINKS 🖇️
🔗 CSS custom properties / variables on MDN https://developer.mozilla.org/en-US/d...
🔗 CSS clip-path on MDN https://developer.mozilla.org/en-US/d...
🔗 circle clip-path on MDN https://developer.mozilla.org/en-US/d...
🔗 :focus-within pseudo-class on MDN https://developer.mozilla.org/en-US/d...
🔗 Complete guide to grid layout https://css-tricks.com/snippets/css/c...
🔔 SUBSCRIBE & LIKE 🔔
▶️ / @crayoncode
⚙️ USEFUL VSCODE EXTENSIONS ⚙️
Live server: https://marketplace.visualstudio.com/...
Bracket Pair Colorizer: https://marketplace.visualstudio.com/...
⏱️ TIMESTAMPS ⏱️
00:00 Markup
01:36 Variable Setup & Basic Styling
03:42 Trigger Styling
06:13 Content Positioning & Styling
09:51 Unfolding effect
12:20 Mobile Device Compatibility
13:16 Additional Trigger Styling
👋 FOLLOW
📸 INSTAGRAM: / crayon_code
🏷️ HASHTAGS 🏷️
#html #css #clippath #tutorial