Search

Centering Things

By Chris Coyier on

Nikita Prokopov with a pretty humorous article about centering things in web design. This is my claim: we, as a civilization, forgot how to center things. Centering things is almost trivial in CSS at this point. There are different approaches, because there are different situations. The knowledge to do so is pretty easy to find. […]

The HTML, CSS, and SVG for a Classic Search Form

By Chris Coyier on

Let’s build a search form that looks like this: That feels like the absolute bowl-it-down-the-middle search form right now. Looks good but nothing fancy. And yet, coding it in HTML and CSS I don’t think is perfectly intuitive and makes use of a handful of decently modern and slightly lesser used features. The Label-Wrapping HTML […]

Feedback on Masonry Layout

By Chris Coyier on

Jen Simmons posted Help us invent CSS Grid Level 3, aka “Masonry” layout over on the WebKit blog the other day and is actively soliciting feedback. Our hope is that web designers and developers chime in (post to social media, write blog posts) with your thoughts about which direction CSS should take. Don’t mind if I do. Do […]

Things That Can Break aspect-ratio in CSS

By Chris Coyier on

CSS has an aspect-ratio property, which has had full support since around 2021. It can be a very satisfying property to use, because it can help match how your brain 🧠 works or what the desired design outcome does better than forcing dimensions does. “I need a square here” or “I need to match the […]

Gap is the new Margin

By Chris Coyier on

In 2020, Max Stoiber wrote the 🌶️ spicy Margin considered harmful. On one hand, it seems silly. The margin property of CSS is just a way to push other elements away. It’s very common and doesn’t feel particularly problematic. On the other hand… maybe it is? At least at the design system component level, because […]

A CSS-Powered Add/Remove Tags UI

By Preethi Sam on

Checkboxes and labels used to have to be right next to each other to be a potent UI duo. You could do trickery like this: But now, thanks to :has() in CSS, we’re not beholden to that structure anymore. We can :has() it all, as it is said. Now that these HTML elements have some autonomy, without losing their connection […]

Text Effects

By Chris Coyier on

Looks like Mandy Michael has been busy lately! I’m just seeing her fairly new Text Effects site, which has a growing collection of cool looks for text with demos and tutorials (GOLD!). Then I noticed her Variable Fonts site has kind of joined the fray with a similar design and a third site, Text Lab as […]

What You Need to Know about Modern CSS (Spring 2024 Edition)

By Chris Coyier on

My goal with this bookmarkable guide is to provide a list of (frankly: incredible) new additions to CSS lately. There is no hardline criteria for this list other than that these things are all fairly new and my sense is that many people aren’t aware of these things. Or even if they are, they don’t […]