DEV Community

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...

Read full post

𒎏Wii 🏳️‍⚧️ • Aug 6 '20 • 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>

Jhey Tompkins • Aug 6 '20

Yeah, same magic! 👍😎

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

Brian Douglas • Aug 5 '20

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

Jhey Tompkins • Aug 5 '20

Thank you!

Ha! If there's any that are troubling, feel free to ask me! 👍

Manyong'oments • Aug 6 '20

That Thanos simulator could defnitely make a cool 404 page

Jhey Tompkins • Aug 6 '20

Now there's an idea! 💡

Prajwal • Aug 6 '20

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

Arman Khan • Aug 6 '20

WOW!

Harika Yedidi • Aug 6 '20

So cool! Loved the Ship it and Thanos animations specifically 🙌🏻

Jhey Tompkins • Aug 6 '20

Ahh thank you! 🙏

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

Sergio Agosto • Aug 5 '20

Nice!