CodePen.IO @[email protected]

"Cool Spotlight Shadows" by Ryan Mulligan
https://codepen.io/hexagoncircle/pen/gORePQx

https://twitter.com/CodePen/status/1732848553272410421

RT Wakana Y.K.
This is a lightweight performance confetti animation designed for website background🎉
It can be interactively rotated with the mouse, and the background color, excluding the confetti, is transparent.
Demo : https://codepen.io/wakana-k/full/gOqqWdY
@CodePen #codepen #threejs #confetti

https://twitter.com/WakanaYK/status/1732706424290172981

RT Hannah
This week's #CodePenChallenge is long/short, giving me the opportunity to play with two of my favourite things: dachshunds and @greensock https://codepen.io/fionchadd/pen/eYxxOgR

https://twitter.com/fionchadd/status/1732725653449908523

"Butterfly Cow" by Stivs
https://codepen.io/stivaliserna/pen/oNbZgBK

https://twitter.com/CodePen/status/1732559141158449559

RT Jon Kantner
Skeuomorphic Setting Switches
https://codepen.io/jkantner/pen/YzBddqx @CodePen #CSS

https://twitter.com/jonkantner/status/1732261041956848065

RT Wakana Y.K.
This is an interactive animation that satisfies the destructive urge😎🔨
three-mesh-bvh is used for the diamond shine effect💎✨
Demo : https://codepen.io/wakana-k/pen/WNPLNjJ
@CodePen #codepen #threejs #ammojs

https://twitter.com/WakanaYK/status/1731977400802545895

RT Ecem Gokdogan
80s Music Facts | CSS Animation and CSS Grid Masonry-Style
https://codepen.io/ecemgo/pen/yLZGmWe
@CodePen #codepen #codepenchallenge #cpclongshort #animation #cssgrid

https://twitter.com/ecemgo/status/1732389066795061726

"Modern CSS only column hover" by Sten Hougaard
https://codepen.io/netsi1964/pen/dyaPrPK
(Also, isn't it amazing how you can chuck a checkbox anywhere in the DOM, then do like body:has(.checkbox:checked) and *do anything you want* to style the page based on if it's checked or not? Jeepers.)

https://twitter.com/CodePen/status/1732203241390395532

RT Nicolas Jesenberger
Let it snow 🌨️❄️
Responsive snow button in CSS ↔️
@CodePen: http://cdpn.io/YzBJVLw

https://twitter.com/njesenberger/status/1732075275322609754

RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a diagonal infinite shadow to your rounded image.
✅ No extra element (only the image tag)
✅ No pseudo-elements
✅ Optimized with CSS variables
Demo: https://codepen.io/t_afif/full/mdvaeoq via @CodePen
#CSS
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 💡 CSS Tip!
Add an infinite shadow to your image in any direction using a few lines of code
✅ No extra element (only the <img> tag)
✅ No pseudo-elements
✅ Only 2 CSS properties
✅ Works with rounded corners
Demo: http://codepen.io/t_afif/full/XWoNdGK via @CodePen
#CSS
</div>
https://twitter.com/ChallengesCss/status/1732033798110322808

RT Juxtopposed
couldn't resist turning this design into code.
✔️ responsive
✔️ interactive iOS squircle buttons
✔️ glassy
✔️ blurry
✔️ griddy
✔️ shiny
also can we normalize 3 buttons scattered across the page?
try it on @CodePen: https://codepen.io/Juxtopposed/full/mdvaezM
thoughts?

https://twitter.com/juxtopposed/status/1732045381255786652

RT jhey ▲🐻🎈
CSS Tip! 📜
You can create scroll-driven micro-interactions with animation-timeline and custom properties 🔥
.search {
animation: shrink;
animation-timeline: scroll();
animation-range: 0 calc(var(--header-height) * 0.5);
}
@​keyframes shrink {
to { width: calc(100% -… https://twitter.com/i/web/status/1731866102508949733

https://twitter.com/jh3yy/status/1731866102508949733

"Scroll with Light" by Gayane Gasparyan
https://codepen.io/gayane-gasparyan/pen/wvNXyYR

https://twitter.com/CodePen/status/1731817874912849993

RT Mads Stoumann
Hypno Tunnel — refresh for random palette https://codepen.io/stoumann/pen/RwvEPYN via @CodePen

https://twitter.com/madsstoumann/status/1731774867798638985

RT Mike-麥-Mai-v1.618
Thoughts?
Just a random pen @CodePen by me...
#css #DreamScenario
https://codepen.io/mikemai2awesome/pen/rNPoarj

https://twitter.com/mikemai2awesome/status/1731760722957197314

The December #CodePenChallenge starts today!
This month, we're working with pairs of opposites
Let's begin with Long & Short!
https://codepen.io/challenges/2023/december/1

https://twitter.com/CodePen/status/1731725961601728546

RT AdirCode 🔥
New CodePen!
Here's a small demo of the new "allow-discrete" attribute you can add to your animations, what it does is "smoothing" out properties like "display" and "visibility" to avoid any unintended instant shifts in flow.
Here's the @CodePen
https://codepen.io/Adir-SL/pen/qBgJqdv

https://twitter.com/adircode/status/1731575066989629791

RT JohnPhamous
0 javascript infinite carousel
- the trick is to duplicate the items
- for a11y, add `aria-hidden` to all the duplicated items
codepen 👇

https://twitter.com/JohnPhamous/status/1730651819314139326

RT David Aerne
Navigating uncharted visual problems on @CodePen is a joy for me! 🎨 I tackle it step by step, visualizing each move. Even if the rectangles could snug tighter with attractors, I love the visual appeal. Tightened it up a bit! Check it out: https://codepen.io/meodai/pen/QWYVmjY

https://twitter.com/meodai/status/1730621476741562806

RT Nicolas Jesenberger
It’s this time of the year 🎅❄️
(That hat was incredibly hard to make)
@CodePen: http://cdpn.io/QWYZEWZ

https://twitter.com/njesenberger/status/1730657330587427065