Skip to main content
CSS is fun and cool and I like it.
Link

Behind the Source: Cassie Evans

Article

Chrome 83 Form Element Styles

There have been some aesthetic changes to what form elements look like as of Chrome 83. Anything with gradient colorization is gone (notably the extra-shiny <meter> stuff). The consistency across the board is nice, particularly between inputs and textareas. Not a big fan of the new <select> styling, but I hear a lot of accessibility research went into this, so it’s hard to complain there — plus you can always change it.

Hakim has a nice comparison tweet:… Read article “Chrome 83 Form Element Styles”

Article

A New Way to Delay Keyframes Animations

If you’ve ever wanted to add a pause between each iteration of your CSS @keyframes animation, you’ve probably been frustrated to find there’s no built-in way to do it in CSS. Sure, we can delay the start of a set of @keyframes with animation-delay, but there’s no way to add time between the first iteration through the keyframes and each subsequent run. 

This came up when I wanted to adapt this shooting stars animation for use as the background … Read article “A New Way to Delay Keyframes Animations”

Article

Rotated Table Column Headers… Now With Fewer Magic Numbers!

Rotated <table> column headers is something that’s been covered before right here on CSS-Tricks, so shout-out to that for getting me started and helping me achieve this effect. As the article points out, if you aren’t using trigonometry to calculate your table styles, you’ll have to rely on magic numbers and your table will be brittle and any dreams of responsiveness crushed. 

Fortunately, in this case, we can take the trigonometry out and replace it with some careful geometry and … Read article “Rotated Table Column Headers… Now With Fewer Magic Numbers!”

Link

Overlapping Header with CSS Grid

Article

Increment Issue 13: Frontend

Increment is a beautiful quarterly magazine (print and web) published by Stripe “about how teams build and operate software systems at scale”. While there is always stuff about making websites in general, this issue is the first focused on front-end¹ development.

I’ve got an article in there: When frontend means full stack. I’ll probably someday port it over here and perhaps add some more context (there were some constraints for print) but I love how it turned … Read article “Increment Issue 13: Frontend”

Video

#188: Exploring the Overlapping Header Pattern

Snook published an article titled “Overlapping Header with CSS Grid” where he looks at a header design pattern that I feel transcends trends and has been popular forever. The idea is that the header is oversized and the main content area sneaks up into it and overlaps the background of the header. There is just something kinda nice and comforting about it.

My mind goes to the same place Snook’s does:

Historically, I’ve done this with negative margins.

Read article “#188: Exploring the Overlapping Header Pattern”
Link

Global CSS options with custom properties

Article

Building Your First Serverless Service With AWS Lambda Functions

Many developers are at least marginally familiar with AWS Lambda functions. They’re reasonably straightforward to set up, but the vast AWS landscape can make it hard to see the big picture. With so many different pieces it can be daunting, and frustratingly hard to see how they fit seamlessly into a normal web application.

The Serverless framework is a huge help here. It streamlines the creation, deployment, and most significantly, the integration of Lambda functions into a web app. To … Read article “Building Your First Serverless Service With AWS Lambda Functions”