Dear Friend,
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.
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)
Table of Contents
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)
From our sponsor
Build In-Demand Skills In Northwestern's Online MS In Information Design And Strategy
Earn your master's degree online.
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)
From our sponsor
You Do Good Design. They Do Good Coding. Definitely Try htmlBurger!
We know you are great at design and maybe coding too. But why don't you hire coding experts to manage the whole web development process for you, so you could focus on scaling your business or career? Get started with a pilot test on htmlBurger.com and see for yourself.
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)
8. New On Smashing Job Board
9. Our Current Most Popular Articles
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
0 коммент.: