Zdravo Smashing Friends,

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.

Speakers at Smashing Meets: Addy Osmani, Robin Marx and Tammy Everts, with your host Vitaly Friedman. This Thu, Sep 30, starting at 9AM PDT.

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)

From our sponsor

Free Resources To Help You Get Hired In Tech

The tech job market is competitive, but we’ve got your back. Whether you’re a coding bootcamp graduate, an entry-level developer or interested in pursuing a career in tech, Indeed has resources to help your job search. Discover tech resume samples, top-paying tech companies, interview tips and more here.

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.

Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

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)

From our sponsor

Lunch On Us At The Digital CX Summit

This year’s Digital Experience Summit is loaded with expert keynote speakers and great networking opportunities to hear from fellow attendees. The free event will take place on Oct. 28–29 — be sure to check out our breakout sessions for expert advice and top industry insights and save your spot today!

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)

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Earn your master’s degree online.

8. New On Smashing Job Board

• Senior WordPress/PHP Developer
  at 3 Media Web (Remote)
• Software Engineer
  at D2IQ (DE, UK)
• Senior Software Engineer (m/f/d) Java / J2EE
  at eMDs Inc. (Richardson, Austin)

9. Recent Smashing Articles

• Let’s Dive Into Cypress For End-to-End Testing
• Rebuilding A Large E-Commerce Website With Next.js (Case Study)
• Simplifying Form Styles With accent-color
• Getting Your head Straight: A New CSS Performance Diagnostics Snippet
• How To Build Your Own Mouseless Development Environment
• How Web Development Tools Are Helping Users Keep Pace With Rapid Change

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).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.

Follow us on Twitter • Join us on Facebook