Ana Tudor 🐯Pure #CSS #3D chamfering sequence on @codepen: tetrahedron → chamfered tetrahedron → cube and back https://codepen.io/thebabydino/pen/MWVJVKE
#geometry #maths #css3D #CSSclipPath #cssTransform #cssTransforms #coding #web #dev #webDev #webDevelopment
7️⃣ 749 ❤️ Pure #CSS Möbius 6hedrons https://codepen.io/thebabydino/pen/mJojKd
The how behind I live coded it in 30 minutes https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/
Could be improved with CSS variables nowadays, see https://css-tricks.com/simplifying-css-cubes-custom-properties/ as well as by using CSS trigonometric functions.
#3D #Maths #geometry #cssTransform #cssTransforms #trigonometry #code #web #dev #webDev #webDevelopment #coding #frontend
Here's a little image gallery demo I made on @codepen
https://codepen.io/thebabydino/pen/LEYrVaE
Almost pure #CSS. Minimal #JS for changing the index of the current image on click.
For the how ensuring the #3D rotated side images have a given 2D projection on the screen, see https://stackoverflow.com/a/75063640/1397351
#cssTransforms #cssTransform #coding #web #dev #webDev #webDevelopment #code #frontend #Maths #geometry
3️⃣ 1044 ♥️ Pure #CSS gravity button https://codepen.io/thebabydino/pen/bGzeQrv - a bit mixed about it, it was just an exercise in getting a certain result - don't use it in the wild!
My first ever @codepen demo to get to 1K ♥️. And it got copied left and right.
¯\_(ツ)_/¯
#cssTransforms #cssTransform #coding #web #dev #webDev #webDevelopment #code #frontend
I turn 13 on @codepen in June, so here are my 13 most hearted demos:
1️⃣ 1092 ♥️ #CSS infinite #scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb - my only demo to ever get to 1K ♥️ without being in most hearted of the year first
mostly CSS scroll-driven animations + tiniest bit of JS (~200 bytes for infinity part)
#cssVariables #cssTransforms #coding #code #frontend #cssTransform #3D #web #webDev #webDevelopment #dev #maths #mathematics #geometry #filter
Someone just hearted this demo I made on @codepen back in 2018 and I noticed it still said it only works in Blink browsers.
https://codepen.io/thebabydino/pen/BPxYBr
Not anymore! As of the summer of '24, Firefox also supports registering & animating custom properties! So this is now cross-browser! 🎉🥳
#CSS #3D #cssTransforms #cssTransform #neon #rainbow #code #coding #frontend #web #webDevelopment #dev #webDev
Haven't had it in me to do anything for the past week's #CodePenChallenge, so here's a demo from earlier this year that fits: #CSS infinite scroll gallery https://codepen.io/thebabydino/pen/XJrYqGb
One of my most hearted demos ever & my only one to get over 1000 ❤️ without being in the most hearted of previous year.
#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment
I made a thing: scroll-driven, almost pure #CSS infinite circular gallery rotation - check it out on @codepen
https://codepen.io/thebabydino/pen/XJrYqGb
Using scroll-driven animations and the tiniest bit of JS for the infinity part of it.
Made with 🖤 for this week's #CodePenChallenge.
cc @bramus
#SVG #cssGrid #scrollAnimation #filter #svgFilter #cssFilter #cssLayout #3D #cssTransforms #code #coding #frontend #web #dev #webDev #webDevelopment
A little pure #CSS 🌟🎄 #animation I made on @codepen a few years ago https://codepen.io/thebabydino/pen/bGwYVOm
#3D #transform #cssTransforms #code #cssAnimation #coding #frontend #xmas #web #dev #webDevlopment #webDev #tree #stars
Because I came across a question on reddit https://www.reddit.com/r/css/comments/1h05nxx/comment/lz2u77w/
One common gotcha with #CSS 3D transforms is using opacity < 1 on an element that should have 3D transformed children. This effectively flattens all the semi-transparent element's children into the plane of their parent.
#3D #transform #cssTransforms #css3D
#web #dev #webDev #webDevelopment #code #coding #frontend