September 28, 2021 Smashing Newsletter: Issue #320
This newsletter issue was sent out to 178,639 subscribers on Tuesday, September 28, 2021.
Editorial
Just a few years ago, we used to wonder how slowly CSS has been evolving compared to JavaScript. The times have changed now. With new CSS layout methods, logical sizing functions, new selectors, CSS container queries, and everything from scrolling margins to form accent colors, CSS has improved dramatically, and it seems to be getting better every day.
In this issue, we celebrate shiny new CSS techniques and features. We’ll look into richer, life-like CSS shadows, animation, better form outlines, responsive background images, clip-path and multi-line background gradients.
Also, just a quick reminder to join us for our free upcoming online meet-up on web performance this Thu, Sep 30th, at 9:00 AM PDT / 6:00 PM CET. We’re happy to invite Tammy Everts, Addy Osmani and Robin Marx for sessions on web performance culture, image optimization and HTTP/3. Register for free, and see you there!
In the meantime, happy CSS refining, everyone! :-)
— Vitaly (@smashingmag)
1. Richer, Life-Like Shadows With CSS
Shadows help convey meaning and add extra value to a UI. However, a lot of shadows that we see on the web these days don’t use their full potential. Let’s change that!
A comprehensive deep-dive into all things shadows comes from Rob O’Leary. His article on CSS Tricks explores how light affects shadows and how to define a light source — the foundation to creating authentic shadow effects. Once that base is set, you’ll learn how to use shadows to evoke depth, elevate elements, and inset them, how to layer shadows, and, of course, which CSS property to use for which use case. Rob also takes a look at the accessibility and performance implications that shadows bring along, as well as how to animate them.
Another fantastic article on the topic comes from Josh W Comeau. To put an end to those “fuzzy grey boxes that don’t really look much like shadows”, as Josh describes the current state of most shadows on the web, he shows how to transform box-shadows into beautiful, life-like ones. A little detail that makes any UI a lot more tactile. (cm)
2. The Surprising Things That CSS Can Animate
When you think of animating CSS properties, which ones come to your mind? Will Boyd looked at the question from a different perspective and decided to explore the properties that don’t come to mind immediately, the ones that aren’t typically associated with animation, but turn out to be animatable.
In his post “The Surprising Things That CSS Can Animate”, Will dives deep into these unexpectedly animatable properties — and, of course, the nifty things you can do by animating them. z-index, for example, can be used for layered animations, opacity helps you fade out a modal just with CSS. A great reminder of how powerful CSS is. (cm)
3. Form Field Focus Without Outlines
Who said forms need to be boring? Hakim El Hattab created a demo that proves that even something as simple as a form asking for name, email, and password is an occasion to think outside the box and cater for a spark of delight.
To achieve that, Hakim combines form focus and validation in a subtle yet surprising animation that gets by without any focus outlines on the fields themselves. Instead, a dot marks the field that is focused. When the focus switches to another field, the animation is triggered, and the dot jumps to the new active field, drawing a connection between the two. Form field validation is also integrated seamlessly, with the dot expanding and showing a checkmark. If you’d like to dive deeper into the code, Hakim also published a demo on Codepen. Inspiring! (cm)
4. Upcoming Front-End & UX Workshops
You might have heard it: we run online workshops around front-end and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s an overview of our upcoming workshops:
- Accessible Front-End Patterns Masterclass Dev
with Carie Fisher. September 30 – October 14. - Designing Landing Pages That Sell Design
with Rob Hope. October 5–19. - Level-Up With Modern CSS Dev
with Stephanie Eckles. October 5–20. - Jump to all online workshops →
5. Improving Image Performance With image-set()
Have you heard of image-set() already? You can think of it as a CSS background equivalent to the HTML srcset attribute for img tags. Chromium-based browsers and Safari have supported it for some years now, Firefox followed just recently. Ollie Williams takes a look at what we can and what we can’t do with it today.
As Ollie describes, one use case for image-set() is to provide multiple resolutions of a background image and leave it to the browser to decide which image is served to a user — a high-res version for users on fancy devices and a lower-res image for those on slow connections or screens with a lower pixel density, for example.
Another very promising use case is still lacking browser support, unfortunately: the idea to use new image formats like AVIF, WebP, or HEIF while adding a fallback for older browsers. If you want to achieve something like that already today and don’t need background-image, the <picture> element might be an alternative worth considering, as Ollie suggests. A great read to help you improve image performance. (cm)
6. Clip-Path Pop-Out Effect
With clip-path: path() supported by major browsers, it’s time to get creative. Mikael Ainalem shows a beautiful use case for the rather new feature: a buttery-smooth pop-out effect.
Mikael uses clip-path: path() to set a photo of a person apart from its circle-shaped background. As you hover over it, the person seems to rise from the inside of the circle, creating a cool 3D impression. Perfect for “About Us” pages. (cm)
7. Multi-Line Background Gradient
Some things might seem impossible to do with CSS — well, until someone finds a hack to make it happen. Like in this case: Can you achieve a multi-line padded text with a gradient that doesn’t reset for each line?
Yes, as Matthias Ott shows. Matthias’ solution is a bit hacky, but it leads to the desired result thanks to a pseudo-element that is added on top of the text. An interesting idea to tinker with. (cm)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.