Welcome to the first of our themed newsletters, and we’re kicking things off with my favorite topic of CSS. If CSS is your thing too, then in addition to the resources we are sharing this week, check out our Smashing Guide to CSS Layout.
We also have a whole heap of CSS content for you at our first online conference SmashingConf Live! this week (Thu–Fri, Aug 20–21). With speakers Miriam Suzanne, Michelle Barker, and I all covering CSS topics. It looks set to be a really fun two days, and there are still some tickets left if you are quick! You can bundle your ticket with one of our workshops, too. To the schedule.
Sticking with our CSS theme, I’ll be leading a CSS Layout Masterclass in September. Starting tomorrow, you can join Umar Hansa to learn about Front-End Testing and Browser Automation, or perhaps join Vitaly to discover Smart Interface Design Patterns. We’d love to have you join us!
— Rachel Andrew (@rachelandrew)
- Avoiding Layout Shifts With CSS
- Ten Layouts With One Line Of CSS
- Styling Checkboxes And Radio Buttons In CSS
- This Vs That
- The Underrated CSS Filter
- From Our Smashing Friends
- Coming Up Next on Smashing
One of the most frustrating experiences on the web is when the content on the page unexpectedly shifts. Perhaps an ad banner has kicked in, or a carousel script has fired, or a third-party script or web font has arrived, or image dimensions haven’t been reserved — there might be various reasons.
In his article on Content Jumping (And How To Avoid It), Brandon Smith explains when content jumping happens and how to fix it — for example, with CSS transitions. Addy Osmani has written about ways to optimize stability for images without dimensions, ads, embeds, iframes, dynamically injected content, web fonts and actions waiting for a network response before updating DOM.
If you want to bolden text on mouse hover, you can add a hidden pseudo-element with the same text string but set it to the bold font size. And if you need to keep track of the visual stability in your projects, Milica’s and Phil’s guide to Cumulative Layout Shift explains how you can measure the impact of a layout shift and keep it on your radar as you are building your experiences. (vf)
What can you achieve with one line of CSS? More than you might think, as Una Kravets demonstrates. Una collected ten powerful lines of CSS that do some serious heavy lifting and help you build ten robust, modern layouts.
You’ll find code snippets to master the biggest mystery of CSS (centering), the classic holy grail layout, as well as more advanced grid layouts. Demos show every layout in action and there’s also a 20-minute talk in which Una goes into further detail. Handy! (cm)
The good ol’ issue: how do we style checkboxes and radio-buttons to ensure that they look, well, at least similar, in most browsers — while ensuring that they stay accessible as well? In her article, Sara Soueidan covers a few techniques to keep in mind to achieve the desired result.
Sara covers the different techniques for hiding elements, how each of them affects the accessibility of the content, and how to visually hide them, so they can be replaced with a more styleable alternative: the SVG.
When hiding an interactive element, we need to make sure we choose a hiding technique that keeps it screen reader-accessible, position it on top of whatever is visually replacing it, so that a user navigating by touch can find it where they expect to, and then make it transparent. Sara also provides live demos that we can use right away, along with useful references to articles for further reading. (vf)
Do you know the difference between
:focus in CSS or when to use
apply instead of
drop-shadow filter has excellent support but is rather underrated — a real shame given the fact that it could save you a lot of time hacking around with
As Michelle Barker explains in a blog post,
drop-shadow lets you use values for x-offset, y-offset, blur radius, and color — just like its more prominent sibling
box-shadow. However, there’s one big advantage: the shadow does not correspond to the bounding box of an element (which is often where the hacking begins when using
box-shadow) but to the non-transparent parts of an image. Perfect if you want to apply a drop shadow to a transparent PNG or SVG logo, for example, or even a clipped shape. (cm)
We love supporting wonderful community efforts, and we are happy to share articles and resources from useful resources in the web community. This week, a huge shout out to Codrops, UX Design Weekly and Neon Moiré. Community matters. ❤️
- Exploring Animations for Menu Hover Effects
On the Codrops blog, Manoela Ilic explores ideas for creative menu hover animations with images. A cool little detail with endless possibilities.
- UX Design Weekly
Staying on top of what’s happening in the community can be hard. The UX Design Weekly newsletter has your back with a hand-picked list of the best user experience design articles, resources, portfolios, and more every week.
- Neon Moiré
Neon Moiré helps you find the most interesting design-driven events around the world, virtual or in-person. On their blog, they talk with speakers and organizers about what makes them tick.
With Smashing Membership, you get access to goodies, eBooks, discounts and live sessions with experts — all around front-end & UX, for just one coffee a month. Coming up next:
- “Accessibility With(out) Priorities” with Chen Hui Jing— September 1 at 14:00 London time
- “The Good, The Bad And Ugly Of Prototyping” with Adekunle Oduye— October 1 at 19:00 London time
We also have online workshops on front-end & UX — designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.
- Front-End Testing (Aug 19 – Sep 3)
- Jamstack! (Sep 1–16)
- The CSS Layout Masterclass (Sep 10–11)
- Smart Interface Design Patterns (Sep 22 – Oct 6)
- Vue.js: The Practical Guide (Sep 17 – Oct 2)
- Build, Ship & Extend GraphQL APIs (Oct 15–30)
Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at firstname.lastname@example.org and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)
- DevTools For VSCode, Screen Recorder, Date Picker
- CSS Edition
- Waterfalls, Flame Charts and Inline Validation
- Dark Mode, Onboarding and Checkout UX
- SVG Generators, Figma and Accessibility
- Little Helpful Tools and Browser Extensions
- Git, Design Systems, TypeScript, CSS clamp()
- UX Edition
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.