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
2️⃣ 1076 ♥️ Simplest inner glow card animation https://codepen.io/thebabydino/pen/WNVPdJg - a super simple pure #CSS demo I made in a few minutes to answer a reddit question and never expected would even get noticed much. It was my only 2024 demo to make into the most hearted 100 Pens of the year on @codepen.
#cssFilter #borderImage #glow #code #cssGradient #conicGradient #coding #web #dev #webDevelopment #webDev #frontend
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
4️⃣ 909 ♥️ neon hex https://codepen.io/thebabydino/pen/zGmdep
Most people know my CSS stuff, but this was my most hearted @codepen demo for some three quarters of a decade... and it's a #canvas one! The #JS feels dated nowadays, but oh, well... still got a soft spot for this one.
#code #coding #frontend #hexGrid #web #dev #webDev #webDevelopment #geometry
5️⃣ 850 ♥️ No SVG, no image fluid slider https://codepen.io/thebabydino/pen/qByGqOm
#JS used only for
a) feature support detection
b) updating slider value in --val
Uses only
1 × input[type=range] for actual slider
1 × output for current value display
1 × datalist for ruler
One of my best sliders on @codepen.
#CSS #slider #rangeInput #coding #web #dev #webDevelopment #webDev #code #frontend #cssGrid #cssMask #cssGradient
6️⃣ 816 ❤️ no sprite, no JS twitter 🤍 animation https://codepen.io/thebabydino/pen/RRRRZE
Behind the demo https://css-tricks.com/recreating-the-twitter-heart-animation/
Now twitter uses an SVG heart 👍 (that path data though 😵) and upon clicking, inserts a div with the sparks. There are better ways to do it... still better than sprites!
#CSS #code #coding #frontend #webDev #web #dev #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
8️⃣ 736 ♥️ Pure #CSS 1 div card patterns (no SVG, no images other than CSS gradients) - see it on @codepen https://codepen.io/thebabydino/pen/NWxBzRv
A bunch of variations on the pure CSS #halftone technique detailed in this article https://frontendmasters.com/blog/pure-css-halftone-effect-in-3-declarations/
#cssPattern #cssPatterns #cssGradient #halftonePattern #frontend #coding #web #dev #webDev #webDevelopment #code
9️⃣ 593 ❤️ Cycling gradient glow with no text duplication - see it on @codepen https://codepen.io/thebabydino/pen/rNPOpJK
A super simple, but cool #SVG #filter trick.
We create the gradient text.
The filter creates a blurred copy of it and places it underneath.
We then animate the #CSS #gradient stops... magic! 🪄✨
#cssGradient #svgFilter #glow #coding #filterEffect #gradientGlow #frontend #web #dev #webDev #webDevelopment #code
1️⃣1️⃣ 501 ❤️ Slice! https://codepen.io/thebabydino/pen/GRaKbZo
Definitely one of my faves I've made on @codepen in 2024.
No JS, no text duplication whatsoever, no images save for #CSS gradients. #SVG filters take care of both the texture and the slice + offset effect.🪄
Also contenteditable. 😼
Oh, and the code is heavily commented.
#cssGradient #svgFilter #filter #code #web #dev #webDev #webDevelopment #frontend #coding #textEffect #noise #grainy
1️⃣2️⃣ 486 ❤️ Pure #CSS 1 div card backgrounds https://codepen.io/thebabydino/pen/GRRpzNX
Using mask compositing, which I explained in this @csstricks article https://css-tricks.com/mask-compositing-the-crash-course/
Another where I should go through the code and improve it as it can be simplified nowadays... a lot even!
#cssMask #code #coding #cssGradient #web #dev #webDev #webDevelopment #frontend
1️⃣3️⃣ 480 ❤️ Pure #CSS 1 element #rainbow 🌈 spinner 2017 https://codepen.io/thebabydino/pen/YNjrRo - 1st remake of a thing I first coded in 2013.
I've since made 2 more versions with more modern (and better!) CSS:
2023 https://codepen.io/thebabydino/pen/poGyEyg
2019 https://codepen.io/thebabydino/pen/exwyby
#cssGradient #code #coding #frontend #web #dev #webDev #webDevelopment
Ana Tudor 🐯
demofox
Paul Shryock