DEV Community

Cover image for Awesome things for awesome people - July 2020

Awesome things for awesome people - July 2020

Jhey Tompkins on August 05, 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 tha...
Collapse
 
darkwiiplayer profile image
๐’ŽWii ๐Ÿณ๏ธโ€โšง๏ธ • Edited

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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
jh3y profile image
Jhey Tompkins

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

Now there's an idea! ๐Ÿ’ก

Collapse
 
patroclo404 profile image
Sergio Agosto

Nice!

Collapse
 
iarmankhan profile image
Arman Khan

WOW!

Collapse
 
harikayedidi profile image
Harika Yedidi

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

Collapse
 
jh3y profile image
Jhey Tompkins

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

Thank you!

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

Collapse
 
kgprajwal profile image
Prajwal

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