RT Taha Shashtari
✨ Made uploading user pictures a little more fun!
@CodePen link: https://codepen.io/tahazsh/pen/zYMKJEE https://t.co/ADMBR63Mik
RT Jon Kantner
Ripped 404 Page Animation
https://codepen.io/jkantner/pen/ExOgWrp @CodePen #CSS #SVG https://t.co/1HI5vEW6hz
RT Jesper Vos
I made this stretching, bouncy selector for https://www.maneken.app/
Here's a @CodePen to explain how it works using pseudo elements and a transition-delay https://codepen.io/Jesper_Vos/pen/WNYGLEv https://t.co/KycYTWR3Bs
RT Ksenia Kondrashova
What's the most common project in my Three.js practice? Spinning globe, of course! I've made quite a few of them lol
Live demo & source code: https://codepen.io/ksenia-k/full/NWERpmb
Made with @threejs and #gsap (@greensock)
Hosted on @CodePen https://t.co/QPOe1OpAes
RT Kass 🦈
🌟One of my first attempts at photorealistic CSS Art.
People ask me how I got good at this... it was by practicing and doing things like these over and over.
Code here: https://codepen.io/kassandrasanch/pen/VwedQve https://t.co/pYn52EGedP
https://twitter.com/KassandraSanch/status/1671528306125033474
RT Bence
Nonfigurative no. 4 🌀 (496 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/eYQdzwd https://t.co/VGInrwndOR
RT Craig Roblewsky
A little rolling text @CodePen as an answer to a @greensock forum question. Uses the SplitText plugin.
https://codepen.io/PointC/pen/ZEmOKvP
RT Geoff Dusome
Responsive type scaling via the CSS clamp function is the future and can safely be used in all modern browsers. Why aren't you using it yet?
https://codepen.io/geoffdusome/pen/xxQOBmL
#codepen #responsive #typescaling #developers #css #clamp
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a fancy 3D animation to your image with a cool hover effect
✅ No extra element (only the <img> tag)
✅ No pseudo-element
✅ Optimized with CSS variables
⚠️ Chrome-only for now
Demo: http://codepen.io/t_afif/full/gOQMMMj via @CodePen
#CSS https://twitter.com/ChallengesCss/status/1664218261456601090 https://t.co/PEaohMV3X3
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 💡 CSS Tip!
Add a 3D effect to your image with a shiny animation on hover ✨
✅ No extra element (only the <img> tag)
✅ No pseudo-element
✅ Less than 10 CSS declrations
Demo: http://codepen.io/t_afif/full/VwEJqKV via @CodePen
#CSS https://t.co/OprEyBYyjE
</div> https://twitter.com/ChallengesCss/status/1670794056262139907
RT Josh Dillon
I came across the awesome https://svgjs.dev library and used it to build this fun transforming menu toggle:
https://codepen.io/jdillon/pen/LYXZMKo
So many cool things to build! 🤓
@CodePen #js #javascript #css
RT Mads Stoumann
Michelin Star Rating — a different kind of rating-control for this week's challenge! https://codepen.io/stoumann/pen/ExOyELW via @CodePen https://t.co/CTQWMXIDcH
RT Taha Shashtari
It's amazing to see how cool animations can be created simply with CSS transform and transition properties! 😍
Here's my star rating demo for this week's #CodePenChallenge
@CodePen link: https://codepen.io/tahazsh/pen/NWErBpJ https://t.co/5cPJLMEym3
RT Mustafa Enes
What would it look like if rain hits and erodes a simplex-noise-generated terrain, I hear you asking. Here's my take on that question with a cellular automaton. You can check it live or hack it @CodePen here: https://codepen.io/pavlovsk/pen/oNQbVrm https://t.co/VSJaxhxC3O
"Glitch effect using only CSS" by Temani Afif
https://codepen.io/t_afif/pen/WNaWBRg?editors=1100 https://t.co/y3ZxOylsqk
RT Amit Sheen
Catch that light! 💡
A simple game in pure #CSS to test your skills, speed, and nerves... 😜
Play on @CodePen: https://codepen.io/amit_sheen/full/dyQGQLr
Let my know if you caught it 😎 https://t.co/sj0J1t9RIF
RT Matthias Hurrle
Caressed by the Sun
@CodePen below 👇 https://t.co/PmspAo7GpE
The Choice UI #CodePenChallenge continues!
This week, let's reach for the stars with star ratings ⭐️
https://codepen.io/challenges/2023/June/3 https://t.co/7QTYFLuqH3
RT Ceramic Soda
🌊 SVG Water Reflection 🌊 https://codepen.io/ceramicSoda/pen/abQNBBz?editors=0100 via @CodePen #codepen #motion #SVG https://t.co/ktrcJlDAic
RT jhey 🔨🐻✨
CSS Tip! ⚡️
If you want your CSS transforms to be positioned in the 3D-space, use "transform-style: preserve-3d;" 🤖
Here's what happens when you use it in your CSS art and go a little heavy on the transform 😅
"CSS, Cascade!"
@CodePen link below! 👇 https://t.co/DNBXZji7Kj
RT Dilum Sanjaya
Experimenting with range sliders - all demos use HTML inputs with type='range', no drag event listeners. A dash of special CSS positioning makes it all more fun!
Demo: https://codepen.io/dilums/full/YzRwjBM via @CodePen
#codepenchallenge #React https://t.co/DZ4mwcEaBc
Build, test, and discover front-end code 👩🏽💻