So you think you know box shadows?

By Chris Coyier on

David Gerrells has a bunch of fun rendering far too many CSS box-shadows for things that box-shadow was never meant to do. I found out my m1 can render a stupid number of these bad boys and so I set out to see just how far you can push them and boy did I. Because […]

SVG triangle of compromise

By Chris Coyier on

I enjoyed Micah R Ledbetter’s SVG triangle of compromise and generally think it’s a fair analysis of how any-which-way you use SVG on a page, you’re giving up some kind of nice ability it could have. For instance, if you use SVG through an <img> tag, it’s cached nicely, but you give up on CSS […]

Blurring

By Chris Coyier on

This 9-minute video from Juxtopposed on blurring is a great watch. There are an awful lot of ways to blur things on the web, from filter, backdrop-filter, <feGaussianBlur>, to WebGL. I particularly like the idea of masking an element with a backdrop-filter with a gradient so, for instance, a header can fade out how much […]

Ladybird & Independent Browser Engines

By Chris Coyier on

Web browsers are tens of millions of lines of code written over decades to adhere to long, complex standards specifications and defend against all manner of malicious behavior. I’ve long been convinced that an entirely new browser (not a fork or a skinning) would be impossible to build today. Just scratch pad math, maybe 100 […]

Clip Pathing Color Changes

By Chris Coyier on

Let’s look at a cool animated nav effect (from a recent post by Emil Kowalski) that uses CSS `clip-path` to move the highlighted nav item around. It’s an interesting look at this CSS feature and adds a lot of polish to a simple idea.

How we use DDEV, Vite and Tailwind with Craft CMS

By Chris Coyier on

I love a good post from real-world developers building real-world websites for clients that share how they work and the tools they use. Here, Joshua Pease of Viget shares How we use DDEV, Vite and Tailwind with Craft CMS, which is a change from webpack and Docker. Goodbye complex esoteric Webpack configuration, hello Vite. Goodbye complex […]

Web Performance Guide

By Chris Coyier on

I like how working on web performance is so well aligned with other worthy goals. A fast site is site more accessible to other people. A fast site tends to convert better. Using web standards and more native web technologies tends to lead to a faster site. SpeedCurve has published a pretty beefy and useful […]

::details-content Looks Helpful

By Chris Coyier on

The HTML for a <details> element is generally something like: See how I put two <p> elements in there? That’s totally fine. Everything that isn’t the <summary> is visually hidden until the <details> is open, either via the open attribute or the summary is clicked/tapped. So if you’re trying to select “all the content”, you’re […]

Recreating the THX “Deep Note” in JavaScript

By Chris Coyier on

I love that Alexander Keliris saw a paper sketch of that cool THX sound you hear in movie theaters and coded it using Tone.js. Sounds great I think. Great example of getting nerdsniped by an idea. I also saw Lea Rosema needed some short/simple 8-bit sounds recently and got nerdsniped into making them herself.