Skip to main content

Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Article Growth Summit

I’m speaking at The Official Growth Summit coming up in August. “Learn how to build and grow your site, from start to scale”, as they say. Lovely, thick, diverse set of speakers. It’s a little bit outside my normal spheres which makes it extra exciting for me. Selena Jackson:

The goal of this event is to inspire, connect you with the tools you need, and help you build your community. Sessions will take place across three tracks: blogging, business, and creative.

Read article “ Growth Summit”

Accordion Rows in CSS Grid


Position Vertical Scrollbars on Opposite Side with CSS

Fair warning: I can’t say I recommend this in general because it breaks a very strong expectation of where scrollbars are, which are useful for a lots of folks, not to mention, a core accessibility feature for many.

But it is a fascinating CSS trick and the web is a big place with an unknowable magnitude of situations where sometimes weird solutions are needed.… Read article “Position Vertical Scrollbars on Opposite Side with CSS”


WordPress-Powered Landing Pages on a Totally Different Site via Cloudflare Workers


Pausing a GIF with details/summary

Steve Faulkner has a clever idea here. You can show an (animated) GIF and overlay a pause/play button on top of it — which is really a <details>/<summary> element. When toggled, a (non-animated) JPG inside covers the GIF, effectively “pausing” it.… Read article “Pausing a GIF with details/summary”


What ya need there is a bit of templating

I had a fella write in to me the other day. He had some HTML, CSS, and JavaScript, and it just wasn’t behaving like he thought it ought to. The HTML had some placeholders in it and the JavaScript had some data in it, and the assumption was that the data would fill the placeholders.

To those of us with some degree of web knowledge, we can look at this and see why it’s not working like he thought it … Read article “What ya need there is a bit of templating”


Using Flexbox and text ellipsis together


When do you use inline-block?

The inline-block value for display is a classic! It’s not new and browser support is certainly not something you need to worry about. I’m sure many of us reach for it intuitively. But let’s put a point on it. What is it actually useful for? When do you pick it over other, perhaps similar, options?… Read article “When do you use inline-block?”


Levels of Fix

On the web, we have the opportunity to do work that fixes things for people. It’s fascinating to me how different the scope of those fixes can be.… Read article “Levels of Fix”


How to Italicize Text

HTML and CSS offer us the ability to italicize text. I’m talking about text like this. Let’s cover everything you’ll need to know.… Read article “How to Italicize Text”