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
Styled native range input with time value display on @codepen: https://codepen.io/thebabydino/pen/raYJwO
Uses this CSS mathematical functions trick to display time/ decimal numbers via `counter` in pseudo `content` https://www.reddit.com/r/css/comments/1pasvms/comment/nuna6b3/
#CSS #Maths #cssMaths #code #coding #web #dev #webDev #webDevelopment #frontend
#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
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
Ana Tudor 🐯