Menu

A Lightweight Masonry Solution

August 3rd, 2020

Back in May, I learned about Firefox adding masonry to CSS grid. Masonry layouts are something I’ve been wanting to do on my own from scratch for a very long time, but have never known where to start. So, naturally, I checked the demo and then I had a lightbulb moment when I understood how…

When Sass and New CSS Features Collide

June 29th, 2020

Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny ways. So this is going to be a post about the issues I’ve encountered, how I…

Background Patterns, Simplified by Conic Gradients

May 28th, 2020

For those who have missed the big news, Firefox now supports conic gradients! Starting with Firefox 75, released on the April 7, we can go to about:config, look for the layout.css.conic-gradient.enabled flag and set its value to true (it’s false by default and all it takes to switch is double-clicking it). Enabling conic gradients in…

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…