Ana Tudor

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:

Specifying two

… Read article “While You Weren’t Looking, CSS Gradients Got Better”

… Read article “Multi-Thumb Sliders: General 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 that CSS got better — and so have I, so I recently decided to make my own 2019 version.

In this two-part article, we’ll go through the how, step-by-step, first building an example with two thumbs, then identify the issues … Read article “Multi-Thumb Sliders: Particular Two-Thumb Case”

Very often, while using switch variables (a variable that’s either 0 or 1, a concept that’s explained in a greater detail in in this post), I wish I could perform logical operations on them. We don’t have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we can emulate these and more with arithmetic operations in a calc() function.

This article is going to show you what calc() formulas we need to use for each logical operation and … Read article “Logical Operations with CSS Variables”

I’ve recently noticed an interesting change on CodePen: on hovering the pens on the homepage, there’s a rectangle with rounded corners expanding in the back.… Read article “Various Methods for Expanding a Box While Preserving the Border Radius”

In this article, we’ll be taking a look at the structure inside <input type='color'/> elements, browser inconsistencies, why they look a certain way in a certain browser, and how to dig into it. Having a good understanding of this input allows us to evaluate whether a certain cross-browser look can be achieved and how to do so with a minimum amount of effort and code.… Read article “Color Inputs: A Deep Dive into Cross-Browser Differences”

Have you ever wanted to ensure that nothing of a (pseudo) element gets displayed outside its parent’s border-box? In case you’re having trouble picturing what that looks like, let’s say we wanted to get the following result with minimal markup and avoiding brittle CSS.… Read article “Restricting a (pseudo) element to its parent’s border-box”