#cssmaths — Public Fediverse posts

Just noticed this little @codepen demo got featured:

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

Detailed explanation for the how behind the mathy solution in this thread 👉 https://mastodon.social/@anatudor/116594229219732729

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Just noticed this little @codepen demo got featured:

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

Detailed explanation for the how behind the mathy solution in this thread 👉 https://mastodon.social/@anatudor/116594229219732729

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

That is, we need to add:
i*2*α_dx

If k > 1, then we need to add half a turn as well, that is:
round(down, k)*180°

Adding these to the angular progress along the edge, we get the conic-gradient angle producing a point that moves at constant speed along the perimeter.

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

That is, we need to add:
i*2*α_dx

If k > 1, then we need to add half a turn as well, that is:
round(down, k)*180°

Adding these to the angular progress along the edge, we get the conic-gradient angle producing a point that moves at constant speed along the perimeter.

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

We know the distance from the middle of the rectangle to the middle of the current edge.

It's half the length of the other edge:
j*50cqw + i*50cqh

Absolute value of the absolute distance of the current progress point to the middle of the edge it's on:
(p - .5)*(j*100cqh + i*100cqw)

These form a right triangle out of which we can get the angle of their hypotenuse with the axis perpendicular onto the current edge.

#CSS #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

We know the distance from the middle of the rectangle to the middle of the current edge.

It's half the length of the other edge:
j*50cqw + i*50cqh

Absolute value of the absolute distance of the current progress point to the middle of the edge it's on:
(p - .5)*(j*100cqh + i*100cqw)

These form a right triangle out of which we can get the angle of their hypotenuse with the axis perpendicular onto the current edge.

#CSS #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Progress along a vertical edge is:
mod(k, 1)/f
Progress along a horizontal one is:
(mod(k, 1) - f)/(1 - f)

Progress along a generic edge is:
p = j*mod(k, 1)/f + i*(mod(k, 1) - f)/(1 - f)

Length traveled along the current generic edge:
j*mod(k, 1)/f*100cqh +
i*(mod(k, 1) - f)/(1 - f)*100cqw

Signed relative distance from middle of the current generic edge: p - .5

We get the absolute value of this difference & its sign.

#CSS #coding #web #dev #webDev #webDevelopment #frontend #cssMaths #code

Progress along a vertical edge is:
mod(k, 1)/f
Progress along a horizontal one is:
(mod(k, 1) - f)/(1 - f)

Progress along a generic edge is:
p = j*mod(k, 1)/f + i*(mod(k, 1) - f)/(1 - f)

Length traveled along the current generic edge:
j*mod(k, 1)/f*100cqh +
i*(mod(k, 1) - f)/(1 - f)*100cqw

Signed relative distance from middle of the current generic edge: p - .5

We get the absolute value of this difference & its sign.

#CSS #coding #web #dev #webDev #webDevelopment #frontend #cssMaths #code

We also compute its complementary j = 1 - i.
Idea https://css-tricks.com/logical-operations-with-css-variables/

Basically, we have:
i = max(0, sign(mod(k, 1) - f))
j = 1 - i

i = 0, j = 1 on vertical edge (incl. corner)
i = 1, j = 0 on horizontal edge (after corner)

Now we compute things for going along vertical & horizontal edges separately and use i & j to switch between them. That is, multiply vertical results with j and horizontal ones with i.

#CSS #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

We also compute its complementary j = 1 - i.
Idea https://css-tricks.com/logical-operations-with-css-variables/

Basically, we have:
i = max(0, sign(mod(k, 1) - f))
j = 1 - i

i = 0, j = 1 on vertical edge (incl. corner)
i = 1, j = 0 on horizontal edge (after corner)

Now we compute things for going along vertical & horizontal edges separately and use i & j to switch between them. That is, multiply vertical results with j and horizontal ones with i.

#CSS #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Moving further, we'll be computing the progress of mod(k, 1). Starting from the top left corner, once we go across half a perimeter, the cycle of going along a vertical edge, then along a horizontal one repeats.

There are 2 cases:
mod(k, 1) <=f (going along a vertical edge)
mod(k, 1) > 1 (going along a horizontal one)

