@No. 2 on the Top Pens of 2023 is "3D Card Hover" from Gayane Gasparyan.
It's such a *surprising* hover effect involving such beautiful art it's impossible not to like.
https://codepen.io/gayane-gasparyan/pen/wvxewXO
No. 3 on the Top Pens of 2023 is "Glowy Hover Effect" by Ines.
Such a clever tactic to duplicate the DOM in a layer directly on top, make coloring adjustments, then mask it to only show a portion of it.
https://codepen.io/inescodes/pen/PoxMyvX
RT jhey ▲🐻🎈
CSS Tip! 🤯
You can create a CSS-only version of this balance slider using a scroll animation on the underlying input[type=range] 🚀
::-webkit-slider-thumb {
view-timeline: --thumb inline;
}
Scroll animation driven by the slider thumb animates a number between the "min" and…
<div class="rsshub-quote">
Malay Vasa: Prototyped a balance slider today ✨
How do you like your coffee?
</div>
https://twitter.com/CodePen/status/1749487550337516024
RT Wakana Y.K.
Finally finished up that terrain generator I’d left hanging for two years ⛰️
It is now possible to download the generated geometry in OBJ format.
Demo : https://codepen.io/wakana-k/full/BabRoLW
..and Caldera type is here : https://codepen.io/wakana-k/full/JjvXJxw
@CodePen #codepen #threejs #terrain
RT Nicolas Jesenberger
Had to do these toggles in CSS 🫠
@CodePen: http://cdpn.io/mdomqGR
<div class="rsshub-quote">
Sebastiano Guerriero: To the young designers thinking a light on a button means skeuomorphism is back: we used to craft wooden UIs in 2013 😄
</div> https://twitter.com/CodePen/status/1748349865149776240
RT Ksenia Kondrashova
In the meantime, six (!) of my works made it to the top 100 @CodePen Most Hearted demos of 2023 🤩
https://codepen.io/2023/popular
Let me show you those animations again
⬇️
RT masahito art
Made a new browser game - control catblob to catch all the mouseblobs, but watch out for the dogblobs!
The level is randomly generated, and becomes progressively difficult as you complete a game.
@CodePen
https://codepen.io/Ma5a/full/ZEPeJmp
#javascript #game
RT NATALIΞ
Shoutout to myself for this CSS player piano I created 7 years ago after binging Westworld. Just needed a tiny update and it still works after all this time
https://codepen.io/NRo/full/PbXreE
RT Ksenia Kondrashova
Here's a #glb laptop model, optimised to 642KB and rendered with @threejs
It's all set to be animated
+ comes with a screen plane to map *any* texture on
+ some #GSAP (@greensock ) timelines I created already
Live demo & source code: https://codepen.io/ksenia-k/full/gOEgyaj
Hosted on @CodePen
RT Mads Stoumann
I re-worked my entry for this week's #CodePenChallenge It now has animated lines and works in both light- and dark mode! https://codepen.io/stoumann/pen/zYbNRNL via @CodePen
RT Amit Sheen
Auxetic cubes animation with pure #CSS.
Live demo and full code at @CodePen: https://codepen.io/amit_sheen/pen/XWGpJOV
RT Wakana Y.K.
Finally finished up that terrain generator I’d left hanging for two years ⛰️
It is now possible to download the generated geometry in OBJ format.
Demo : https://codepen.io/wakana-k/full/BabRoLW
..and Caldera type is here : https://codepen.io/wakana-k/full/JjvXJxw
@CodePen #codepen #threejs #terrain
RT Ksenia Kondrashova
In the meantime, six (!) of my works made it to the top 100 @CodePen Most Hearted demos of 2023 🤩
https://codepen.io/2023/popular
Let me show you those animations again
⬇️
RT Nicolas Jesenberger
Had to do these toggles in CSS 🫠
@CodePen: http://cdpn.io/mdomqGR
<div class="rsshub-quote">
Sebastiano Guerriero: To the young designers thinking a light on a button means skeuomorphism is back: we used to craft wooden UIs in 2013 😄
</div> https://twitter.com/njesenberger/status/1748349764272378079
No. 4 on the Top Pens of 2023 is Vincent Van Goggles' "Modern Button Styles - 45 CSS Only Buttons".
https://codepen.io/Gogh/pen/GRPoqQW
> QX82 is a tiny Javascript engine that lets you create games and experiences inspired by the look and feel of a retro 80s computer. It's not an emulator or a fantasy console: it's just a Javascript library.
https://btco.github.io/qx82/
No. 5 on the Top Pens of 2023 is Jhey's "Night && Day Toggle"
https://codepen.io/jh3y/pen/LYgjpYZ
It's a great one to reference for beautiful colors and shadows, not to mention an accessible approach to a <button> that is either pressed or not (like a proper toggle).
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
