Tessera
Folgen

Matthias Zöchling

@cssence.com

#CSS enthusiast & #A11Y advocate. Makes websites and design systems. Works for https://george-labs.com in Vienna, Austria.

111 Posts143 Follower120 Folgt
⭑ salma@whitep4nth3r.com · 4mo ago

we don't talk enough about how cool the color-interpolation-method is in CSS gradients all of these slices have the same gradient: linear-gradient(#00ffff 0%, #ff00ff 100%) each one is just using a different colour interpolation

A demonstration of the same gradient defined as a light blue to fuschia gradient, with 5 different color interpolation methods. From left to right, srgb, which kind of muddies the blended colours in the middle to a light pastel purple, lch, which moves seems to move to the blue colour quicker, not creating the purple muddiness, oklch, which does move through the purple but in a more subtle way, oklab, which remains more pink than anything, and hsl, which adds a very dark almost internet blue at the centre of the gradient
Piccalilli@piccalil.li · 4mo ago

This is not an article that Steve, the author, thinks should exist in a healthy industry, but the shape of our industry — especially right now — makes this sort of article very necessary and hopefully helpful to you in your job. piccalil.li/blog/applyin...

Applying accessibility fixes with stealth for the greater good

This is not an article that Steve, the author, thinks should exist in a healthy industry, but the shape of our industry — especially right now — makes this sort of article very necessary and hopefully...

piccalil.li

Adam Argyle@nerdy.dev · 2y ago

#CSS trick not enough folks know about: painting into the sub boxes of an element - border - padding - content you can paint into one, or all of them differently! here's a gradient border, a solid padding fill, and a gradient content (inner) box see fur yerself codepen.io/argyleink/pe...

div { border: 20px solid transparent; padding: 20px; background: linear-gradient(in oklch, cyan, lime) content-box, conic-gradient(deeppink 0 0) padding-box, linear-gradient(to top in oklch, cyan, lime) border-box; }a box filled in 3 different way as described in the post
Bramus@bram.us · 5mo ago

New in Chromium 148: detect at-rule support in CSS with `@supports at-rule(@keyword)` www.bram.us/2026/03/15/a... Chrome 148 is currently available on the Canary and Dev release channels. It goes stable at the end of April.

Detect at-rule support in CSS with @supports at-rule(@keyword)

Back in January 2022, I wrote about an exciting new CSS Working Group decision: a function to detect at-rule support using @supports at-rule(@keyword). Fast forward to today, and the CSS Conditional R...

bram.us

Kevin Powell@kevinpowell.co · 6mo ago

corner-shape is one of those things where when you first see it, it's like "oh cool, I can make a scoop!" It's something new, which is fun, but it can be hard to think of good use cases. But, as @cassidoo.co looks at here, it's going to open up a lot of possibilities 🙂 cassidoo.co/post/css-cor...

Making interesting borders with CSS corner-shape

You can make cool beveled, rounded, notched, scooped, and elliptical borders with the new CSS corner-shape property!

cassidoo.co

Una Kravets@una.im · 7mo ago

You know that annoying experience on mobile websites where you need to find the little close button and can't swipe a menu closed? The solution is simpler than you think. With basic CSS scroll APIs, you can get built-in interruptible swipe gestures 🥳