CSS Tutorials
Reverse Element Order with CSS Flexbox
CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible. Semantics...
Responsive Images with Client Hints
It doesn't take being a performance fanatic to know that images can really slow down a page's load time. We've come a long way when it comes to images, from lazy loading them to using better image formats like WebP, but they all involve loading the...
Canvas Filters
Adding filters to images can make them more eye-catching and shareable -- just ask Instagram, Snapchat, Prism, and every other app out there. A few years back we got the awesome CSS filters feature, allowing us to use a fixed set of filter methods to make our photos...
Prevent Body Scrolling
One of my pet peeves with fixed or absolute positioned elements is the
<body>scrolling while you scroll the the positioned element. Have you ever tried scrolling a dialog and seeing the page scroll in the background? Awful user experience, bordering on embarrassing. Yikes. So what's the best way...CSS user-select
In my quest to contribute to every Mozilla project possible, I spent some time last Friday making updates to Firefox DevTools. The JSON Viewer component needed some love so that was first on my list. While viewing the CSS for the JSON Viewer component, I saw something I...
mix-blend-mode: multiply
One of my favorite interview questions is "how do you stay current on emerging front-end techniques and APIs?" I always get the standard "blogs" and "RSS" answers but rarely do I ever hear "from gurus on Twitter." I find that strange because I learn loads from Twitter...
Get Element Dimensions After CSS Transform
I've been playing a lot with meta viewports recently due to seeing many HTML5 TV apps coded explicitly for 1280x720 which you'll see on many HD televisions. We all know that it's a much better practice to use responsive design than hardcode dimensions but, that aside, meta...
Crafting Twelve-Column Layouts with Flexbox
If there's one thing flexbox excels at, it's twelve-column layouts. In a twelve-column layout, the page is broken into twelve invisible columns. These columns have small amounts of space between them, called gutters. The page is divided into rows, and the containers in the rows take...
Add Custom CSS to WordPress Admin
Believe it or not, I spend an awful lot of time going through my blog's comments and correcting spelling issues, code formatting, etc.; yes, even the comments from way back to 2007. It's mostly or quality control purposes and ease of reading for my readers, especially the code...
Simple Image Lazy Load and Fade
One of the quickest and easiest website performance optimizations is decreasing image loading. That means a variety of things, including minifying images with tools like ImageOptim and TinyPNG, using data URIs and sprites, and lazy loading images. It's a bit jarring when you're lazy loading images and they just...
