lingo.lol is one of the many independent Mastodon servers you can use to participate in the fediverse.
A place for linguists, philologists, and other lovers of languages.

Server stats:

66
active users

#csslayout

0 posts0 participants0 posts today
Continued thread

2️⃣ `feColorMatrix`: swap channels ☆ interactive demo, adaptive layout - check it out on @codepen codepen.io/thebabydino/full/QW

An interactive, responsive demo illustrating how `feColorMatrix` can be used to swap channels. Another very special one.

#SVG #filter #svgFilter #JS #interactive #javascript #code #coding #frontend #CSS #web #dev #webDevelopment #webDev #cssGrid #cssLayout

Behind the demo mastodon.social/@anatudor/1122

#cssWish That we could have a zero count for the number of columns in `repeat()`.

That repeat count is often computed. Let's say I want double the width for selected column k out of n columns:

```
repeat(var(--k), var(--w))
calc(2*var(--w)
repeat(calc(var(--n) - var(--k) - 1), var(--w))
```

#CSS#code#coding

#tinyCSStip if you want to make an absolutely positioned pseudo cover its parent's entire `padding-box`, use `inset: 0`!

(love grid for stacking/ full coverage too, but there are differences between how the two solutions work and there are cases when absolute positioning is still preferable)

#CSS#code#coding

#tinyCSStip Let's say we want a 90° rotated element (like a range input because rotation is the only way we can make it vertical) to fully cover its flexible size (think `clamp()` using `%` values, grid item on a flexible grid and stuff like that) parent.

We can make this parent a container and use container query units to style our element.