Menu

CSS

Optimizing CSS for faster page loads

September 17th, 2020

A straightforward post with some perf data from Tomas Pustelnik. It’s a good reminder that CSS is a crucial part of thinking web performance, and for a huge reason: Any time [the browser] encounters any external resource (CSS, JS, images, etc.) it will assign it a download priority and initiate its download. Priorities are important…

Changing Emoji Skin Tones Programmatically

September 17th, 2020

So, you know how many emoji have different skin tones? Emoji skin tones are extremely popular, especially over text and on social media. The raised black fist emoji (✊🏿) was voted “The Most 2020 Emoji” by Emojipedia’s World Emoji Awards. Each tone is a modifier and many emoji are made up of modifiers and base…

Lessons Learned from Sixty Days of Re-Animating Zombies with Hand-Coded CSS

September 16th, 2020

Caution: Terrible sense of humor ahead. We’ll talk about practical stuff, but the examples pretty much all involve zombies and silly jokes. You have been warned. I’ll be linking to individual Pens as I discuss the lessons I learned, but if you’d like to get a sense of the entire project, check out 60 days…

Using a brightness() filter to generically highlight content

September 11th, 2020

Rick Strahl: I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients, and opacity to effectively ‘highlight’ a control. All that works of course, but the problem with most of these approaches is that one way or the other…

How CSS Perspective Works

September 9th, 2020

As someone who loves creating CSS animations, one of the more powerful tools I use is perspective. While the perspective property is not capable of 3D effects all by itself (since basic shapes can’t have depth), you can use the transform property to move and rotate objects in a 3D space (with the X, Y,…

Using max() for an inner-element max-width

September 7th, 2020

I go into all this in The “Inside” Problem. The gist: you want an edge-to-edge container, but the content inside to have a limited width. I think there is absolutely no problem using a nested element inside, but it’s also fun to look at the possibilities of making that work on a single element. My…

Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

September 4th, 2020

Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to make responsive sites. In this article, we’ll dig into a number of tools (revolving around HTML and CSS) we have at the ready, from responsive images to relatively new…

Stroke Text CSS: The Definitive Guide

September 3rd, 2020

Whenever I think of stroked text on the web I think nope. There is -webkit-text-stroke in CSS for it, but it places that stroke in the middle of the vector outline of the characters, absolutely ensuring that the character doesn’t look right. Just look at this in Chrome or Safari. Gross. If you’re going to…

How to Use CSS Grid for Sticky Headers and Footers

September 2nd, 2020

CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there’s a bit of a learning curve, but Grid is honestly fun to work with once you get the hang of it. One area where it shines is dealing with headers and footers. With a little adjustment…

Ground Rules for Web Animations

August 31st, 2020

Animations can make a site stand out. Or, they can just as easily kill the experience. When working with web animations, there are a few things that could go wrong like adding animations that serve no purpose, setting durations that are too long or too quick, or not using the right type of animation in…