#cssmaths — Public Fediverse posts

#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

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

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

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

#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

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

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

Saw https://www.youtube.com/watch?v=An3QMWg3m1c linked last evening & gave the challenge a quick go myself.

My approach was a mostly #CSS one, with minimal HTML (no extra wrappers) and JS (used only to update top item index, ~200 bytes minified).

While it was working, it wasn't pretty, so today I polished the demo & heavily commented the CSS - check it out on @codepen: https://codepen.io/thebabydino/pen/jENaPjd

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

#tinyCSStip/ fun fact: same aspect ratio is also what we need for a regular hexagon because that can made up of only equilateral triangles!

We just need more points for the clip-path (6 for a hexagon vs. 3 for a triangle).

#CSS #cssMaths #trigonometry #maths #mathematics #frontend #code #coding
#web #dev #webDevelopment #webDev #hexagon

#tinyCSStip Want to create a triangle with all edges equal in 4 simple #CSS declarations?

Such a triangle also has all vertex angles equal = (sum of angles in a triangle)/3 = 180°/3 = 60°

👉 https://en.wikipedia.org/wiki/Sum_of_angles_of_a_triangle

Knowing its edge length a, its height is a·sin(60°).

Aspect ratio of the box
a/(a·sin(60°)) = 1/sin(60°)

#cssMaths #Maths #Mahematics #code #trigonometry #triangle #coding #webDev #frontend #web #webDevelopment #dev

Also on the topic of circle sectors/ pie slices 🥧 - I've updated an old SO answer of mine https://stackoverflow.com/a/14185845/1397351

This goes through the simplest code possible in 2024 for a few cases (equal slices or not, interactive/ with content or not).

#CSS #cssGradient #Sass #conicGradient #clipPath #cssMaths #Maths #geometry #trigonometry #code #coding #frontend #web #dev #webDev #webDevelopment

As someone hearted ❤️ a 2015 demo of mine, I decided that since #CSS got better (and hopefully I did too), I should go for a quick 2024 remake.

Here it is on @codepen
https://codepen.io/thebabydino/pen/wKoVGN

It's mindblowing 🤯 how much I could reduce the (esp. compiled) code - check it out!

HTML by 73%!
CSS by 70%!

I repeat: I shaved off at least 70% from each! ‼️

#Sass #SCSS #Haml #Pug #preprocessor #cssVariables #HTML #cssGrid #cssLayout #cssMaths #code #coding #frontend #web #dev #webDev #webDevelopment

A little pure #CSS 3D demo I made on @codepen last year: torus knot out of neon tiles https://codepen.io/thebabydino/pen/poqmrNg

I saw this @beesandbombs .gif https://x.com/beesandbombs/status/1497594041164185608 and got the idea I could CSS something like it, but then I never got to posting it publicly...

#torusknot #3D #geometry #topology #knotTheory #maths #mathematics #cssMaths #code #coding #frontend #web #dev #webDev #webDevelopment #cssTransforms