Logical Operations with CSS Variables

September 11th, 2019

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…

Various Methods for Expanding a Box While Preserving the Border Radius

September 6th, 2019

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. Expanding box effect on the CodePen homepage. Being the curious creature that I am, I had to check how this works! Turns out, the rectangle in the back is an…

Color Inputs: A Deep Dive into Cross-Browser Differences

July 12th, 2019

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…