Dynamic transparent color based on text color
Here is a small CSS snippet to calculate a transparent version of the current text color. This is useful in a themeable component system where semi-transparent elements like dividers, icons or backgrounds need to adapt to the surrounding text color. We can use the new color-mix function, which is now supported in all browsers, along […]
December 19, 2023
Building a wide-gamut colour picker
Now that browsers support wide-colour gamuts with P3, I have been wanting to build a colour picker that could select colours from outside the standard sRGB gamut. As the feature became more broadly available in browsers I’d seen a few examples popup from various people such as Gradient.style, the ColorJS.io picker demo, and OKLCH.com. However, […]
December 14, 2023
Nested corner radii
When designing a user interface with rounded corners you will likey run into situtation where you have nested rounded corners. It could be a button in a card or input, or a box inside a modal. What should the inner radius be? The easy way out is to just use the same radius, but it […]
December 11, 2023
New blog design, again
I posted recently about an updated blog design, the first in 8 years. And now I’m doing another post about another redesign. My original intention was to build a front end in React+Remix and use WordPress headlessly as the backend. I ran into a few issues with this approach and it was going to be […]
December 9, 2023
Spray paint stencils
I wanted to do a little update on my spray paint stencil experiments using HTML and JavaScript. While it’s not a recent thing, I realised that I had never done a update with the last painting app I built. It was a couple years ago that I built Graffiti Monster, an experimental drawing app which […]
December 6, 2023
Gradient text gaps with CSS
I was reading an article recently that had some really nice graphic design examples. One piece that stood out was a poster that had a continuous gradient that filled the gaps between words in a block a text. I wondered if it could be achieved dynamically in CSS. Below is my result. Note that this […]
December 1, 2023
Blur gradient with CSS
The other day I came across a design on Layers that used a blur fade over an image as a backdrop for text in a card. It reminded me of a similar thing I attempted a couple years ago in CSS but wasn’t able to get working. I decided to have another go at it […]
November 30, 2023
When arrays and booleans become a problem
There are two data types that I quite often run into issues with down the track when fixing bugs of implementing new features – Arrays and booleans.
November 29, 2023
First blog redesign in 8 years, sort of
If you a reading this on purplesquirrels.com.au then you might not see any difference. If you are on benfoster.com.au then you will be seeing the new site. It’s hard to believe that the last redesign of my blog was all the way back in 2014. I made a few tweaks back in 2019, but for […]
November 28, 2023
Using SVG paths with CSS clip-path
If you have ever tried to use an SVG path for a CSS clip-path you would have likely ran into the issue where the SVG path doesn’t correctly scale and fill the DOM element to clip it.
July 4, 2023
How the latest version of Chrome broke my gradient editor
I recently discovered a strange issue where inserting colour stops in gradients with my colour picker was not inserting the correct color. It was slightly off, a bit darker than what was expected. I knew Chrome has recently released support for new colour spaces, could this be causing the problem? Turns out, yes. The same […]
June 25, 2023
Thoughts on the React rollercoaster
The longer you work in the web field the more you notice the pendulum swinging from one extreme to the other. Is this just the latest swing of the pendulum from the SPA to SSR extremes?
March 23, 2023