#311: CSS Global Resets, Gradients and Transitions

Transitioning CSS gradients, CSS charts, CSS scrollbar gutters, whimsical 3D CSS Button, CSS clamp() generator and CSS margin collapsing.Issue #311 • July 27, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Qué tal Smashing Friends, If you’ve been on the web for a while, chances are high that you remember Internet Explorer hacks and workarounds, along with quirky clearfixes and lengthy CSS resets. Back in the early 2000s, I spent days trying to figure out why float: top doesn’t work, why [margins collapse]( what [stacking contexts in CSS]( are, why there is no [parent selector]( — and setting z-index: 9999 !important just in case. [The rules of margin collapsing in CSS explained, by Josh W. Comeau.]( [The rules of margin collapsing in CSS]( explained by Josh W. Comeau. And just look at CSS today! Just last week [Flexbox has celebrated its 12th birthday]( and with all the [incredible things we can do with CSS today]( writing CSS has never been more fun and exciting. So in this newsletter issue, we look at just that: some exciting and fun things we can do with CSS, or we will be able to do soon. We are very excited to have wrapped up Stephanie Eckles’ incredible [CSS workshop]( last week, and while we are waiting for the new date for Stephanie’s workshop later in Autumn this year, we do have a couple of [friendly front-end & UX workshops]( lined up for the rest of the year. Perhaps you’ll find them useful, too. In the meantime, let’s dive into the shiny world of CSS! — Vitaly ([@smashingmag]( --------------------------------------------------------------- 1. Transitioning CSS Gradients If you’ve ever tried to transition gradients in CSS, you probably have noticed that it actually doesn’t work. Instead of gradually fading from one gradient to another, the change is happening immediately, abruptly, with no smooth transition between the two. [Transitioning CSS Gradients]( As Keith J. Grant has [discovered]( we can achieve the transition with a clever workaround though. We use a pseudo-element and opacity transform for that. First, we apply one gradient to the element, then position its pseudo-element to fill the element, and then apply the second gradient to it. And we “transition” between two gradients by transitioning the opacity of the pseudo-element. You can check a [full working example on CodePen](. (vf) --------------------------------------------------------------- 2. CSS Charts Perhaps you need to design a column chart, or a bar chart, or even a multi-dataset column chart or stacked columns. Where do you even start? Perhaps with [Charts.css]( a CSS data visualization framework that uses CSS utility classes to style HTML elements as charts. [CSS Charts]( Created by Lana Gordiievski and Rami Yushuvaev, the framework supports many chart types, has no dependencies, and is relatively lightweight (6Kb gzipped). It also includes thorough [documentation]( on its components and built-in chart types, plus the source code is [available on GitHub]( (licensed under MIT). And if you need a slightly more unusual approach, Preethi explains [how to create CSS Charts with interesting shapes]( on CSS-Tricks as well. (vf) --------------------------------------------------------------- From our sponsor Never Format CSV Files Again [Never Format CSV Files Again]( [2391.gif?opens=1]Let your users securely import their own data with confidence. No Excel formatting, no custom import scripts, and no need to build vs. buy. That’s [flatfile](. --------------------------------------------------------------- 3. Stable Scrollbar Gutters With CSS Ah, the layout shifts! As Bramus Van Damme [explains]( one of the slightly more obscure reasons for layout shifts comes due to different types of scrollbars on the web. While overlay scrollbars on iOS/macOS are placed over the content (and aren’t shown by default), other scrollbars are placed in the “scrollbar gutter”, i.e. the space between the inner border edge and the outer padding edge. Stable Scrollbar Gutters With CSS When the content of a box becomes too large, the browser will — by default — show a scrollbar. In the latter case, it will cause a layout shift. Fortunately, this problem might be gone for good soon. Meet a shiny new scrollbar-gutter property: by setting it to stable, we can have the browser always showing the scrollbar gutter, even if the box is not overflowing. And to keep things symmetric, we can use stable both-edges. The feature isn’t available yet, but [coming in Chromium very soon]( with other rendering engines hopefully following soon. (vf) --------------------------------------------------------------- 4. Upcoming Smashing Online Workshops We regularly run [online workshops around front-end and design]( be it around accessibility, forms, navigation, or landing pages. In fact, we have a couple of friendly workshops coming up soon, and we thought that, you know, you might want to join in as well. [Smashing Online Workshops]( 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](. For example, we have [The TypeScript Masterclass]( coming up soon, with Stefan Baumgartner, the author of our recent Smashing Book on [TypeScript in 50 Lessons](. We also have plenty of other topics to choose from. As always, here’s an overview of our upcoming [front-end & design workshops](. - [Designing The Perfect Web Forms]( UX with Vitaly Friedman. August 18–20. - [Designing The Perfect Navigation]( UX with Vitaly Friedman. August 31 – September 1. - [Architecting Design Systems]( Workflow With Nathan Curtis. September 2–10. - [Building Modern HTML Emails]( Dev With Rémi Parmentier. September 16–24. - [Jump to all online workshops →]( --------------------------------------------------------------- 5. Whimsical CSS 3D Button Details matter. Designing a lovely button doesn’t seem to be a big complicated endeavor: a bit of padding here and there, a funky color, accessible text, and a few button states. Well, Josh Comeau has gone all the way to design a [truly whimsical 3D button]( that you might want to click more than once. [Whimsical 3D Button]( The idea is pure genius: we create two layers and offset the foreground layer a little bit at first. On hover, we shift the front layer down. Then, we adjust the focus outline with outline-offset, or use :focus:not(:focus-visible) to hide the outline when the button is focused and the user is using a pointer device. Then we shift the button up by a few pixels on hover, animate the transform a lil’ bit, adjust the Bezier curve for animation and add a bit of blurring for a softer, more natural shadow. And voilà — we have a whimsical 3D button that is accessible, works on mobile and on desktop, and is a pleasure to tap and click on. Of course, you can find the [full code snippet]( on Josh’s blog. (vf) --------------------------------------------------------------- From our sponsor Redefining Web Design On Editor X [Redefining web design on Editor X]( Experience a seamless creation process from concept to production with advanced design features on Editor X. [Get started today →]( --------------------------------------------------------------- 6. CSS clamp() Fluid Heading Generator Thanks to clamp(), you can set a font size that grows with the viewport but doesn’t go below or above the minimum and maximum font size that you define. To help you find the perfect CSS values for your fluid heading and control how it scales across different viewports, Erik André Jakobsen built the [Fluid Typography]( tool. [CSS clamp() Fluid Heading Generator]( You enter the minimum and maximum font size as well as the minimum and maximum viewport width, and the tool calculates not only the clamp() value but also shows you a demo of what it will look like when applied to an actual heading. Another helpful [generator to help you figure out the clamp() rule]( for your project comes from Maxime Roudier. It works similarly to Erik’s tool but also lets you select a font family and a range that you adjust with a slider instead of entering the specific minimum and maximum values. (cm) --------------------------------------------------------------- 7. The New CSS Reset What do you use to normalize styles across browsers? Many of us rely on [Normalize.css]( but as of recently, there have appeared new approaches to reduce the size of the global CSS reset that might be worth exploring as well. [The New CSS Reset]( With his [Modern CSS Reset]( Andy Bell has reduced the CSS reset to its minimum. Andy has revisited the reset from scratch, eliminating everything unnecessary based on modern features we have today. The usual suspects are all there: box-sizing rules, normalized default margins and core body defaults. Along with it, Andy removes all animations, transitions, and smooth scroll for people that prefer not to see them, and has added modern properties like scroll-behavior and text-decoration-skip-ink by default. The [New CSS Reset]( by Elad Shechter takes a slightly more aggressive approach. Elad works out from the view that often we don’t want to use default browser styles altogether, except the display property. So what if we remove all default styles altogether with the global CSS reset keywords, unset and revert? Plus, Elad uses :where() pseudo-class to remove specificity. An alternative approach that’s worth discussing. (vf) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #8. New On Smashing Job Board - [Senior UX Designer]( at Agora (Portland, OR) - [WordPress Developer]( at Maskar Design (Philadelphia, PA ) - [Software Developer]( at green|connector (Essen (DE)/Remote) --------------------------------------------------------------- #9. Recent Smashing Articles - [Color Tools And Resources]( - [A Guide To Attracting Clients To Your Agency]( - [Adding Time To Your Schedule As A Professional]( - [Maintaining End-To-End Quality With Visual Testing]( - [Gatsby Serverless Functions And The International Space Station]( - [Jump to all articles on Smashing Magazine →]( --------------------------------------------------------------- This newsletter issue was written and edited by Vitaly Friedman (vf), Iris Lješnjanin (il) and Christiane Rosenberger (cr). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](