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
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
Ana Tudor ๐ฏ