DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Awesome things for awesome people - July 2020
Jhey Tompkins
Jhey Tompkins

Posted on

Awesome things for awesome people - July 2020

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.


Wanna see more? Reach out and say "Hi!" on Twitter!

Top comments (11)

Collapse
 
darkwiiplayer profile image
๐’ŠฉWii ๐Ÿ’–๐Ÿ’›๐Ÿ’š๐Ÿ’™๐Ÿ’œ๐Ÿ’๐Ÿ’Ÿ • Edited on

Use HSL && scoped CSS variables to prototype UI

Sounds like what I did here ๐Ÿ‘

I'm probably taking it a bit too far though

<section style="--base-hue: 210deg; --saturation: 80%; --offset: calc(360deg / 12)">
   <div class="colors" style="--saturation: 68%; --hue: calc(var(--base-hue) + var(--offset));">
   </div>
</section>
Collapse
 
jh3y profile image
Jhey Tompkins Author

Yeah, same magic! ๐Ÿ‘๐Ÿ˜Ž

I often use it inline with HTML for creating random experiences with animations, etc.

Collapse
 
33nano profile image
Manyong'oments

That Thanos simulator could defnitely make a cool 404 page

Collapse
 
jh3y profile image
Jhey Tompkins Author

Now there's an idea! ๐Ÿ’ก

Collapse
 
patroclo404 profile image
Sergio Agosto

Nice!

Collapse
 
harikayedidi profile image
Harika Yedidi

So cool! Loved the Ship it and Thanos animations specifically ๐Ÿ™Œ๐Ÿป

Collapse
 
jh3y profile image
Jhey Tompkins Author

Ahh thank you! ๐Ÿ™

Yeah, I was very happy with how the Thanos one came out.

Collapse
 
bdougieyo profile image
Brian Douglas

Excellent work, now my day is going to be filled with dissecting how you did all these.

Collapse
 
jh3y profile image
Jhey Tompkins Author

Thank you!

Ha! If there's any that are troubling, feel free to ask me! ๐Ÿ‘

Collapse
 
kgprajwal profile image
K G Prajwal

This is so cool! Thank you for this amazing post!

Collapse
 
iarmankhan profile image
Arman Khan

WOW!

Classic DEV Post:

caching

Web Caching Explained by Buying Milk at the Supermarket