Menu

CSS

Performant Expandable Animations: Building Keyframes on the Fly

April 1st, 2020

Animations have come a long way, continuously providing developers with better tools. CSS Animations, in particular, have defined the ground floor to solve the majority of uses cases. However, there are some animations that require a little bit more work. You probably know that animations should run on the composite layer. (I won’t extend myself…

How to build a bad design system

March 31st, 2020

I didn’t realize this until it was far too late, but one of the biggest mistakes that are made on a design systems team is a common mismanagement issue: there are too many people in a meeting and they have too many dang opinions. Is there a conversation about the color of your buttons that’s…

4 CSS Grid Properties (and One Value) for Most of Your Layout Needs

March 30th, 2020

CSS Grid provides us with a powerful layout system for websites. The CSS-Tricks guide gives you a comprehensive overview of Grid’s properties with layout examples. What we’re going to do here is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout…

Indicating Scroll Position on a Page With CSS

March 24th, 2020

Scrolling is something we all know and do on the web to the extent that it’s an expectation or perhaps even a habit, like brushing our teeth. That’s probably why we don’t put too much thought into designing the scrolling experience — it’s a well-known basic function. In fact, the popular “there is no fold”…

Neumorphism and CSS

March 20th, 2020

Neumorphism (aka neomorphism) is a relatively new design trend and a term that’s gotten a good amount of buzz lately. It’s aesthetic is marked by minimal and real-looking UI that’s sort of a new take on skeuomorphism — hence the name. It got its name in a UX Collective post from December 2019, and since…

A Few Background Patterns Sites

March 18th, 2020

If I need a quick background pattern to spruce something up, I often think of the CSS3 Patterns Gallery. Some of those are pretty intense but remember they are easily editable because they are just CSS. That means you could take these bold zags and chill them out. CodePen Embed Fallback My usual go-to through…

A Complete Guide to calc() in CSS

March 17th, 2020

CSS has a special calc() function for doing basic math. Here’s an example: .main-content { /* Subtract 80px from 100vh */ height: calc(100vh – 80px); } In this guide, let’s cover just about everything there is to know about this very useful function. calc() is for values The only place you can use the calc()…

The CSS Podcast

March 14th, 2020

From Adam and Una at Google, a podcast just about CSS. I believe I’m contractually obliged to link to that! Just one episode out so far, a shorty about the box model. Last time I wrote up podcasts I like was 8 years ago most of them are dead now, except the biggies like This…

How to Make a Line Chart With CSS

March 11th, 2020

Line,  bar, and pie charts are the bread and butter of dashboards and are the basic components of any data visualization toolkit. Sure, you can use SVG or a JavaScript chart library like Chart.js or a complex tool like D3 to create those charts, but what if you don’t want to load yet another library…

Adventures in CSS Semi-Transparency Land

March 9th, 2020

Recently, I was asked to make some tweaks to a landing page and, among the things I found in the code, there were two semitransparent overlays — both with the same RGB values for the background-color — on top of an image. Something like this: <img src=’myImage.jpg’/> <div class=’over1′></div> <div class=’over2′></div> There was no purpose…