Issue #575

January 23, 2024

12 Modern CSS One-Line Upgrades

Stephanie Eckles shares a number of handy CSS properties to start incorporating into your projects to reduce technical debt, remove JavaScript, and score easy wins for user experience.

Making CSS View Transitions Easy with Velvette

Noam Rosenthal demonstrates how to implement smooth CSS view-transitions effortlessly with the Velvette library.

Get actually helpful bug reports

Tired of unclear bug reports? Try Marker.io and collect website issues with screenshots, console logs, and session replay.

Try it now →

What Have I Been up To

Show Off Your CSS Stickers

I’m looking for some photos of CSS Stickers in the wild to showcase on the website. If you have already received your set, please send them to me so I can show them off!

Articles & Tutorials

My Take on Fading Content Using Transparent Gradients in CSS

Kilian Valkhof shows two ways to fade text content: mask-image and background-clip.

Nested Dark Mode via CSS Proximity

Jonathan Dallas shares how you can arbitrarily nest themes to any depth using CSS Custom Properties.

CSS Relative colors

Lucien Immink explains how you can use the from keyword to convert colors to different color spaces and change the color properties.

console.delight

Zach Saucier shows how you can render (limited) CSS, SVGs, and even HTML in console.log().

(I’ve created a video guide on the subject: Start Styling Your console.log() Messages in DevTools)

Accounting for Internationalization with CSS and HTML

Jenn Diaz explains how to achieve internalization using logical properties, CSS Writing Mode, the dir attribute, and the lang attribute.

(And here’s my In-Depth Guide to CSS Logical Properties.)

Build web apps better with MightyMeld, a visual React WYSIWYG IDE

Get ready to have a blast editing and styling components in your web apps with MightyMeld. It’s super user-friendly, simply drag and drop elements and it effortlessly injects the code as you go.

Get started for free today!

Tools

Harmony

Harmony is a Color Picker that computes harmonic colors along with the primary one. It supports Analogous, Triad, Tetradic, Complementary & Square harmonies.

Check it out