For the same side project I created the fully-responsive sticky note, I also created a hand-drawn border effect and animation:
The skewing of the border is achieved by using
border-radius: With the
/ notation, I can make the border look like it was drawn by the stroke of a pen.
The animation was a lot of effort. Using clip-path, I had to create five different polygons (one for each line and one for the content) and combine them, so only the borders are cut out. Using
min() I can work precisely around the content and guarantee that no bit of the border is left out, even with larger elements.
(The auto-animation in the CodePen is achieved by using
setInterval and toggling two classes that do the animation forward and in reverse.)
For good measure, here's my post about the sticky note:
📃 🖊️ Fully responsive HTML+CSS Sticky note
Pascal Thormeier ・ Sep 19 '20 ・ 2 min read
That's it, have a nice evening!
Top comments (0)