GoodyBoy301

Hover for Fun! 🌈

If you know me, you definitely know that I can't resist playing with CSS pens. An hour ago, I saw this post by @nazaneyn where she attempts to create a button with a rainbow border. Here is my take on that 😄

Although I like @t_afif's first solution, I would prefer a solution where we don't need any extra elements. Fortunately, conic-gradients and CSS masks can help.

I ended up using hue-rotate() to rotate the gradient 😥

---

GoodyBoy301

Hand written SVG text animation

A little hand written text animation made with anime.js. The masking is a little rough but you get the idea :P.

A Pen by Matthew Ellis on CodePen.

License.

GoodyBoy301

Hamburger Icon Animations

12 hamburger icon animations

A Pen by GoodyBoy301 on CodePen.

License.

GoodyBoy301

Impossible Checkbox v2 🐻

Revisiting one of my favorite pens to update the React side of it and add sound

A Pen by Jhey on CodePen.

License.

GoodyBoy301

export default function useWindowResize(setWindowSize) {
  //accepts a setter function, setWindowsSize(useState()[1]),
  addEventListener("resize", () => {
    //adds a resize event
    setWindowSize({ x: window?.innerWidth, y: window.innerHeight });
    //done
    //associated getter returns {x,y} : width and height of viewport
  });
}

GoodyBoy301

CSS mouse-out transition effect

A Pen by Adam Argyle on CodePen.

License.