Smashing Newsletter: Issue #283

Editorial

CSS is evolving so quickly that it might be quite difficult to wrap your head around all the changes coming to browsers nearby. Remember all the quirky techniques to design perfect link underlines, with a combination of background-image and transparent text-shadow? In fact, we are using exactly them on Smashing! Well, we are actually refactoring this solution as we speak, just because we can use text-decoration-skip-ink and text-decoration-thickness quite reliably today.

Performance outcome from early 2020 to November 2020.

But we can also do so many other things! So in this issue, we’re highlighting some of the useful techniques around CSS — things we can do with CSS custom properties, better filters, CSS clamp(), hexagonal CSS grid and other code tidbits. You might also find more CSS techniques in our annual front-end performance checklist 2021 that we published yesterday.

And if you’re interested in CSS Grid, we have a lovely online workshop with Rachel Andrew on everything CSS Grid coming up in February this year. So, let’s dive into CSS!

— Vitaly (@smashingmag)

Pure CSS Netflix Animation
Understanding CSS Variables
Real-Life Uses For CSS Comparison Functions
Upcoming Front-End & UX Workshops
Building A Hexagonal Grid
Never Stop Learning
Inspiring Houdini Paint Worklets

1. Pure CSS Netflix Animation

You probably know the Netflix intro animation with the signature “N” fading into differently-colored lights, right? Claudio Bonfati recreated the animation with pure CSS, no JavaScript involved.

If you want to dive deeper into the development process and how Claudio tackled the challenging task, he summarized his development process step by step — from mapping out the basic HTML structure of the logo to conciliating the different parts of the animation to be played at exactly the time they should be. An inspiring example of what CSS animation is capable of. (cm)

2. Understanding CSS Variables

CSS variables are powerful. They cascade normally, inherit, make it possible to reuse code, and they are extremely permissive. But what can you actually put in a CSS variable to make full use of its potential? Since some of the things aren’t that obvious, Will Boyd explored the possibilities in a blog post.

From unit values to pre-defined keywords, content strings, images, and even fancy animated values, Will’s summary shines a light on the most common things that you might want to use in combination with a CSS variable. A great overview. (cm)

3. Real-Life Uses For CSS Comparison Functions

CSS comparison functions min(), max(), and clamp() are today supported in all major browsers, providing us with an effective way to create dynamic layouts and more flexible design components. You can use them for container sizes, font size, padding, and much more.

To get you fit for using the functions in your projects right away, Ahmad Shadeed explains everything you need to know, backed up by practical examples and use cases and including all the points of confusion you might encounter. Una Kravets also dedicated an article to min(), max(), and clamp() in which she shows how using a list of values can benefit element resizing, fluid typography, and proper spacing. Good to know! (cm)

4. Upcoming Front-End & UX Workshops

CSS is awesome, and we can get better at it by learning together. So as it happens, we have some friendly online front-end & UX workshops dedicated to CSSform design, SVG animation, design systems, HTML email and front-end in 2021.

Our workshops are packed with practical examples, video recordings and friendly Q&A sessions. Each and every workshop has been a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — just sayin’! ;-)

5. Building A Hexagonal Grid

Let’s push the borders of the grid! Jesse Breneman was chasing the idea of using CSS grid to build an interconnected hexagonal grid with hexagons that fit together seamlessly. It had to respect grid-gap or allow for gutters of some kind, be flexible so that you can throw a new item into it without breaking anything, and it needed to be responsive.

If you want to tinker with the idea, Jesse shares an in-depth writeup in which he breaks down how he achieved the result step by step, from mapping out the HTML as a list to the challenging part of figuring out the columns and shaping the hexagons. That’s thinking out of the box taken quite literally. (cm)

6. Never Stop Learning

Learning never stops. And since it’s often the little insights, code tidbits, and tips that turn out to be the most useful, Stefan Judis started “Today I Learned”.

Whether it’s the awareness that SVG filters can be inlined in CSS or how to tell browsers that your site supports color schemes, for each little thing he learned, Stefan shares a brief summary — not only related to CSS but also accessibility, bash, git, GraphQL, HTML, JavaScript, and much more. Samantha Ming’s code tidbits are also a treasure chest of quick but invaluable web dev wisdom that is bound to make your live easier. (cm)

7. Inspiring Houdini Paint Worklets

Houdini is a set of low-level browser APIs that give you direct access to the CSS Object Model and enable you to write code which the browser can parse as CSS. If you’re already a bit more familiar with the concept, you might have heard of Paint Worklets already. They offer a way to draw images that dynamically respond to changes in the CSS.

To dive deeper into how worklets work, Houdini.how features some nice Paint Worklets to experiment with: sparkly backgrounds, confetti, powdered gradients, underlines, tooltips, and more. A tutorial helps you get everything up and running and a polyfill irons out missing support in Firefox and Safari. And if you need more Houdini in your life, CSS Houdini Rocks has got your back, too. (cm)

January 12, 2021 Smashing Newsletter: Issue #283

Previous Issues