CodePen.IO @[email protected]

RT Mark Boots 🇺🇦🌻
Created a 3D dice clock in CSS with a bit of JS
➡️
#codepen #css @CodePen
https://codepen.io/MarkBoots/pen/eYewRGz

https://twitter.com/markboots/status/1501526010864492545

RT Jhey 🔨🐻✨
Pure CSS Infinity Slinky ✨
For @BraydonCoyer's @css_art challenge 💪
Works in light and dark mode 🌞🌝
Powered with the Properties API ✨
The CSS tip? Mimic a repeated animation-delay by generating keyframes with a CSS preprocessor 🤓
👉
http://codepen.io/jh3y/pen/WNXBdyZ

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

RT Aaron Iker
Button with a glow hover - created by @sketch 💎
Demo @CodePen
Code challenge from @avstorm 🤝
http://cdpn.io/PoOvoaY

https://twitter.com/aaroniker_me/status/1501213525494185993

RT T. Afif @ CSS Challenges
💡 CSS Tip!
Create a Pulse loader with a few lines of code:
✅ 1 element
✅ 1 keyframes
✅ 11 declarations
Demo:
⚠️ Warning ⚠️: You may get hypnotized if you spend too much time in front of it!😵‍💫
#CSS
http://codepen.io/t_afif/full/dyZaYMB

https://twitter.com/ChallengesCss/status/1499756796461916166

RT S. Shahriar is exploring CSS 🎨 that's why he
transform + gradients + generators = ✨ CSS magic ✨
I created a CSS Knob widget by styling the native range slider! No extra elements 🤩
@CodePen demo 🔗
- Only 1 line of HTML 🤯
- Keyboard accessible 😄
- Added a transition for the bouncy effect!
https://codepen.io/ShadowShahriar/pen/zYPePva

https://twitter.com/ShadowShahriar/status/1499697295767453699

RT Ana Tudor 🐯
Updated another slider demo on @CodePen:
Compiled HTML went from 1.1kB to 3.5kB due to config CSS vars, but compiled CSS got reduced to ~¼ of what it was before (from 32.5kB to under 9.5kB!) & JS to ~⅕!
Fully responsive, no extra elem/pseudo for thumbs.
https://codepen.io/thebabydino/pen/MYGBWZ

https://twitter.com/anatudor/status/1499446404716056583

RT Maxime Malfilâtre
This week, the #codepenchallenge theme is time travel. And, when you say "time travel", I can't help thinking about Back to the future, Marty and Emmet.
So here is my css funko Marty.
Hope you'll like it.
via @CodePen :
Thanks 4 looking.
https://codepen.io/maxew33/full/bGYQpdV

https://twitter.com/m4xew/status/1499277598433685505

RT Ryan Mulligan
What an absolute honor and pleasure this was – I had some time to chat with @chriscoyier on @CodePen Radio, discussing some of my top CodePens and how the platform played a big role in my career and personal growth. Check it out:
https://blog.codepen.io/2022/03/02/357-ryan-mulligan/

https://twitter.com/hexagoncircle/status/1499411270478426119

RT Adam Kuhn
somehow hit 4k followers over at CodePen so I whipped up this 3d animation with nary a hint of JS
thanks yall
https://codepen.io/cobra_winfrey/full/OJOBqwZ

https://twitter.com/cobra_winfrey/status/1499077585199841281

RT Amit Sheen
<CSS />
working on materials for my upcoming workshop, and started thinking about 3D animation in a *skewed* space. I need to find more ways to use it in the future.
Full code @CodePen:
https://codepen.io/amit_sheen/pen/VwrqaJo

https://twitter.com/amit_sheen/status/1499055622666571784

RT Kevin Levron
psrdnoise test, thanks to Stefan Gustavson, Ian McEwan and @JCGT_announce !
#codepen #threejs
https://codepen.io/soju22/full/podQMwz

https://twitter.com/soju22/status/1499010716661006338

RT Bence
A fruit themed texture 👀
Orange Skin 🍊 (548 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/RwjqgXj

https://twitter.com/finnhvman/status/1498697321923686400

RT Stef Walter
#CSSAnimations
Time flies, a few times ago I built this fun demo to teach the difference between CSS animations and transitions. It uses some SVGs animated in CSS. That was a lot of fun!
➡️
https://codepen.io/stephaniewalter/full/xxVgReM

https://twitter.com/WalterStephanie/status/1498573474582913024

RT Mark Boots
This weeks @CodePen challenge is 'time-travel'. I created 3d css-only rotating gyroscope portal.
Let me know what you think of it ➡️
#codepen #codepenchallenge #timetravel
https://codepen.io/MarkBoots/pen/jOaQVda

https://twitter.com/markboots/status/1498676237014913029

RT • nanou •
Pure CSS: 'Say Cheese'
-
https://codepen.io/antoniasymeonidou/pen/qBPoJXB

https://twitter.com/NanouuSymeon/status/1496886738836496392

RT Brandon McConnell 🇺🇦✊🏼
Replicated this repeated background-image animation by @Codrops using only Pure CSS (via SCSS) and a single div, no JavaScript required 😁
Check out my implementation on @CodePen 👇🏼
Codrops: Repetition Image Hover Effects
A simple and fun hover effect with repeated image layers that get scaled up and down.
#animation #frontend #hover #webdesign #uidesign #javascript #gsap #effect
https://tympanus.net/codrops/2022/02/22/repetition-image-hover-effects/

https://twitter.com/branmcconnell/status/1496875055418159112

RT Maxi83c
Qué les parece este pikachu dentro de una caja de correo que dibuje con CSS.
Puedes verlo en
➡️
Para que pikachu salga de la caja debes hacer clic en la tapa y mantenerlo presionado.
#CSS
https://codepen.io/maxi83c/full/JjOZdWX

https://twitter.com/Maxi83c_/status/1496659989183799306

RT Jhey 🔨🐻✨
Tip: You can make elements resizable with a single CSS property ✨
Rule? The element's overflow must not be visible! 🧐
.🌭 {
resize: horizontal | vertical | both;
overflow: hidden | scroll | auto;
}
Here's a pure CSS Hotdog! 🚀
👉
http://codepen.io/jh3y/pen/bGYjbPQ

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

RT Jon Kantner
Created a text logo animation where each stroke is drawn in multiple times with less transparency than the last
https://codepen.io/jkantner/pen/dyZjWvG

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

RT 🍡RYDENのあいどる🍡あやこ
キラキラ🌏☄️✨
一年半前のものだけど。threejsの基本的な理解でつくれる。シェーダーも書かない #threejs #webgl #creativecoding
https://codepen.io/ayakoyokoya/pen/oNxVvEO

https://twitter.com/yokoyaayako/status/1496844487146221576