React and CSS View Transitions
If you want to use the web platform API for View Transtions in React there is an additional step you need to take in order to trigger the transition. First make sure your elements have a view transition name, this can be done dynamically if you have a list of elements: Or in CSS: The […]
CSS View Transitions and Sticky elements
I’ve been using CSS view transitions recently and really enjoying the simplicty they bring for animating elements that move on the page (think reordering elements or adding and removing to a list). I wanted to do a quick post on an issue I came across when you use view transitions and sticky elements on the […]
Modern CSS superpowers
Modern CSS is incredible. It has come so far in the last 10 years and the toolbox has something I can reach for for nearly every tricky situation I come across these days. It’s a breath of fresh not having to think about hacky work-arounds. Here’s a list of features I think are critical when […]
Align icons vertically to the center of the first line of text
I ran into an issue while implementing customisable text sizes into a UI. I had a Callout component which consists of a box containing an icon and a block of text – a layout similar to this: This component was built a few years ago and designed so the icon perfectly centered on the first […]
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 […]
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 […]
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 […]
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.
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 […]
Recreating the Apple Watch UI using a hexagonal grid
Building on the hexagonal grid from earlier, I have added a little JavaScript and have created an effect similar to the Apple Watch home screen UI. Below is a video of it in action, I am using IE11 (metro version) on a Surface Pro 2 which I found to be the most performant for this […]