These two cases repeat once more after the halfway point (bottom left corner since we're starting from the top right).

#CSS #code #coding #web #dev #frontend #Maths #cssMaths

Moving further, we'll be computing the progress of mod(k, 1). Starting from the top left corner, once we go across half a perimeter, the cycle of going along a vertical edge, then along a horizontal one repeats.

There are 2 cases:
mod(k, 1) <=f (going along a vertical edge)
mod(k, 1) > 1 (going along a horizontal one)

These two cases repeat once more after the halfway point (bottom left corner since we're starting from the top right).

#CSS #code #coding #web #dev #frontend #Maths #cssMaths

If progress at the bottom left corner (= at half the perimeter starting from the top right corner) is 1, then progress at the bottom right corner is the height 100cqh over half the perimeter (one height 100cqh plus one width 100cqw):

f = 100cqh/(100cqh + 100cqw)

Dividing lengths is supported by Safari & Chrome + we have a Firefox fallback https://frontendmasters.com/blog/count-auto-fill-columns/#getting-the-number-of-columns

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

If progress at the bottom left corner (= at half the perimeter starting from the top right corner) is 1, then progress at the bottom right corner is the height 100cqh over half the perimeter (one height 100cqh plus one width 100cqw):

f = 100cqh/(100cqh + 100cqw)

Dividing lengths is supported by Safari & Chrome + we have a Firefox fallback https://frontendmasters.com/blog/count-auto-fill-columns/#getting-the-number-of-columns

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Anyway, what we want to animate here linearly isn't a conic-gradient() angle, it's the progress around the perimeter.

This is k, going from 0 to 2. When k is 0, we're at the top right corner. When it's 1, we're at the bottom left corner, having gone across half the perimeter.

What about the progress value at the bottom right? We'll be calling that f, but how much is it?

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Anyway, what we want to animate here linearly isn't a conic-gradient() angle, it's the progress around the perimeter.

This is k, going from 0 to 2. When k is 0, we're at the top right corner. When it's 1, we're at the bottom left corner, having gone across half the perimeter.

What about the progress value at the bottom right? We'll be calling that f, but how much is it?

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

We can also compute half the perimeter as:

100cqh + 100cqw

---

By the way, this container technique is also what I've used to compute the aspect ratio of images of unknown dimensions (and therefore aspect ratio) in order to determine along which edge they should get a blur extension to square - check out the article! https://frontendmasters.com/blog/non-square-image-blur-extensions/#unknown-aspect-ratio

#CSS #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

We can also compute half the perimeter as:

100cqh + 100cqw

---

By the way, this container technique is also what I've used to compute the aspect ratio of images of unknown dimensions (and therefore aspect ratio) in order to determine along which edge they should get a blur extension to square - check out the article! https://frontendmasters.com/blog/non-square-image-blur-extensions/#unknown-aspect-ratio

#CSS #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

Idea behind the mathy solution: card's dimensions are given by its text content. It has an absolutely positioned child .back covering its entire area, but placed behind. This .back is sized explicitly relative to its parent, so its pseudos know its dimensions if we make it a container: they're 100cqw and 100cqh. These allow us to compute the angles of the rectangle diagonal with the horizontal α_dx & with the vertical α_dy as:

α_dx = atan2(100cqh, 100cqw)
α_dy = 90° - α_dx

#CSS #code #cssMaths

Idea behind the mathy solution: card's dimensions are given by its text content. It has an absolutely positioned child .back covering its entire area, but placed behind. This .back is sized explicitly relative to its parent, so its pseudos know its dimensions if we make it a container: they're 100cqw and 100cqh. These allow us to compute the angles of the rectangle diagonal with the horizontal α_dx & with the vertical α_dy as:

α_dx = atan2(100cqh, 100cqw)
α_dy = 90° - α_dx

#CSS #code #cssMaths

On gradient borders & common issues with them https://www.reddit.com/r/css/comments/1tfmohm/comment/ombei2n/

If you've ever wanted to create constant length/ speed border segments on non-square boxes, the how behind the mathy, less code + working with border-radius solution & the stacked children solution (no border-radius).

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

On gradient borders & common issues with them https://www.reddit.com/r/css/comments/1tfmohm/comment/ombei2n/

If you've ever wanted to create constant length/ speed border segments on non-square boxes, the how behind the mathy, less code + working with border-radius solution & the stacked children solution (no border-radius).

#CSS #cssGradient #code #coding #web #dev #webDev #webDevelopment #frontend #Maths #cssMaths

#tinyCSStip

Sometimes, if you notice a teeny tiny misalignment and you cannot understand why because *nothing* in your CSS looks like it could have caused it... try using `round()` to round to an integer number of pixels.

It just solved my own tiny misalignment problem that was driving me batty. 🦇

#CSS #cssMaths #code #coding #frontend #web #dev #webDevelopment #webDev

#tinyCSStip

Sometimes, if you notice a teeny tiny misalignment and you cannot understand why because *nothing* in your CSS looks like it could have caused it... try using `round()` to round to an integer number of pixels.

It just solved my own tiny misalignment problem that was driving me batty. 🦇

#CSS #cssMaths #code #coding #frontend #web #dev #webDevelopment #webDev

Missed this, made on the 1st of Jan on @codepen:

✨ Sliding border glow on hover for beveled cards, heavily commented https://codepen.io/thebabydino/pen/EayVXKj

Trivial if we have `corner-shape` support & even simpler with `border-area`. But here it's cross-browser.

Detailed explanation of the Maths behind on Ko-fi/ Patreon. This way, you get to both become smarter and support my work so I can continue coding.

#CSS #Maths #cssMaths #cssGradient #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

Missed this, made on the 1st of Jan on @codepen:

✨ Sliding border glow on hover for beveled cards, heavily commented https://codepen.io/thebabydino/pen/EayVXKj

Trivial if we have `corner-shape` support & even simpler with `border-area`. But here it's cross-browser.

Detailed explanation of the Maths behind on Ko-fi/ Patreon. This way, you get to both become smarter and support my work so I can continue coding.

#CSS #Maths #cssMaths #cssGradient #cssMask #code #coding #frontend #web #dev #webDev #webDevelopment

Variable aspect ratio cards with conic gradients meeting along the diagonal.

First coded this when we didn't have inverse trigonometric functions in #CSS - can you figure out how on your own?

@csstricks post https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/

@codepen demo https://codepen.io/thebabydino/pen/XWpyowX

#code #CSSMaths #trigonometry #Maths #cssGradient #conicGradient #coding #web #dev #webDev #webDevelopment #frontend

Variable aspect ratio cards with conic gradients meeting along the diagonal.

First coded this when we didn't have inverse trigonometric functions in #CSS - can you figure out how on your own?

@csstricks post https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/

@codepen demo https://codepen.io/thebabydino/pen/XWpyowX

#code #CSSMaths #trigonometry #Maths #cssGradient #conicGradient #coding #web #dev #webDev #webDevelopment #frontend

Pure, minimal #CSS responsive hex #grid with no breakpoints 🎇

Live on @codepen https://codepen.io/thebabydino/pen/QwWQqeR

#Maths #cssGrid #cssLayout #cssMaths #web #dev #webDev #webDevelopment #code #coding #frontend

Pure, minimal #CSS responsive hex #grid with no breakpoints 🎇

Live on @codepen https://codepen.io/thebabydino/pen/QwWQqeR

#Maths #cssGrid #cssLayout #cssMaths #web #dev #webDev #webDevelopment #code #coding #frontend

Exploding triakis octahedron (short pyramids added on top of the faces) turning into an excavated octahedron (short pyramids dug into the faces) with pure #CSS #3D - live on @codepen: https://codepen.io/thebabydino/pen/DyrNrL

#Maths #geometry #polyhedra #css3D #cssTransform #cssTransforms #coding #code #transform #frontend #cssMaths #Sass #web #dev #webDevelopment #webDev #trigonometry #polyhedron #octahedron

Exploding triakis octahedron (short pyramids added on top of the faces) turning into an excavated octahedron (short pyramids dug into the faces) with pure #CSS #3D - live on @codepen: https://codepen.io/thebabydino/pen/DyrNrL

#Maths #geometry #polyhedra #css3D #cssTransform #cssTransforms #coding #code #transform #frontend #cssMaths #Sass #web #dev #webDevelopment #webDev #trigonometry #polyhedron #octahedron

Live demo on @codepen: https://codepen.io/thebabydino/pen/VYaJBoj

#CSS #cssVariables #cssMaths #cssGrid #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

Live demo on @codepen: https://codepen.io/thebabydino/pen/VYaJBoj

#CSS #cssVariables #cssMaths #cssGrid #cssLayout #code #coding #frontend #web #dev #webDev #webDevelopment

#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filter

#CSS #cssGradient #cssVariables #code #web #dev #webDevelopment #webDev #frontend #coding #cssMaths

#cssChallenge2025
How would you do this? A gradient tinted image, the gradient tint gradually disappearing from left to right on hover, then coming back from left to right on exit.

✨ single `img` elem (so no pseudos)
✳️ cross-browser
🚫 no JS
🚫 no SVG filter

#CSS #cssGradient #cssVariables #code #web #dev #webDevelopment #webDev #frontend #coding #cssMaths

There are n equally sized items arranged in half a circle on the left, from top to bottom, with the same gap g in between. How do you do it? Cross-browser, same #CSS (≤20 declarations) should work when changing their number/ gap.

Try to code it yourself before checking my solution https://www.reddit.com/r/Frontend/comments/1oi4dfe/comment/nlzvlry/

Live on @codepen: https://codepen.io/thebabydino/pen/ZYQjZwq

#Maths #geometry #trigonometry #code #cssMaths #coding #frontend #cssLayout #webDev #webDevelopment #web #dev #cssGrid #cssTransform #cssVariables

There are n equally sized items arranged in half a circle on the left, from top to bottom, with the same gap g in between. How do you do it? Cross-browser, same #CSS (≤20 declarations) should work when changing their number/ gap.

Try to code it yourself before checking my solution https://www.reddit.com/r/Frontend/comments/1oi4dfe/comment/nlzvlry/

Live on @codepen: https://codepen.io/thebabydino/pen/ZYQjZwq

#Maths #geometry #trigonometry #code #cssMaths #coding #frontend #cssLayout #webDev #webDevelopment #web #dev #cssGrid #cssTransform #cssVariables

Because someone just hearted this... here's one of my earlier @codepen demos using CSS trigonometric functions https://codepen.io/thebabydino/pen/ExePBZp

#CSS #Maths #trigonometry #cssMaths #web #dev #webDevelopment #webDev #code #coding #frontend

Because someone just hearted this... here's one of my earlier @codepen demos using CSS trigonometric functions https://codepen.io/thebabydino/pen/ExePBZp

#CSS #Maths #trigonometry #cssMaths #web #dev #webDevelopment #webDev #code #coding #frontend

For now, we can use the `tan(atan2())` hack by @JaneOri in order to extend support to Firefox as well: https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j

You can see the Firefox fallback version in action on @codepen https://codepen.io/thebabydino/pen/ZYGVwLM

The `round()` is there to avoid rounding errors in getting the angle via `atan2()` and then going back from an angle to a ratio using `tan()` (see DevTools screenshot).

#CSS #maths #code #coding #frontend #web #dev #webDev #webDevelopment #layout #cssLayout #cssMaths #cssGrid #maths

For now, we can use the `tan(atan2())` hack by @JaneOri in order to extend support to Firefox as well: https://dev.to/janeori/css-type-casting-to-numeric-tanatan2-scalars-582j

You can see the Firefox fallback version in action on @codepen https://codepen.io/thebabydino/pen/ZYGVwLM

The `round()` is there to avoid rounding errors in getting the angle via `atan2()` and then going back from an angle to a ratio using `tan()` (see DevTools screenshot).

#CSS #maths #code #coding #frontend #web #dev #webDev #webDevelopment #layout #cssLayout #cssMaths #cssGrid #maths

... though there are really cool things we could do with it, things that I've been waiting to be able to do ever since mathematical functions were added to the spec https://nitter.net/anatudor/status/1537881090223853568

You can see more examples in this @csstricks article by Amit Sheen https://css-tricks.com/css-typed-arithmetic/

#CSS #cssMaths #code #coding #webDev #frontend #web #dev #webDevelopment

... though there are really cool things we could do with it, things that I've been waiting to be able to do ever since mathematical functions were added to the spec https://nitter.net/anatudor/status/1537881090223853568

You can see more examples in this @csstricks article by Amit Sheen https://css-tricks.com/css-typed-arithmetic/

#CSS #cssMaths #code #coding #webDev #frontend #web #dev #webDevelopment

Did you know you could get the number of `auto-fit` columns of a grid by dividing the grid width (known to the grid's children/ pseudos as `100cqw` if we make the grid a container) to the unit column width `--u`?

See the live demo on @codepen https://codepen.io/thebabydino/pen/zxGyRZX

No Firefox yet... and the bug 🪲 looks like it's dormant 😿 https://bugzilla.mozilla.org/show_bug.cgi?id=1827404

#CSS #layout #cssLayout #cssMaths #grid #cssGrid #code #coding #frontend #calc #web #dev #webDev #webDevelopment #CodePen #FirefoxBug #bug

Did you know you could get the number of `auto-fit` columns of a grid by dividing the grid width (known to the grid's children/ pseudos as `100cqw` if we make the grid a container) to the unit column width `--u`?

See the live demo on @codepen https://codepen.io/thebabydino/pen/zxGyRZX

No Firefox yet... and the bug 🪲 looks like it's dormant 😿 https://bugzilla.mozilla.org/show_bug.cgi?id=1827404

#CSS #layout #cssLayout #cssMaths #grid #cssGrid #code #coding #frontend #calc #web #dev #webDev #webDevelopment #CodePen #FirefoxBug #bug

For all Ko-fi/ Patreon supporters...

First off, thank you for supporting my work and helping me stay afloat!

And second, something new dropped today...

✨ https://ko-fi.com/post/Blobby-reveal-on-hover-E1E31KKI57

✨ https://www.patreon.com/posts/blobby-reveal-on-137845036

PS: hope you like SVG filters because there's more cooking/ coming soon. Next thing *very* soon because it's functional (even if not pretty yet) & dying to share it.

#SVG #filter #CSS #svgFilter #coding #code #frontend #cssGradient #web #dev #webDevelopment #cssVariables #webDev #cssMaths

For all Ko-fi/ Patreon supporters...

First off, thank you for supporting my work and helping me stay afloat!

And second, something new dropped today...

✨ https://ko-fi.com/post/Blobby-reveal-on-hover-E1E31KKI57

✨ https://www.patreon.com/posts/blobby-reveal-on-137845036

PS: hope you like SVG filters because there's more cooking/ coming soon. Next thing *very* soon because it's functional (even if not pretty yet) & dying to share it.

#SVG #filter #CSS #svgFilter #coding #code #frontend #cssGradient #web #dev #webDevelopment #cssVariables #webDev #cssMaths

I have a new article out on Frontend Masters: get the number of auto-fit/ auto-fill columns in #CSS
https://frontendmasters.com/blog/count-auto-fill-columns/

Check it out, I can assure you you'll probably learn something new. At the very least that some issues have recently been fixed... 😼

#code #coding #frontend #gridLayout #cssLayout #cssMaths #web #webDev #dev #webDevelopment

I have a new article out on Frontend Masters: get the number of auto-fit/ auto-fill columns in #CSS
https://frontendmasters.com/blog/count-auto-fill-columns/

Check it out, I can assure you you'll probably learn something new. At the very least that some issues have recently been fixed... 😼

#code #coding #frontend #gridLayout #cssLayout #cssMaths #web #webDev #dev #webDevelopment

I made a little thing on @codepen :pure #CSS #scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.

Inspiration https://x.com/avanderpotte/status/1923382432784412771
(via @codrops motion highlights roundup)

cc @bramus

#scrollAnimation #code #coding #frontend #cssGradient #cssMask #conicGradient #cssMaths #maths #scrollEffect #cssGrid #web #dev #webDev #webDevelopment

I made a little thing on @codepen :pure #CSS #scroll controlled swipe transition https://codepen.io/thebabydino/pen/azObZOe

Note how the swipe always clockwise, regardless of scroll direction and how the text fades in after the swipe in.

Inspiration https://x.com/avanderpotte/status/1923382432784412771
(via @codrops motion highlights roundup)

cc @bramus

#scrollAnimation #code #coding #frontend #cssGradient #cssMask #conicGradient #cssMaths #maths #scrollEffect #cssGrid #web #dev #webDev #webDevelopment

Someone asked how to create such cross-browser wave dividers that keep the same height as the width changes, so here's my take on it https://www.reddit.com/r/css/comments/1kcmabf/comment/mq5ck6m/

Live on @codepen https://codepen.io/thebabydino/pen/PwwQxdb?editors=0100

`mask` is another option, but needs an extra container and container query units, so not as well supported, plus it wouldn't be exactly the same shape.

#CSS #clipPath #cssClipPath #Sass #maths #cssMaths #code #coding #web #dev #webDevelopment #webDev #frontend

Someone asked how to create such cross-browser wave dividers that keep the same height as the width changes, so here's my take on it https://www.reddit.com/r/css/comments/1kcmabf/comment/mq5ck6m/

Live on @codepen https://codepen.io/thebabydino/pen/PwwQxdb?editors=0100

`mask` is another option, but needs an extra container and container query units, so not as well supported, plus it wouldn't be exactly the same shape.

#CSS #clipPath #cssClipPath #Sass #maths #cssMaths #code #coding #web #dev #webDevelopment #webDev #frontend

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

#tinyCSStip Simplifying animations with variables and mathematical functions.

Same result, just not writing almost the same `text-shadow` a bunch of times in a bunch of keyframes.

Live test on @codepen https://codepen.io/thebabydino/pen/MYWXgdZ

#CSS #Maths #code #coding #frontend #web #dev #webDev #webDevelopment
#cssMaths #trigonometry

#tinyCSStip Simplifying animations with variables and mathematical functions.

Same result, just not writing almost the same `text-shadow` a bunch of times in a bunch of keyframes.

Live test on @codepen https://codepen.io/thebabydino/pen/MYWXgdZ

#CSS #Maths #code #coding #frontend #web #dev #webDev #webDevelopment
#cssMaths #trigonometry

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 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