226 private links
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
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.