Because not everyone signs up to my newsletter.
Here's a roundup of some of the things I made in July π
CSS 3D Toaster
Tap to flip that toast! And there are some hidden features here too!
Use HSL && scoped CSS variables to prototype UI
A small demo showing how to leverage HSL && CSS variables to rapidly prototype UI components.
You can check out a video walkthrough here.
An animated single div tree!
An animated tree built with Pxl.
And here's the apple!
OctoBear
Saw a lot of custom OctoCats in July. So I made this abomination!
Ship it!
Another GreenSock button to add to the collection π Click this one for some fun animation. Sound on.
BRB
Finally created a BRB scene for my live stream.
Image reveals with CSS filter && clip-path
Create "fancy" image hover reveals combining these two properties π
Rambear
No words. Rambear has been deployed to help fire out code.
No div truck
A little tongue in cheek perhaps. But, after seeing lots of single div, it was time for a "No div". The scene is built using the pseudo-elements on the body
tag.
CSS is Cake!
Tap each slice to reveal something different.
CSS Monument
It was a bit of a 3D CSS month.
Slick animated underlines with CSS
These are neat. If you need something a little different for your project. I have a walkthrough here.
CSS Cyberpunk buttons
We attempted to make some Cyberpunk-esque buttons on the stream by digging around the site.
Thanos simulator with canvas
Tap or click your fingers(Make a noise near your mic π ) to make half the people disappear!
Animated Google Fonts
You can now grab variable fonts out of Google Fonts! That brings many benefits. But, one fun thing is animating the axis on a font π
I also put together an article about this.
CSS Animated Google Fonts
Jhey Tompkins γ» Jul 2 '20 γ» 3 min read
Wanna see more? Reach out and say "Hi!" on Twitter!