Delicious

When you nest elements with border-radius, the inner element needs less radius than the outer element. This is some classic advice on this, and a future-looking fix.

Creating entry and exit animations for elements has always been tedious. Nowadays, we can do it with just a few lines of pure CSS, without a single line of JS.

The one where I share my dislike for WordPress (again)

text-box-trim examples and playground (previously known as leading-trim) - jantimon/text-box-trim-examples

Effortlessly extract vibrant colors from images in RGB, HEX, and HSL formats.

Somehow we forgot how to center rectangles and must find our way back

Open source calendar components for selecting single dates or date ranges. Framework-agnostic, themeable, localizable, accessible.

A blog about CSS, front-end development, the web, and beyond.

Last week, Jeremy Keith wrote about what he calls HTML Web Components. Some people treat Web Components like JS library components, where everything is rendered with JavaScript. But Jeremy has a different suggestion… Try not to bring React’s mindset with you… Think about composibility with existing materials. Do you really need to invent an entirely new component from scratch? Or can you use HTML up until it reaches its limit and then enhance the markup?

A dependency-free Web Component that generates progressively-enhanced collapsible regions using ARIA States and Properties. - jgarber623/aria-collapsible

In this comprehensive guide, Temani Afif explores different techniques for creating common shapes with the smallest and most flexible code possible.

Create Hexagonal, Square and Radial grid dotted/pixelated patterns for free. PNG and SVG export available.

Amit Sheen demonstrates using `:has()` to apply styles conditionally when a certain `` in a `` element is chosen by the user and how we gain even more conditional styling capabilities when chaining `:has()` with other pseudo-classes, such as `:not()` — no JavaScript necessary.

A framework for mostly-reusable graphics with svelte

A blog about CSS, front-end development, the web, and beyond.

Unleash the power of templates to generate, modify, and visualize JSON data with ease.

A Tailwind plugin to easily generate fluid clamp() values with every utility.

Learn about our Oklch Palette Generator, a tool designed to simplify creating gradient palettes by ensuring uniform lightness and vibrant colors.

Create new colors based on another color's channels and values.

Description

Style queries will unlock many doors. An ability to alternate a value of any variable that I presented in my previous article might seem to be trivial by itself, but what if there is a hidden depth in how we can utilize it? One interesting case is the ability to emulate `inherit()` — a way to access the previous state of a custom property.

I’ve been having a lot of fun creating reusable Web Components, so here are three that I’ve built and been using this so far this year.

Alternative to Netlify/Decap CMS. Modern, fast, lightweight, Git-based headless CMS. Free & open source. UX-driven development. Made with Svelte. - sveltia/sveltia-cms

Primo is a visual CMS that makes it a blast to build pages, manage content, and edit code - one block at a time.