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 this new proposed CSS feature works.
Support is obviously limited to Firefox for now (and, even there, only behind a flag), but it still offered … Read article “A Lightweight Masonry Solution”
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 go around them, and why I still find Sass necessary these days.… Read article “When Sass and New CSS Features Collide”
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 of CSS, such as layout, have remained a constant source of pain.
This post is about a problem I encountered about a decade ago and, until recently, did not know how to solve in a smart way. Specifically, it’s about … Read article “Cool Little CSS Grid Tricks for Your Blog”
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).
With that enabled, now we can test our CSS including conic gradients in Firefox as well.… Read article “Background Patterns, Simplified by Conic Gradients”
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 to having two of them other than the fact that having just one didn’t tint the image enough. For some reason, whoever initially coded that … Read article “Adventures in CSS Semi-Transparency Land”
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 SVG or a huge list of points inside the polygon function!
Chris was excited about the initial implementation, too.
How fun would this be:
Breathing box.I decided to give it a try. I went on CodePen, dropped a <div>… Read article “Unfortunately, clip-path: path() is Still a No-Go”
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 things about the implementation I felt I could simplify and improve at the same time.… Read article “Weaving a Line Through Text in CSS”
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 the same color)
Surprisingly, I recently discovered most people aren’t even aware that double position for gradient stops is something that actually exists in the spec, so I decided to write about it.
According to the spec:
… Read article “While You Weren’t Looking, CSS Gradients Got Better”Specifying two
