Meteora
The beloved and renowned Linkin Park album, Meteora, as a spinning CD case.
codeCSS
2023 12 posts Permalink ¶
Double-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…
bookmarkLinear 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…
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 11 posts Permalink ¶
!important custom properties
“Using !important with custom properties might not work as you expect.”
bookmarkclamp() Calculator
Handy little tool for calculating viewport-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!
articleMoving 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.
articleThe 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.
article
in reply to
Writing CSS with Purpose
by
Binyamin Green
Finding Purpose in CSS
I 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,…
note2021 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, and used…
note2020 2 posts Permalink ¶
Bowhead
Memorable and maintainable design tokens in SCSS.
Rainbow HSL Underline
One of my code snippets.
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 3 posts Permalink ¶
Moon Phases
One of my code snippets.
codeColor Transition Demo
One of my code snippets.
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.
article2018 5 posts Permalink ¶
Doubly-Center-Aligned Text
One of my code snippets.
codeLynn 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 snippets.
codeScaling and Pixelating
One of my code snippets.
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 snippets.
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?
articleShoot 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?
article2015 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 snippets.
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 snippets.
codeCategory Hover Demo
One of my code snippets.
codePower of Transform Centering - Interactive
One of my code snippets.
codePower of Transform Centering
One of my code snippets.
codecontent-box vs. border-box
One of my code snippets.
codeSquare Illusion
One of my code snippets.
codeFlyknife Comics
One of my code snippets.
codeInfinite Square
One of my code snippets.
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 snippets.
codePsychedelic Slice
One of my code snippets.
codeJazzy CSS Checkbox
One of my code snippets.
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 snippets.
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 snippets.
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 snippets.
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