Another background css pattern generator

Another one: https://patternizer.com/4rvv

Build semi-transparent, blurred glass-like backgrounds.

Generates beautiful shadows

TL;DR; instead of

• padding-left: use padding-inline-start
• padding-right: use padding-inline-end
• padding-top and -bottom: use padding-block
• width: use inline-size
• height: block-size
• overflow-x or -y: use overflow-inline or overflow-block
• position: top: use inset-block-start

Here is the pattern:

• inline for the reading axis. For us, it is left to right.
• block for the other (thickness) axis. For us, it is top to bottom.

Generate color gradients

You simply substract the side distance [y-axis] from the larger corner radius.

That way you end up with the right one for the smaller shape.

Seen on Twitter but I could not find the author again

When using auto-fill, the items will grow once there is no space to place empty tracks.

When using auto-fit, the items will grow to fill the remaining space because all the empty tracks will be collapsed to 0px.

More recently, the idea to treat attribute selectors on par with classes as first-class citizens has been proposed more widely. We’re no longer talking about edge cases, but challenging the very defaultness of classes, all while not giving up that sense of structure that many of us look for in CSS naming conventions.

👍‍

And think of aria-selectors too ! This promotes an a11y-first mindset — if there is no attribute or pseudo selector available to represent the state we wish to style, should we add one?

this is the principle that class selectors violate. An element’s classes are never guaranteed to reflect their state

Using data attributes instead seems a good idea to avoid impossible states!

And there’s a reason why

looks attractive — it’s mirroring the APIs we’re used to seeing in design systems and component libraries, but bringing it to vanilla HTML and CSS.
Indeed, it’s a small step from data attribute selectors to custom pseudo selectors or prop-based selectors when using Web Components (think ).

Styling based on ARIA attributes encourages more accessible markup, and styling based on custom data attributes makes it more robust and readable — a better experience for users and developers alike.

A CSS-only tree view

Define a grid fast

Creates animation based on a timeline

:last-child, :nth-last-child(2), nth-child(2), nth-child(3n), nth-child(even), nth-child(odd), nth-child(n+3), nth-child(-n+3), nth-child(3n+1), nth-child(3n-1)

TL;DR Use HTML attributes with the content: attr() CSS property.

Here is an example with a notification icon with a counter nudge.

Minimal CSS to look great: 58 bytes, 100 bytes, and 100 more bytes.