Mixing Colours in Different Colour Spaces
Visualise how different colour spaces will mix two given colours.
codeCSS
2024 3 posts Permalink ¶
Some use cases for revert-layer
CSS Layers has been such a boon to wrangling specificity, and it’s really helped me get a better understanding of the CSS I write from a bird’s eye view. So I’m surprised that I’m just learning about revert-layer now, but super glad that this fabulously-comprehensive article by Mayank is what introduced me to it!
CSS Wrapped: 2023!
2023 was unmistakably one of the most exciting bumper years for CSS. This superb post by Una Kravets, Bramus, and Adam Argyle is chock-full of information and editable examples of all the electrifying changes that we saw to CSS last year.
bookmark2023 13 posts Permalink ¶
Can you teach an old design system new colours?
Over the years, I’ve changed the colours used across my website a number of times, and I’m happy with what I have now, but what I’m going to talk about today are formats for defining colours and some recent behind-the-scenes
changes I made to how I define colours on my website, making theming my website easier.
Halfway to CSS Naked Day 2024
What better time is there to prepare for next year’s CSS Naked Day than the halfway point? Certainly better than the day before, take it from me!
articleMeteora
The beloved and renowned Linkin Park album, Meteora, as a spinning CD case.
codeDouble-Double
Today I’m introducing a little dash of CSS syntactic sugar I’ve been using a lot when building components recently that I’m calling the Double-Double technique.
articleSwapping Images with the Sizes Attribute
Wow, this technique is unbelievably clever. 🤯 Keeping this one in my back pocket for sure! h/t Scott Jehl and Alistair Shepherd
bookmarkGetting started with View Transitions on multi-page apps
This post really helped me understand just how surprisingly easy it is to start using View Transitions—as quick as a single meta tag in the head to enable fade/opacity transitions—and a slew of other great tips, tricks, and things to watch out for as we prepare for this great new browser feature to become stable!
Gotta love a good Animorphs reference, too.
Linear easing generator
“Generate linear() easings from JavaScript and SVG”
bookmarkDo you know color-scheme?
This post by Sara really helped solidify my understanding of color schemes in the browser, how they affect HTML’s default appearance in browsers, and how we can make use of them in CSS and JavaScript. Lots of useful code examples and imagery to help the detailed explanations!
bookmarkDynamic Heading Borders
I found a useful trick for achieving the long-standing design of Level 2 Headings across my website.
noteCSS Naked Day JavaScript Function
Rather than remove CSS from my website manually on CSS Naked Day, I have employed a short JavaScript function to perform the check for me.
articleWhy I participated in CSS Naked Day
CSS Naked Day has come and gone for this year, but I’ll be making it a point to participate for many years to come.
articleSticky Page Header Shadow on Scroll
I love rather simple but powerful solutions like this—so clever!
bookmarkSome simple ways to make content look good
Andy Bell masterfully breaks-down some of the most powerful and elegant (and my favourite too!) solutions we have in CSS today.
bookmark2022 10 posts Permalink ¶
!important custom properties
“Using !important with custom properties might not work as you expect.”
bookmarkclamp() Calculator
Handy little tool for calculating viewport/container-based clamped values for use in CSS.
The Environment-Aware Wrapper
Here’s a handy CSS technique to make sure your content isn’t obscured by the pesky notch
that seems to be present on many phones these days, and it probably already fits nicely into your existing codebase!
Moving Targets
I was just working on some styling changes to my website and fell into a rabbit hole on URLs, the <mark> element and :target pseudo-class, and ended up writing an animation as a handy technique for drawing the reader’s attention.
The Workplace
Relaxing, back-to-the-basics little pen playing with text effects.
codeA Case for the 1-Dimensional Grid
Reaching for Grid might feel like overkill for a one-column layout, but I hope this technique shows how useful it is in understanding what your CSS is doing!
articleIt’s all relative!
What’s the deal with relative units? Let’s find out.
articleNegative Animation Delay
Awesome little trick for building better "initial" animation states where multiple elements are staggered.
bookmarkI’ve got a quick little nugget of CSS to share today, a selector containing all interactive content.
noteThe Beloved Refactor
Following the incredible high from a great conference, I just finished an extremely refreshing refactor of the CSS on my site. Here’s what I did.
article2021 2 posts Permalink ¶
Deep Dive into Colour
How to make powerful use of CSS Variables, colour spaces, and the cascade using Bowhead.
articleOver the last couple of months I’ve made some small improvements and additions to 🐋 Bowhead, which is now at version 0.2.1. Since last posting about it, I’ve cleaned up the documentation, added some minor bits and pieces,...
note2020 3 posts Permalink ¶
Bowhead
Memorable and maintainable design tokens in SCSS.
Rainbow HSL Underline
One of my code demos.
codeSassy Lobotomised Owl
Managing spacing between elements and components on your page can be a tiring task if undertaken manually. This is where the lobotomised owl comes in: a short, simple snippet of CSS that simplifies this whole process for you. In this article I’ll explain how I make use of it in a more dynamic way using a SCSS mixin.
article2019 4 posts Permalink ¶
Moon Phases
One of my code demos.
codeColor Transition Demo
One of my code demos.
codeThe Flip-Flop Technique
I recently implemented a colour scheme toggler in the footer of my website, following Andy Bell’s guide, Create a user controlled dark or light mode, and found a wonky but fun alternative solution for styling my dark theme which leverages CSS’s filter property.
articleDoubly-Center-Aligned Text
One of my code demos.
code2018 4 posts Permalink ¶
Lynn Fisher’s Portfolio
I wish I could create animations this beautiful. Lynn Fisher demonstrates her god-like abilities with yet another gorgeous portfolio redesign. Check out the archive of her previous designs, too. They're remarkable.
bookmarkVariables for Both
Now that CSS Custom Properties, or CSS Variables, are becoming a solid standard, I'm using a method to map their values to CSS Variables whilst providing a value-as-is fallback using a straightforward syntax in a SCSS function and mixin.
articleBumpy World
One of my code demos.
codeScaling and Pixelating
One of my code demos.
code2017 1 post Permalink ¶
Remapping Ranges in Sass
Great inspiration can sometimes be found in exploring available opportunities and embracing new ideas. In this article, I'll try to replicate a foreign concept in a familiar way, and explain why I decided to even do it.
article2016 4 posts Permalink ¶
Message Types
One of my code demos.
codeApril LWS Talk
I gave a talk at London Web Standards and asked the question, So how can we write media queries that are both consistent and succinct?
Shoot for the Moon
Don't be half-minded when dealing with fractions and pixels. How can we ensure all browsers interpret fractions in our CSS equally?
articleAn Extended Response
If you've dabbled in Sass before, you're likely familiar with @extend and @mixin, but is there any use-case for @extend? Given the benchmark performance of the two, can we still be confident in the cascade when @extending in Sass?
2015 3 posts Permalink ¶
Backscratching Revisited
I revised my original technique for styling default elements and took it a step further to scratch the greatest number of backs.
articleButton Interaction Demo
One of my code demos.
codeTheming Pinboard
I recently decided I would embark on the task of theming Pinboard. Here's how I did it.
article2014 13 posts Permalink ¶
Interaction Jazz
One of my code demos.
codeCategory Hover Demo
One of my code demos.
codePower of Transform Centering - Interactive
One of my code demos.
codePower of Transform Centering
One of my code demos.
codecontent-box vs. border-box
One of my code demos.
codeSquare Illusion
One of my code demos.
codeFlyknife Comics
One of my code demos.
codeInfinite Square
One of my code demos.
codeA Slice of Heaven
We know that webpages are composed of text and boxes. Lots and lots of boxes. But with the power and might of CSS3 we can do some fancy stuff that never used to be possible.
articleZoomy Anchor Thing
One of my code demos.
codePsychedelic Slice
One of my code demos.
codeJazzy CSS Checkbox
One of my code demos.
codeLet’s Look Back
I haven't published a new article in a while now, but I haven't been twiddling my thumbs. Let's look at what happened behind-the-scenes in the last eight months since my first article.
article2013 7 posts Permalink ¶
Cutaway Indicator
One of my code demos.
codeI’ll Scratch Your Back, And Mine Too
I've been playing around with CSS content and attribute selectors recently, and came across a useful trick for styling default elements.
articleClock Face Idea
One of my code demos.
codePersistent Shadows
How easy is it to keep a shadow's direction consistent whilst rotating an element?
articlePersistent Light Source Transform
One of my code demos.
codeAnnoying Navigation CSS
Navigation is crucial to a functional website. It is how your users find the information they're after; get it right, and your users are happy—get it wrong, and they go insane!
articleFirst Article Ever
Well, I've finally gotten my site up and running to a point where I can consider it to be a success. What was the process, and what did it involve? What mistakes did I make that you can avoid?
article