Smashing Newsletter: Issue #386

Editorial

2023 is here, a new year with new hopes, new goals and new experiences. And as we’re diving into the new year, we’d like to send you a lot of positive energy and optimism in hopes that 2023 will bring us all peace, stability, calmness and plenty of wonderful and unforgettable memories of that year. Good memories, with a lot of fun, laughter, and human kindness shared with your family and friends. It’s about time.

In this very first edition of the newsletter this year, we’d love to start with something that’s always been very close to our hearts: CSS. Below you’ll find a few useful CSS techniques that hopefully will help you resolve some of your UI troubles.

And perhaps as a good start to the year, let’s begin with an act of kindness. Send a word of support to everybody who needs it, send a kind message or make somebody smile, or tell them how much you love and appreciate them. And: don’t forget to reserve time for yourself in your calendar before it gets blocked with all the meetings.

Have a good one, everyone!

— Vitaly (@vitalyf)

1. Skewed Highlights With CSS

So you need to design a “highlighter” effect using only CSS while adapting to text changes. How would you go around building it? In his tutorial on Skewed Highlight, Vadim Makeev describes a simple way to make it work.

Vadim suggests using the <mark> element, with side angles achieved with CSS gradients: left and right rectangles with a diagonal gradient and a part in between with just a fill. And if the text wraps onto multiple lines, we can use box-decoration-break: clone, so every line of the <mark> element is decorated like its own element. Solved! And it looks fantastic! (vf)

2. Tree Views In CSS

We all had to create a tree view at some point: a collapsible list with nested accordions resembling a file folder structure. Typically we would use JavaScript to make it work, but as it turns out, that’s really not necessary.

In CSS Tree Views, Kate Rose Morley provides a tutorial on how to make the tree view work with a few simple nested lists and <details>/<summary> inside of each list item. Screen readers will understand the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically. Et voila! (vf)

3. Overlaps In CSS

So your designer wants stuff to overlap. Perhaps it’s a few boxes that belong together, but one needs to live on top of another. Or maybe you have boxes stacked atop boxes next to boxes nested within boxes. That’s the trouble that Hui Jing has run into. And she decided to figure it out once and for good.

In her article, Hui Jing explored various options to get things just right, from negative margins and translation using transform to absolute positioning and CSS Grid. In the end, the easiest way to reason with layout seemed to be CSS Grid, with each item not “disturbing” others on the grid, and we can use the box-alignment properties to adjust them within their allocated spaces. (vf)

4. Upcoming SmashingConfs And Workshops

Every year we bring bright and kind people who care about the web to share what they’ve learned. For 2023, we can’t wait to welcome you to SmashingConf Freiburg 2023 (Sep 4–6, 2023) with adventures into design systems, accessibility, CSS/JS and interface design patterns. Get your early-bird ticket!

We’re also very excited about our very first SmashingConf Front-End @ SF 2023 (May 23–26, 2023), entirely focused on cutting-edge front-end. From accessibility and advanced CSS to JavaScript gems and web performance. With a dash of Tailwind, Next.js and TypeScript. Get your early-bird ticket!

As always, here’s an overview of our upcoming workshops:

Successful Design Systems Workflow
with Brad Frost. Jan 10–24
Designing For Complex UI Masterclass UX
with Vitaly Friedman. Jan 19 – Feb 2
New Front-End Adventures, 2023 Edition DEV
with Vitaly Friedman. Feb 8–22
Universal Principles of Typography Masterclass UX
with Elliot Jay Stocks. Mar 2–16
Interface Design Patterns UX Training UX
with Vitaly Friedman. Mar 10 – Apr 7
Smart Interface Design Patterns (Videos) UX
9h-video + UX training with Vitaly Friedman
Jump to all workshops →

5. CSS Blend Modes

Blending modes are a way of creating new colors based on two input colors, a foreground color, and a background color. There are plenty of options out there, but how exactly would we apply them in CSS?

In his post, Scott Vandehey shows how to create some nifty effects with CSS blend modes by using radial gradients, a layered breakdown approach for filters, and then applying mix-blend mode to the result. Michelle Barker highlights more visual effects in CSS Halftone patterns, too. (vf)

6. Twelve Days Of Web

A celebration of CSS has just wrapped up on 12 Days of Web. It’s a lovely project curated by Stephanie Eckles every year to highlight the wonders of CSS. This year, there is quite a menu: from new viewport units and CSS image() to cascade layers, CSS scroll snap, :has() and CSS subgrid.

All articles come with ready-to-use demos and detailed tutorials, and Stephanie also reviews exciting additions to CSS that became fully or nearly cross-browser in 2022: container queries, :focus-visible, accent-color, overscroll-behavior, and (almost there!) subgrid! The article also highlights references to articles to get started. What a time to write CSS! (vf)

7. CSS Style Queries

With container queries available in the browsers already, we might settle down and get used to replacing media queries with container queries and call it a day. But not so fast. Recently, the Chrome team released experimental support for a new proposed CSS spec and style queries. And it might be quite a game-changer, too.

CSS style queries allow us to query a container based on its style rather than just its size, e.g. we could check if the container is a Flexbox and then style the child based on that. Or we could adjust the color of a headline if it lives on top of a dark photo. In CSS Container Style Queries, Ahmad Shadeed goes through a few use cases and shows how to use style queries.

There are plenty of fine details covered by Una Kravets in her article Style Queries, too. Browser support? Currently still considered to be experimental and is only implemented in Chrome Canary. (vf)

8. CSS Mesher

Who doesn’t like a lovely gradient? Or perhaps even a palette of gradients that would make up a beautiful mesh gradients mess, only with CSS? CSS Mesher allows you to choose a randomly generated CSS mesh or finetune the colors to create a perfect custom one.

And if you need a few more generators for all your visual needs, SVG Generators and CSS Generators are handy little round-ups we prepared a while back, featuring everything from doodle patterns and text warping to perfect shadows and funky border-radii! Ones for the bookmarks! (vf)

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

January 3, 2023 Smashing Newsletter: Issue #386

Previous Issues