photog.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A place for your photos and banter. Photog first is our motto Please refer to the site rules before posting.

Administered by:

Server stats:

242
active users

#cssgrid

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

Tbh, the words and lines in that post just turn into worms dancing on the page for my brain, so don't ask me what I think about it, I haven't been able to read it.

But if you're interested in no JS masonry and have a better brain, check it out developer.chrome.com/blog/maso

Chrome for DevelopersFeedback needed: How should we define CSS masonry?  |  Blog  |  Chrome for DevelopersA comparison of the two proposed masonry specifications.
#CSS#code#coding
Continued thread

We add a `.shape` element which in also covers all of the 4 cells of its parent's grid and also inherits its `.back` parent grid via `subgrid`.

This element creates our shape via two pseudos positioned in the 1st grid cell (clipped) and across the 2nd column (avoiding heading).

Continued thread

We create a 2×2 header grid with the height of the 2nd row and the width of the 1st column given by the dimensions of the element (the heading) in the cell where they meet.

We also have another `.back` element covering all 4 grid cells & inheriting parent grid via `subgrid`.

2×2 grid on header.

`.back` stretches across all grid cells & inherits this grid.

Heading just in bottom left cell.

Random #CSS thought of the morning: annoying thing about #containerQueries is a container needs to have children, we can't just use its text content as container item (like for #cssGrid).

Relevant for when we want container size relative font-size.

Take codepen.io/thebabydino/pen/MWR

We cannot have that text content be the text content of the article element (the container whose size it depends on), it needs to be wrapped in a div!

I have a CSS grid layout with three columns: "sidebar main .". The sizes are 350px auto minmax(0, 350px). This creates a nice effect where the main content is exactly at the center of the screen and the sidebar is to the left of it.

The problem is that when I make the screen smaller, the right empty column gets smaller but the main column also gets smaller. Is it possible to make it so that the main column only starts to get smaller when it actually has to, when the right column is already 0 width? Or should I construct this layout differently?

What I want is a layout where the main column is in the middle of the page and the sidebar is to the left of that, like:

>   [][  ]     <

#CSS #GridLayout #CSSGrid #WebDev