@It's the final week of the "Time" #CodePenChallenge ⏰
Let's wrap it up with Time Travel!
Thanks @retool for sponsoring!
https://codepen.io/challenges/2022/february/4
RT Bence
Had this pattern for a while, couldn't put my finger on what it reminded me of. Thanks to the one and only @sableRaph for the suggestion 🙌
Hard Candy 🍬 (420 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/xxPJPZR
RT Amit Sheen
🔊 "Today on CodePen Radio"... ME!
I had the honor of meeting @chriscoyier for a short chat, and talk about some of my favorite pens, including the one that started it all, the one that was done by mistake, and more.
Tune in to the full episode, here:
https://blog.codepen.io/2022/02/23/356-amit-sheen/
RT Cyd
I really want to use this clip path animation in a real project, but for now here it is on @CodePen:
https://codepen.io/Sidstumple/pen/vYWrrem
RT Adam Kuhn
Re @CodePen challenge this week is 'timekeeping' so here's an animated 3d css cubic clock with a nice jaggedy svg filter for a touch of organic texture & some box-reflect just because
thanks for lookin'
https://codepen.io/cobra_winfrey/full/JjOvxYG
https://twitter.com/cobra_winfrey/status/1496304236208001027
RT AdirCode
Pie charts with pure #CSS, done with variables for more flexibility.
I wish I could also animate them but the CSS gradients are a bit limited.
Here’s the @CodePen:
https://codepen.io/Adir-SL/pen/gOXzrXj
RT Jhey 🔨🐻✨
Pure CSS Stopwatch ✨⏱️
Made possible with CSS Houdini's @ property 😎
Neat to see this being used as an example for this weeks' CodePen challenge all about "Timekeeping" ⌛️
👇 Resources 👇
💪 Challenge:
👉
http://codepen.io/challenges/2022/february/3
http://codepen.io/jh3y/pen/jOVmJBL
RT Jhey 🔨🐻✨
What if your HTML sliders actually slid? ✨
🔊 Optional
🛠 @greensock inertia plugin && draggable
👉
http://codepen.io/jh3y/pen/podVRxw
RT Amit Sheen
Diamond ring ♦️⭕️
#CSS clip-path experiment
Full code @CodePen:
https://codepen.io/amit_sheen/full/ExbLmzm
RT S. Shahriar | Exploring CSS 🎨
I was looking for some digital fonts for use in the next project. Then thought I could build them in pure CSS 😄
@CodePen prototype 🔗
Psst! Some of you might know this is a special number 🤭👇
https://codepen.io/ShadowShahriar/pen/JjOvaEV
https://twitter.com/ShadowShahriar/status/1496077190236155911
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Put your image into a cool "wall frame" using a few lines of code.
✅ No extra element (only the <img> tag)
✅ No pseudo element
✅ Works with any image size
✅ Optimized with CSS variables
Demo:
#CSS
http://codepen.io/t_afif/pen/qBVoKQp
https://twitter.com/ChallengesCss/status/1496084091141304320
It's time for the next #CodePenChallenge!
This week is all about Timekeeping ⏱
Thanks @retool for sponsoring!
https://codepen.io/challenges/2022/February/3
RT Sheelah Brennan
Finally took some time to play with CSS scroll snapping on @CodePen -
https://codepen.io/sheelah/full/WNXdJxa
RT Toshiya Marukubo
Study of 3js.
I wanted to let meshes transform.
Link👇
Video alt : The shapes are transforming while changing color. From torus to box or cone.
https://codepen.io/toshiya-marukubo/pen/yLPPbBV
https://twitter.com/toshiyamarukubo/status/1494655235029028868
RT Adam Kuhn
lil somethin for this week's @CodePen challenge, another @greensock ScrollTrigger demo, infinite scrolling calendar of February holidays w/ velocity-based motion blur // live every day as if it were tortellini day
thnx for lookin'
https://codepen.io/cobra_winfrey/full/podWgvv
https://twitter.com/cobra_winfrey/status/1494693964816990213
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Apply a zoom effect to your image with a few lines of code:
✅ No extra element (only the <img> tag)
✅ No duplicated images
✅ Only 3 properties
✅ Easy to adjust using CSS variables
Demo:
#CSS
http://codepen.io/t_afif/pen/MWOOMEP
https://twitter.com/ChallengesCss/status/1494274412304125956
RT Adam Tomat
Rather than our usual #MarioKart8Deluxe racing at lunch today, we played "Lockout" - competing to finish goals first to get the point.
Built a (very quick) VueJS app to show goals and allow us to check them off ✅
It was silly, chaotic and so fun😃
https://codepen.io/adam-tomat/full/vYWedGo
RT S. Shahriar | Exploring CSS 🎨
Many of us have implemented Range progress fill in Chrome with a few lines of JavaScript
Can't we do it with pure CSS? 🤔
I came up with a pure CSS solution that combines clip-path and box-shadow to give us a solid color fill. No JS/SCSS 😄
@CodePen 🔗
https://codepen.io/ShadowShahriar/pen/zYPPYrQ
https://twitter.com/ShadowShahriar/status/1493836208711299074
RT Jhey 🔨🐻✨
Animated Like Button ❤️
This one's "Design to Dev #2" ✨
🛠 @greensock
👉
👇 Resources/Demo Video
http://codepen.io/jh3y/pen/bGYoEwX
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
