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…
bookmark2023 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…
bookmarkOver 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.
articleWhat 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!
articleThe beloved and renowned Linkin Park album, Meteora, as a spinning CD case.
code
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.
articleWow, this technique is unbelievably clever. 🤯 Keeping this one in my back pocket for sure! h/t Scott Jehl and Alistair Shepherd
bookmarkThis 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…
bookmark“Generate linear() easings from JavaScript and SVG”
bookmarkThis 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…
bookmark
I found a useful trick for achieving the long-standing design of Level 2 Headings across my website.
noteRather than remove CSS from my website manually on CSS Naked Day, I have employed a short JavaScript function to perform the check for me.
articleCSS Naked Day has come and gone for this year, but I’ll be making it a point to participate for many years to come.
articleI love rather simple but powerful solutions like this—so clever!
bookmarkAndy Bell masterfully breaks-down some of the most powerful and elegant (and my favourite too!) solutions we have in CSS today.
bookmark“Using !important with custom properties might not work as you expect.”
bookmarkHandy little tool for calculating viewport-based clamped values for use in CSS.
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!
articleI 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.
articleRelaxing, back-to-the-basics little pen playing with text effects.
codeReaching 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!
articleWhat’s the deal with relative units? Let’s find out.
articleAwesome 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.
noteFollowing 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.
articleI think you hit the nail on the head with this one. As I like to think CSS is my strongest language (the ego on this guy, honestly), your simile with the layout of a keyboard was spot on—layout, in particular,…
noteHow 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, and used…
note
Memorable and maintainable design tokens in SCSS.
One of my code demos.
codeManaging 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.
articleOne of my code demos.
codeOne of my code demos.
codeI 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.
articleOne of my code demos.
codeI 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.
bookmarkNow 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.
articleOne of my code demos.
codeOne of my code demos.
codeGreat 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.
articleOne of my code demos.
codeI gave a talk at London Web Standards and asked the question, So how can we write media queries that are both consistent and succinct?
articleDon't be half-minded when dealing with fractions and pixels. How can we ensure all browsers interpret fractions in our CSS equally?
articleIf 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?
articleI revised my original technique for styling default elements and took it a step further to scratch the greatest number of backs.
articleOne of my code demos.
codeI recently decided I would embark on the task of theming Pinboard. Here's how I did it.
articleOne of my code demos.
codeOne of my code demos.
codeOne of my code demos.
codeOne of my code demos.
codeOne of my code demos.
codeOne of my code demos.
codeOne of my code demos.
codeOne of my code demos.
codeWe 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.
articleOne of my code demos.
codeOne of my code demos.
codeOne of my code demos.
codeI 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.
articleOne of my code demos.
codeI've been playing around with CSS content and attribute selectors recently, and came across a useful trick for styling default elements.
articleOne of my code demos.
codeHow easy is it to keep a shadow's direction consistent whilst rotating an element?
articleOne of my code demos.
codeNavigation 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!
articleWell, 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