@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
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 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! 👇
"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
RT Mads Stoumann
Paint-By-Numbers — more checkboxes! #CodePenChallenge https://codepen.io/stoumann/pen/VwRejpR via @CodePen
RT Kass 🦈
🌟What practice and being consistet can do for you:
Both of these are made with just HTML & CSS
House: https://codepen.io/kassandrasanch/pen/bGVXKey
Polaroid: https://codepen.io/kassandrasanch/pen/WNxJZyz
https://twitter.com/KassandraSanch/status/1742569484093706541
RT Wakana Y.K.
明けましておめでとうございます🎍
Happy New Year 2024🥳
Demo : https://codepen.io/wakana-k/full/OJqMLGK
@CodePen #codepen
RT jhey ▲🐻🎈
Porting these glow cards to React can be done with a teeny hook 🤏
Promised to put a demo together for Alex 🙏
Was a neat opportunity to see how you could do a glow with text using CSS background-clip: text ✨
Given me another idea for a demo! 💡 https://twitter.com/i/web/status/1742015267490685417
<div class="rsshub-quote">
AlexIsMaking: @jh3yy Maybe this is a sign to do the same with the glow effect buttons 😉
</div> https://twitter.com/jh3yy/status/1742015267490685417
RT Mads Stoumann
Checkbox Cinema — Book you seats now! #CodePenChallenge https://codepen.io/stoumann/pen/eYXpEBa via @CodePen
"You Must Build a Lighthouse." a Pure CSS game by Ben Evans
https://codepen.io/ivorjetski/pen/OJXbvdL
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
