收藏 / 列表

Ahmad Shadeed - A Deep Dive Into object-fit And background-size In CSS

We’re not always able to load different-sized images for an HTML element. If we use a width and height that isn’t proportional to the image’s aspect ratio, the image might either be compressed or st

Techniques , Tools , Css , Browsers

Victor Ayomipo - CSS min() All The Things

Did you see this post that Chris Coyier published back in August? He experimented with CSS container query units, going all in and using them for every single numeric value in a demo he put together

Techniques , Tools , Css

Preethi Sam - The Times You Need A Custom @property Instead Of A CSS Variable

We generally use a CSS variable as a placeholder for some value we plan to reuse — to avoid repeating the same value and to easily update that value across the board if it needs to be updated. :roo

animation , Css , Design

Jhey Tompkins - The Path To Awesome CSS Easing With The linear() Function

To paraphrase a saying that has always stuck with me: “The best animation is that which goes unnoticed.” One of the most important concepts of motion design on the web is making motion “feel right.”

animation , coding , Css

Juan Diego Rodríguez - Gatsby Headaches And How To Cure Them: i18n (Part 2)

In Part 1 of this series, we peeked at how to add i18n to a Gatsby blog using a motley set of Gatsby plugins. They are great if you know what they can do, how to use them, and how they work. Still,

Guides , Gatsby , plugins , Static Generators

Geoff Graham - How Smashing Magazine Uses TinaCMS To Manage An Editorial Workflow

Smashing Magazine is drastically different today than it was just a few years ago, and you may not have even noticed. That’s how it often is with back-end development — the complete architecture cha

cms , Case Studies , Smashing

Louis Lazaris - Top Front-End Tools Of 2023

Over the past 12 months, I’ve shared hundreds of tools in my newsletter, Web Tools Weekly. I feature tons of practical libraries, helpers, and other useful things for front-end and full-stack develo

workflow , Techniques , Round-Ups , Tools

Brecht De Ruyte - CSS Scroll Snapping Aligned With Global Page Layout: A Full-Width Slider Case Study

You know what’s perhaps the “cheapest” way to make a slider of images, right? You set up a container, drop a bunch of inline image elements in it, then set overflow-x: auto on it, allowing us to swi

Tools , Css , Case Studies