Issue #560

September 12, 2023

Type safe CSS design systems with @property

Adam Argyle explains how to use @propety to create smarter and more stable design systems.

Kevin Powell goes over the basics of how mixing colors in CSS works.

Watch video

From Our Sponsor

Timing: Automatic Time Tracking for Web Devs

More than just tracking. Gain insights into your work habits, balance multiple projects with ease, and see where time truly goes. Whether in Visual Studio Code or WebStorm, Timing will automatically track what you worked on. Experience a smarter approach to time management.

Download your free 30-day trial now and you’ll automatically receive a 10% discount on your first payment.

Articles & Tutorials

Gradients, Blend Modes, And A Really Cool Hover Effect

Preethi shows how to create a hover effect where hovering one item triggers visual changes to other items using CSS gradients.

(I’ve shown how to create a similar effect using :has() pseudo-class.)

Watch video

Web Components Accessibility FAQ

Manuel Matuzović created a fantastic catalog of all the essential questions and answers regarding Web Components accessibility.

Improving responsive data table UX with CSS

Timonwa Akintokun reviews some approaches you can take to optimize responsive data table UX with CSS.

Scroll shadows with animation-timeline

Dave Rupert shows how to create an effect of a shadow appearing when an element is overflowing as a hint that more content is available in a table.

CSS lobotomized owl selector: A modern guide

Sebastian Weber explores the lobotomized owl selector from a modern angle.

🎯 Precision Hiring, Premium Results!

Every project has unique needs, and Toptal understands that. Dive deep into our curated pool of world-class freelancers and find your perfect match today. Excellence is just a click away. ✨

Learn more

Tools

Flexer

Flexer is an online CSS playground that nicely visualizes how Flexbox works.

Check it out

Online Favicon Generator

A handy online tool that will help you generate favicons.

Check it out

Inspiration

Container Query Unit Pizza Toggle 🍕

Jhey Tompkins created a fascinating, interactive illustration using only CSS.

Get inspired

Until Next Week

Thank you so much for reading!

If you want to support this newsletter and my work, check out my other CSS-related projects:
• CSS Weekly YouTube Channel
• CSS Stickers

And if you still haven’t, check out my upcoming course Mastering Prettier & Stylelint. And use the coupon code SUBSCRIBER20 to get additional 20% off on the Masterclass package as a CSS Weekly subscriber.

Happy coding,
Zoran Jambor

Issue #559 Issue #561