CodePen.IO @[email protected]

RT Paulina Hetman
With Love
https://codepen.io/pehaa/pen/wvPgboY

https://twitter.com/PeHaa/status/1491051683161718785

New month, new #CodePenChallenge!
February's theme is Time ⏱
This week, we kick it off with a Timeline
Thanks @retool for sponsoring!
https://codepen.io/challenges/2022/february/1

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

RT Jhey 🔨🐻✨
3D Custom QR Codes 🤓
• Customizable via props ✨
• Could be quite a cool widget for your home page 🚀
• Respects "prefers-color-scheme" 🌛
• Using @greensock && @reactjs 😎
👉
http://codepen.io/jh3y/pen/NWwROzx

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

RT Álvaro Montoro
Three CSS comics related to the current Texas weather and my love for CSS animations.
Demos on @CodePen:
1.
2.
3.
Haters will say I copy-pasted the code and just made minor changes... which I totally did 😋
https://codepen.io/alvaromontoro/full/abVmqra
https://codepen.io/alvaromontoro/full/BamLrBz
https://codepen.io/alvaromontoro/full/rNYMdBv

https://twitter.com/alvaro_montoro/status/1489645543425032196

RT S. Shahriar | Exploring CSS 🎨
I created this CSS art for my best friend to appreciate the love and support she has given me since the beginning 😄
This is my first animated No-DIV CSS art of the month ✨
CSS Geometric Blooming Flower 🌻
@CodePen 🔗
https://codepen.io/ShadowShahriar/pen/vYWXKpK

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

RT AdirCode
Having fun with some hover states on buttons and links, was thinking a lot about scaling it up so I won’t need a custom hover state for each element and instead I’ll have something more generic that can fit any project.
Here’s the collection in @CodePen:
https://codepen.io/collection/eJdPRk

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

RT Jon Kantner
Bouncy Counter
https://codepen.io/jkantner/pen/vYWGbzO

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

RT S. Shahriar | Exploring CSS 🎨
Here is the CSS 3D Chessboard model I made earlier
This was my first CSS creation that was featured in CSS Weekly and also in Kevin Powell's YouTube video 🤩🎉
CodePen 🔗
CSS Weekly issue🔗
Kevin's video🔗
https://codepen.io/ShadowShahriar/pen/JjXaOqe
https://css-weekly.com/issue-429/
https://youtu.be/VJGBjSGPpVk?t=2623

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

RT Ale ☻
CSS TIP💡📝
conic-gradient + background-clip: text =
A pretty cool text effect 🌈🦄✨
CodePen:
https://codepen.io/pokecoder/pen/gOXrxVY

https://twitter.com/pokecoder/status/1488627028270235650

RT Bence
I try to signify these patterns with a relevant emoji, stretching this one a bit 😀
White Fence 🤺 (549 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/bGYpwzV

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

RT tiffany choong ⚡️
CSS only tiger wishes you a happy #LunarNewYear!
#codepen @CodePen //
http://codepen.io/tiffachoo/pen/vYWLYRR

https://twitter.com/tiffachooo/status/1488545108974784513

RT Jhey 🔨🐻✨
Number Range Slider 🧮
A @reactjs component with @greensock ✨
New series where I build things from Instagram Reels that are designed in Figma 🚀
This one according to the comments would be easier to code. Spoiler alert: It wasn't 😅
👉
http://codepen.io/jh3y/pen/XWzmGad

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

RT Adam Fuhrer
"Negative space." — #Genuary2022 / Day 31
#Genuary #Generative
https://codepen.io/adamfuhrer/pen/MWOKgpq

https://twitter.com/adamfuhrer/status/1488149500854218754

RT Smashing Magazine
“How I make CSS art”. A wonderful deep-dive by @yosracodes.
CodePen
Article
https://codepen.io/yosracodes/pen/YzQLYOX
https://yosracodes.hashnode.dev/how-i-make-css-art

https://twitter.com/smashingmag/status/1488260992270282760

RT AdirCode
Here are two animations, both written with @SassCSS and both have 140 divs animating simultaneously
One is ID based meaning all CSS selectors target a specific element, the other is using nth-of-type() instead
The ID one is much smoother, here’s the code:
https://codepen.io/Adir-SL/pen/dyZYqdr

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

RT Álvaro Montoro
CSS comic strip: problems at the barbershop.
Source code @CodePen:
I doubted if the first panel should read "border-radius: 100%? 0%?" But having the barber speak English and get an answer in CSS made it better for the surprised face... maybe.
https://codepen.io/alvaromontoro/full/yLPYWBv

https://twitter.com/alvaro_montoro/status/1487849694088904708

RT Kaz
Preach @CodePen 🙌

https://twitter.com/sanja_kaz/status/1486971072545423363

RT Chris Gannon
Claymorphic Toggle @CodePen
https://codepen.io/chrisgannon/pen/BawvjdR

https://twitter.com/ChrisGannon/status/1487010660018003973

RT Adam Kuhn
went and animated some svg noise. you can click to regenerate color patterns & shuffle around turbulence values if that's a thing you're into
https://codepen.io/cobra_winfrey/full/MWOWEdb

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

RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a cool rounded frame to your image with a few lines of code.
✅ No extra element and No pseudo element
✅ Only the <img> tag
✅ Easy to adjust using CSS variables
Demo:
#CSS
https://codepen.io/t_afif/pen/GROJrNw

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