A little something on @codepen: pure #CSS icosphere of spheres https://codepen.io/thebabydino/pen/poYRGmV
Very little code and I should be able to make the algorithm even more efficient. Pure CSS shading too.
#CodePenChallenge #CodePen #3D #code #geometry #maths #mathematics #coding #recursion #cssGradient #frontend #web #dev #webDev #webDevelopment #transform #css3D #cssTransform #cssVariables
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
Here's a super simple pure #CSS #3D hover effect on @codepen https://codepen.io/thebabydino/pen/ZYYXGLR
*Heavily* commented, every coding choice explained.
#code #coding #cssTransform #css3D #web #dev #webDev #webDevelopment #frontend
Losing it. This demo is broken in a very weird way in Chrome (all fine for Firefox & Epiphany).
https://codepen.io/thebabydino/pen/zqGzLR
The shape is made up of 3 parts = 1 octagonal prism + 2 square cupolae.
The faces of only one of the two square cupolae are flattened in the parent plane. Can't get it. #CSS #code #coding #frontend #web #dev #webDev #webDevelopment #3d #transform #css3d #cssTransform
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
Ana Tudor ๐ฏ
