#containerqueryunits — Public Fediverse posts

Wake up, wake up, wake up!

If you're a Cheetah+ supporter on Ko-fi or Patreon, then first of all thank you 🙏 and second, I've just published a massive post about an improved technique for flexible irregular shapes.

❇️ https://ko-fi.com/post/New-year-new-technique-S6S21RHL27

❇️ https://www.patreon.com/posts/new-year-new-147448951

#CSS #SVG #filter #cssGrid #cssLayout #cssSubgrid #containerQueryUnits #code #container #svgFilter #coding #frontend #web #dev #webDev #webDevelopment

Haven't been posting much coding stuff this past week as I've found it difficult to focus on it given the state of things in my country 😞

But... I have a new article out!

Using Container Query Units Relative to an Outer Container https://frontendmasters.com/blog/using-container-query-units-relative-to-an-outer-container/

Sparked by a question @mattwilcox asked here.

#CSS #containerQuery #frontend #coding #web #dev #webDev #webDevelopment #code #containerQueryUnits

Because I saw a @codepen demo creating a hex grid using my well over a decade old nested and reverted transforms technique to get the shape + MQs...

Here's a super simple modern #CSS grid + clip-path + mathematical functions responsive version with no breakpoints https://codepen.io/thebabydino/pen/QwWQqeR

#cssLayout #cssGrid #clipPath #hexagon #cssMaths #containerQueryUnits #code #cssVariables #coding #frontend #webDev #web #dev #webDevelopment

Because this quick @codepen thing I made is getting hearted for some reason... corner grid item with inner corner rounding and text wrapping around the corner

https://codepen.io/thebabydino/pen/LEYObpy

Some grid + shape-outside + container query units #CSS magic + #SVG #filter magic.

¯\_(ツ)_/¯

#cssLayout #cssGrid #code #coding #web #dev #webDev #webDevelopment #frontend #containerQueryUnits #frontend

Here's a little thing I made for the 1st #CodePenChallenge of '25: pure #CSS tilt & zoom grid on scroll!

Check it out on @codepen

https://codepen.io/thebabydino/pen/jENzprY

Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.

Chromium only.

#scroll #scrollAnimation #cssVariables #cssGrid #cssLayout #cssMaths #containerQueryUnits #svgFilter #SVG #filter #code #coding #frontend #webDev #webDEvelopment #web #dev

Here's a little thing I made for the 1st #CodePenChallenge of '25: pure #CSS tilt & zoom grid on scroll!

Check it out on @codepen

https://codepen.io/thebabydino/pen/jENzprY

Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.

Chromium only.

#scroll #scrollAnimation #cssVariables #cssGrid #cssLayout #cssMaths #containerQueryUnits #svgFilter #SVG #filter #code #coding #frontend #webDev #webDEvelopment #web #dev

Here's a little thing I made for the 1st #CodePenChallenge of '25: pure #CSS tilt & zoom grid on scroll!

Check it out on @codepen

https://codepen.io/thebabydino/pen/jENzprY

Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.

Chromium only.

#scroll #scrollAnimation #cssVariables #cssGrid #cssLayout #cssMaths #containerQueryUnits #svgFilter #SVG #filter #code #coding #frontend #webDev #webDEvelopment #web #dev

Here's a little thing I made for the 1st #CodePenChallenge of '25: pure #CSS tilt & zoom grid on scroll!

Check it out on @codepen

https://codepen.io/thebabydino/pen/jENzprY

Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.

Chromium only.

#scroll #scrollAnimation #cssVariables #cssGrid #cssLayout #cssMaths #containerQueryUnits #svgFilter #SVG #filter #code #coding #frontend #webDev #webDEvelopment #web #dev

Here's a little thing I made for the 1st #CodePenChallenge of '25: pure #CSS tilt & zoom grid on scroll!

Check it out on @codepen

https://codepen.io/thebabydino/pen/jENzprY

Using pure CSS scroll driven animations, grid, variables, mathematical functions, container query units. Also uses an SVG filter for the dissolve effect.

Chromium only.

#scroll #scrollAnimation #cssVariables #cssGrid #cssLayout #cssMaths #containerQueryUnits #svgFilter #SVG #filter #code #coding #frontend #webDev #webDEvelopment #web #dev

#tinyCSStip

Pretty sure I've posted about this before, but a quick search at the morning hours didn't find it, plus I saw someone ask about it yet again¹, so... fixed aspect-ratio box within variable size container!

Live on @codepen https://codepen.io/thebabydino/pen/ogvZdoZ?editors=1101

¹here https://www.reddit.com/r/css/comments/1hhf4x3/comment/m2s81yr/

#CSS #aspectRatio #code #coding #web #frontend #dev #webDevelopment #webDev #containerQuery #containerQueryUnits #container

#tinyCSStip Container queries on the body? Why, when media queries have better support?

Well, container queries make it an IF depending on the width of the body's content-box.

That is, subtracting the scrollbar IF we have one (we can't know).

**Heavily** commented @codepen demo https://codepen.io/thebabydino/pen/ZEgjpYL

#CSS #container #containerQuery #layout #cssLayout #grid #cssGrid #frontend #code #web #dev #webDev #webDevelopment #coding #containerQueryUnits