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-thickness quite reliably today.
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
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)
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)
CSS comparison functions
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
clamp() in which she shows how using a list of values can benefit element resizing, fluid typography, and proper spacing. Good to know! (cm)
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’! ;-)
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)
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”.
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)
- Next.js Boilerplates and Guides
- CSS Global Resets, Gradients and Transitions
- Interface Design Patterns
- Web Performance Optimization
- Designing and Building Dark Mode
- CSS Tools, CSS Data Charts and Fluid Typography
- Front-End Accessibility
- Color Palettes Generators and Tools
- Front-End Boilerplates and Starter Kits
- VS Code Extensions
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.