@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
"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.)
RT Nicolas Jesenberger
Let it snow 🌨️❄️
Responsive snow button in CSS ↔️
@CodePen: http://cdpn.io/YzBJVLw
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?
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
"Scroll with Light" by Gayane Gasparyan
https://codepen.io/gayane-gasparyan/pen/wvNXyYR
RT Mads Stoumann
Hypno Tunnel — refresh for random palette https://codepen.io/stoumann/pen/RwvEPYN via @CodePen
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
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
RT JohnPhamous
0 javascript infinite carousel
- the trick is to duplicate the items
- for a11y, add `aria-hidden` to all the duplicated items
codepen 👇
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
RT Nicolas Jesenberger
It’s this time of the year 🎅❄️
(That hat was incredibly hard to make)
@CodePen: http://cdpn.io/QWYZEWZ
RT Ana Tudor 🐯🖤🌻
So this pure CSS gravity button has been my most popular demo in November.
You can check out the live demo on @CodePen:
https://codepen.io/thebabydino/pen/bGzeQrv
"Generative Wavy Circles" by Lea Rosema
https://codepen.io/learosema/pen/abXWMOW
(That <shader-art> Web Component https://github.com/shader-art/shader-art)
RT Aaron Iker ✨
Original concept by @Jakubantalik 🙏
Just did the implementation ✨
🔗 On @CodePen https://codepen.io/aaroniker/pen/QXxexJ
<div class="rsshub-quote">
Dawid Jankowski: Daily product design inspiration #30 - Upload, Play & Pause animation by @aaroniker_me
</div> https://twitter.com/aaroniker_me/status/1730252515902386372
"Popsicle art" https://codepen.io/borntofrappe/pen/MWLodJz
A part of Gabriele Corti's "Zdog Monday": https://codepen.io/collection/PYyrNq
Zdog is a "round, flat, designer-friendly pseudo-3D engine for canvas & SVG" https://zzz.dog/
"LIQUID CONTENT REVEAL" by Ksenia Kondrashova
https://codepen.io/ksenia-k/pen/dyaeGgO
(So cool! In the video, I fork it and add "Knobs" to adjust some of the const values that make it all work, so they can be adjusted right from the preview itself.)
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
