RT kotAndy 🐾
Never thought I’d be able to create something like that, using @p5xjs and #shaders 😍 I used it for the first time and it was a challenging but rewarding experience!
Just finished my new pen for #Codepenchallenge on @CodePen 😊
https://codepen.io/kotAndy/full/rNZjWoE https://t.co/DYJ8HXP72Z
RT jhey 🔨🐻✨
Re Here's that @CodePen link! 🚀
This is using a polyfill so "should" work in your browser today unless it's Chrome Canary 😁
https://codepen.io/jh3y/pen/OJobGqR
RT Amit Sheen
💭 Here's a weird thought I had - Conic Wrapping: wrapping an image around a cylindrical object by mapping the pixels into a conic-gradient.
Wait, what?! 🤨
Live demo at @CodePen: https://codepen.io/amit_sheen/pen/poORoVv https://t.co/luwDs2Gucy
RT Ana Tudor 🐯🖤🌻
Something for this week's #CodePenChallenge: 1 div grainy/ dithered gradient blob with a simple SVG filter https://codepen.io/thebabydino/pen/GRBrWeY
I've given this concept a try before https://twitter.com/anatudor/status/1407388305948397571 but lately, I've been toying with SVG filters a bit more and... I got better at it...🤷♀️ https://t.co/qNEj6ZvVyg
<div class="rsshub-quote">
Ana Tudor 🐯🖤🌻: @notwaldorf @AmeliasBrain Bam! https://codepen.io/thebabydino/pen/wvJbpMd
</div> https://twitter.com/anatudor/status/1630269687832489985
RT Bence
Brush up your @github profile with this one weird trick!
Learn the truth now: https://codepen.io/finnhvman/pen/xxaRmdJ
GitHub Heatmap 😺 (512 bytes) #PetitePatterns on @CodePen https://t.co/NMs7qA9IMN
RT Chris Smith
New pen: Diagonal Scrolling
https://codepen.io/chris22smith/pen/OJobXdK
Playing around with the idea of scrolling content diagonally, using transforms, and vmin units for consistent ratios.
#CSS @CodePen
RT Ksenia Kondrashova
Re The last visual to publish in this thread. This time we have mouse repel effect instead of scroll bind + controls to play with color and speed.
Sketch #3: Interactive Abstract WebGL Noise
https://codepen.io/ksenia-k/pen/LYJbrRE
Made with @threejs
Hosted on @CodePen https://t.co/Mxnw6ANHuW
RT T. Afif @ CSS Challenges
🎨 CSS Art!
It's been a while but I am back to celebrate the return of #AttackOnTitan
Are you ready for the final act?
Here is a CSS-only version of The Rumbling! Coming for you!☠️
Demo: http://codepen.io/t_afif/full/BaOLqom via @CodePen
#CSS #ShingekiNoKyojin #AttackonTitanFinalSeason https://t.co/Ts3HRZYuaQ
https://twitter.com/ChallengesCss/status/1630209610815623168
RT LukyVj - A$AP Luky
✨ Recap of my #css week 👇
1️⃣ "Sliding button" https://codepen.io/LukyVj/pen/bGxpORa
2️⃣"Skeuomorphic like button" https://codepen.io/LukyVj/pen/XWPKvjP
3️⃣ "Glowing button" https://codepen.io/LukyVj/pen/vYzXNev
4️⃣ "Cute skeuomorphic checkboxes" https://codepen.io/LukyVj/pen/bGxwWVv
#webdesign #frontend #codepen #skeuomorphism https://t.co/45pbDa3HVn
RT Steve Gardner
I've made some fun experiments with animated 3D text rendered in HTML! @CodePen. I plan to turn this into a handy little library to help make these kind of effects easier. These are animated with @greensock.
https://codepen.io/ste-vg/full/mdjOaNa https://t.co/lqHqwwfSfg
It's the final week of the "Shape" #CodePenChallenge!
This week, we're going shapeless 🌀
https://codepen.io/challenges/2023/february/4 https://t.co/gldOLuOOWF
RT Matthias Hurrle
Wormhole https://codepen.io/atzedent/pen/wvEzWzL via @CodePen #webgl #shader https://t.co/t7PxHtvAKg
RT Jon Kantner
Circular Battery Meter
https://codepen.io/jkantner/pen/eYLzPxZ @CodePen #SVG #JS https://t.co/Mj3MFROXcV
RT Matthias Hurrle
Codepen On Display
A golden glowing Codepen logo reflecting the lines of the surrounding space, set in a glass cube. Cheers to @CodePen and all the amazing people there!
https://codepen.io/atzedent/pen/rNZLZWq via @CodePen #webgl #shader https://t.co/8Z55LOhiD9
RT LukyVj - A$AP Luky
👋😎 Hey there!
Check out this cool skeuo-like button inspired by @learnframer's amazing design! 💫
Packed with:
- #CSS variables ✅
- Native nesting ✅
- Custom properties ✅
- A sprinkle of keyframes animations ✨
🔗https://codepen.io/LukyVj/pen/PodzOmM
WDYT? 🤓🤔
#webdesign #frontend https://t.co/ZBiQNoJbJE
<div class="rsshub-quote">
Framer University: 🪄 Little like button component in @framer.
Would you press it? 😏 https://t.co/UcyJQOSuGJ
</div> https://twitter.com/LukyVJ/status/1629062197757239296
RT Ana Tudor 🐯🖤🌻
The gradient here is vibrant at the top and gets completely desaturated at the bottom. Can you figure out how I did this with pure #CSS* before checking the code?
https://codepen.io/thebabydino/pen/yLEjjWE
*very little, only 2 declarations & under 200 bytes... half of which are the gradient stops https://t.co/5lrZXSCxBe
RT T. Afif @ CSS Challenges
Demo: http://codepen.io/t_afif/full/xxaOXQr via @CodePen
#CSS #CodePenChallenge https://twitter.com/ChallengesCss/status/1628528831681134592 https://t.co/RCycUQoHSQ
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 🎨 A CSS Pattern for this week #CodePenChallenge
Demo: http://codepen.io/t_afif/full/MWqyNzx via @CodePen
More CSS-only Patterns 👉 http://github.com/Afif13/CSS-Pattern
#CSS https://t.co/XU3J5qfp8m
</div> https://twitter.com/ChallengesCss/status/1628781626346946561
RT Jason Lengstorf ⚡️
EVERYONE PLEASE LOOK AT OUR ART™
@tesseralis and I made "Food and bois", featuring savory snacks and all the bois (curly, pointy, square, and round)
please make more art with code. it's so fun 💜
https://codepen.io/jlengstorf/pen/LYJZQdL?editors=1010
RT Chris Gannon
(D)ANGER ⚡️ @CodePen https://codepen.io/chrisgannon/pen/xxaOgLz @greensock #svg #animation https://t.co/NPOQxfmBaN
RT LukyVj - A$AP Luky
Alright people 😎
Here’s my interpretation of that cool @learnframer design! 🤯
Just a button with sliding icons ✨
#CSS only and of course NO JS ❌
What do you think about it? 🤔
🔗 https://codepen.io/LukyVj/pen/bGxpORa
cc @SebastienNvzt success ?
Crossbrowser incoming 🚀 https://t.co/3gxNgzbEmE
<div class="rsshub-quote">
Framer University: 🪄 Made this sliding button hover effect for the http://framer.university website.
Reply with "☝️" if you want to see a tutorial. https://t.co/dOlYbQF26s
</div> https://twitter.com/LukyVJ/status/1628452949411201024
Build, test, and discover front-end code 👩🏽💻