Menu

CSS

A Dynamically-Sized Sticky Sidebar with HTML and CSS

November 20th, 2020

Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a position: sticky into your CSS ruleset, set the directional offset (e.g. top: 0) and you’re ready to impress your teammates with minimal effort. But sticky positioning can get a bit…

Color Theming with CSS Custom Properties and Tailwind

November 19th, 2020

Custom properties not only enable us to make our code more efficient but allow us to work some real magic with CSS too. One area where they have huge potential is theming. At Atomic Smash we use Tailwind CSS, a utility class framework, for writing our styles. In this article, we’ll look at how custom…

A Complete Guide to CSS Gradients

November 16th, 2020

The background-size property in CSS is one of the most useful — and most complex — of the background properties. There are many variations and different syntaxes you can use for this property, all of which have different use cases. Here’s a basic example: html { background: url(greatimage.jpg); background-size: 300px 100px; } That’s an example…

Mixing Colors in Pure CSS

November 16th, 2020

Red + Blue = Purple… right? Is there some way to express that in CSS? Well, not easily. There is a proposal draft for a color-mix function and some degree of interest from Chrome, but it doesn’t seem right around the corner. It would be nice to have native CSS color mixing, as it would…

ARIA in CSS

November 10th, 2020

Jeremey reacting to Sara’s tweet, about using [aria-*] selectors instead of classes when the styling you are applying is directly related to the ARIA state. … this is my preferred way of hooking up CSS and JavaScript interactions. Here’s [an] old CodePen where you can see it in action Which is this classic matchup: [aria-hidden=’true’] { display:…

How to Write Loops with Preprocessors

November 4th, 2020

Loops are one of those features that you don’t need every day. But when you do, it’s awfully nice that preprocessors can do it because native HTML and CSS cannot. Sass (SCSS) for Loop CodePen Embed Fallback while Loop CodePen Embed Fallback each Loop CodePen Embed Fallback Less for Loop CodePen Embed Fallback while Loop…

Additive Animations in CSS

November 3rd, 2020

Daniel C. Wilson explains how with CSS @keyframe animations when multiple of them are applied to an element, they do both works. But if any properties are repeated, only the last one works. They override each other. I’ve seen this limitation overcome by applying keyframes to nested elements so you don’t have to do deal…

More on content-visibility

October 28th, 2020

Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and we covered it. The weirdest part is that to get the performance value out of it, you pair it with contain-intrinsic-size on these big chunks of the page where you…

Comparing Various Ways to Hide Things in CSS

October 27th, 2020

You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique. Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of hiding content isn’t bulletproof because now that content is now “inaccessible” to screen readers. It’s…

Creating CSS Shapes with Emoji

October 23rd, 2020

CSS Shapes is a standard that lets us create geometric shapes over floated elements that cause the inline contents — usually text — around those elements to wrap along with the specified shapes. Such a shaped flow of text looks good in editorial designs or designs that work with text-heavy contents to add some visual…