A Lightweight Masonry Solution
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, …
When Sass and New CSS Features Collide
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 …
Cool Little CSS Grid Tricks for Your Blog
I discovered CSS about a decade ago while trying to modify the look of a blog I had created. Pretty soon, I was able to code cool things with more mathematical and, therefore, easier-to-understand features like transforms. However, other areas …
Background Patterns, Simplified by Conic Gradients
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
…
Adventures in CSS Semi-Transparency Land
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 …
Unfortunately, clip-path: path() is Still a No-Go
I was extremely excited when I first heard that clip-path: path()
was coming to Firefox. Just imagine being able to easily code a breathing box like the one below with just one HTML element and very little CSS without needing …
Weaving a Line Through Text in CSS
Earlier this year, I came across this demo by Florin Pop, which makes a line go either over or under the letters of a single line heading. I thought this was a cool idea, but there were a few little …
While You Weren’t Looking, CSS Gradients Got Better
One thing that caught my eye on the list of features for Lea Verou’s conic-gradient()
polyfill was the last item:
…Supports double position syntax (two positions for the same color stop, as a shortcut for two consecutive color stops with
Multi-Thumb Sliders: Particular Two-Thumb Case
This is a concept I first came across a few years back when Lea Verou wrote an article on it. Multi-range sliders have sadly been removed from the spec since, but something else that has happened in the meanwhile is …
Need front-end development training?
Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.