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…
CSS in 3D: Learning to Think in Cubes Instead of Boxes
October 23rd, 2020
My path to learning CSS was a little unorthodox. I didn’t start as a front-end developer. I was a Java developer. In fact, my earliest recollections of CSS were picking colors for things in Visual Studio. It wasn’t until later that I got to tackle and find my love for the front end. And exploring…
Comparing Styling Methods in 2020
October 19th, 2020
Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It’s in the context of Next.js, which is somewhat important as Next.js has some specific ways you work with these tools, is React and, thus, is a components-based architecture. But the styling methods talked about transcend Next.js, and can apply broadly to lots of…