I think the biggest bang for your buck is to learn OKLCH (or, “Oklachroma”)

• It’s based on human perception
• It can define any color
• the chroma value is a number between 0 and 0.37

Boilerform is a little HTML and CSS boilerplate to take the pain away from working with forms.

A deep dive into CSS masking

border-radius: 100vmax;

.full-width {
box-shadow: 0 0 0 100vmax var( --color );
clip-path: inset( 0 -100vmax );
}

The hsl() and hsla() functions also have 0% usage in the data, and they have just as good of support as the hex codes. Why? HSL can do anything HEX can do, except it’s far more readable and easier to adjust. It’s just better, really.

CSS has a lot of pretty rad and powerful features for managing image rendering these days. Let’s leverage some of these, like aspect-ratio, object-fit, and object-position for when we need to use a single image in many different contexts.

A collection of popular layouts and patterns made with CSS

When an element with a position: sticky style is wrapped, and it is the only element inside the wrapper element, this element, which was defined position: sticky will not stick.

When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed interactive tutorial, we'll pop the hood on the Flexbox algorithm and learn how to do remarkable things with it. ✨

CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

built with 🌮 by sarah_edo

You can set the numbers, and units of your columns and rows, and I'll generate a CSS grid for you! Drag within the boxes to create divs placed within the grid.

Though this project can get a basic layout started for you, this project is not a comprehensive tour of CSS Grid capabilities. It is a way for you to use CSS Grid features quickly.

Illustrated tips for making your UI and web designs more visually interesting · Backgrounds · Borders & dividers · Shadows · Text · Other techniques

I came across this article by Miguel Nunez about making a flexbox based gallery that’s well thought out and well written, but has one major flaw. The markup reeks of still thinking in the “table…

A zero-config, drop-in animation utility that automatically adds smooth transitions to your web app. Use it with React, Vue, Svelte, or any other JavaScript application.

Imagine you need to create a two-column layout. Yes, the simplest one: a column on the left, a column on the right, and some gap in-between. There’s an obvious modern solution for that:

.columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

A lot of things that required hacks, workaround and custom code are now supported natively in all major browsers. We take a look at them. Now that the security and support lifecycle for Internet…

A collection of 24 x 24 dp SVG spinners! (CSS & SMIL) - GitHub - n3r4zzurr0/svg-spinners: A collection of 24 x 24 dp SVG spinners! (CSS & SMIL)

A look at some useful and creative ways to style a list.

Custom markers with ::before #
Styling the ::before pseudo-element was a common way to create custom list markers before ::marker came along. But even now, it can allow us more flexibility, when we need it, for visually complex list styling.

Like ::marker, we can add our own custom bullet styles using the content attribute. Unlike using ::marker, we need to do some manual positioning, as we don't get the automatic benefits offered by list-style-position. But we can position it relatively easily with flexbox, and it does open up a greater number of possibilities for alignment. For instance, we could alternate the position of the marker:

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

Free loaders & spinners for your next project. Built with HTML, CSS and a soupçon of SVG. Available for copypasta or as a tree-shakeable React component library.