@> 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).
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
https://twitter.com/cloneprotocol66/status/1747502312204165395
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 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 https://twitter.com/i/web/status/1746694548351320464
The CSS Stunts #CodePenChallenge continues!
This week, we're showing off with :has()
https://codepen.io/challenges/2024/january/3
> [A] tech interview that I actually enjoyed was the one that got me hired at Shopify [ ...Back then, I got an image of a tic-tac-toe game and was told to code it up in whichever set up I was comfortable with. I did it in CodePen
https://chenhuijing.com/blog/my-ideal-frontend-interview/
No. 7 on the Top Pens of 2023 is "Responsive Image Carousel" by noirsociety
https://codepen.io/noirsociety/pen/ZEwLGXB
No View Transitions here; it's just plain HTML, CSS, and JavaScript setting an active list item and letting transitions and animations apply.
No. 9 is "Blend-Mode Sticky Nav & Hero" by Jalin Burton
A lovely landing page design where the text and logo remains readable because of the blending being used. When readability is threatened, it doesn't take long to come back. Tension!
https://codepen.io/jalinb/pen/ExOgOBZ
No. 10 in 2023's Top 100 Pens!
Just an incredibly designed interactive futuristic looking Pen — "ClimaCode" by Rafa
https://codepen.io/RAFA3L/pen/ZEmBzEv
(Top 100 at https://codepen.io/2023/popular/pens/)
"Gradients Along SVG Path" by Ksenia Kondrashova
https://codepen.io/ksenia-k/pen/mdzYKmm
(You can't set a gradient-along-a-<path> in SVG really, so instead GSAP is cleverly used here to set <circle>s along a path which can simulate that gradient effect, and much more!)
RT Gayane Gasparyan
3 of my pens are in the @CodePen 's most hearted pens of 2023 🎉
P.S. this year's list is full of UI elements #CSS #uiux #animation #Webdesign
❤️ https://codepen.io/2023/popular/pens/10
1⃣https://codepen.io/gayane-gasparyan/pen/wvxewXO
2⃣https://codepen.io/gayane-gasparyan/pen/LYJEoZM
3⃣https://codepen.io/gayane-gasparyan/pen/yLQyQZR
RT Ecem Gokdogan
Codepen has published a list of the 100 most hearted demos of 2023. https://codepen.io/2023/popular/pens
The list includes five of my pens!🎉 I'm so grateful🙏
🟪https://codepen.io/ecemgo/pen/YzBZjjb
🟦https://codepen.io/ecemgo/pen/ZEVojzN
🟩https://codepen.io/ecemgo/pen/QWzeQOK
🟧https://codepen.io/ecemgo/pen/GRzpEpB
🟥https://codepen.io/ecemgo/pen/yLZJdWW
RT jhey ▲🐻🎈
This week's @CodePen challenge is all about CSS art and illustration 🖼️
Great resources on the challenge page and an article written by me all about how to create different shapes and approach different patterns 🤙
All that practice led to this 😅 Article below! 👇
It's week two of the January #CodePenChallenge!
For our next CSS stunt, we're doing:
CSS Illustrations 🎨
https://codepen.io/challenges/2024/january/2
"When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render."
Repo: https://github.com/ayoayco/web-component-base
Demo: https://codepen.io/ayoayco-the-styleful/pen/ZEwoNOz
The native `wheel` event in JavaScript. It fires on mouse wheel movement or track pads, and doesn't matter if any scrolling actually happens.
https://buff.ly/47shFpP
RT Álvaro Montoro
10 Cool CodePen Demos from December 2023:
- ThreeJS experiments by @ouchpixels & @pumaparded
- Christmas trees by @amit_sheen & @WakanaYK
- Interactive components by @ChallengesCss, @WakanaYK, @hexagoncircle & Josetxu
- CSS Doodles by @yuanchuan23, maxi83c
https://twitter.com/alvaro_montoro/status/1742696945213374791
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
