@RT Chris Gannon
AI Radio Button 🤖🤘 @CodePen https://codepen.io/chrisgannon/pen/ZEqdVZx @greensock (part of my Bad AI #javascript #animation series https://codepen.io/collection/aMKzyp) https://t.co/sdAPdWzRhD
RT Nicolas Jesenberger
Skeuomorphic Toggle in CSS (vol. 4) 🔴
@CodePen below 👇 https://t.co/l8as6khe4r
Re Sushi switch by @ChrisGannon ⭐️ https://codepen.io/chrisgannon/pen/zEVjKg
See more from Chris in this week's challenge resources!
The June #CodePenChallenge starts now!
This month is all about Choice UI — the elements that help people make choices 🔘
Let's kick it off with toggles!
https://codepen.io/challenges/2023/june/1 https://t.co/VDkdS66wOs
There is a Vue-specific editor on CodePen, in case you didn't know that. It can even pull in *other* Vue Pens so you can peice together components:
https://codepen.io/chriscoyier/pen/oNYBNyZ
If you prefer looking at components all in the same area, Projects also works:
https://codepen.io/chriscoyier/project/editor/XMakLV
RT Jordan Dey
My "Solar System Menu" has been updated with a lot of mesmerizing transitions 👇
Everything, always 100% in #CSS and without #JavaScript 😎
@CodePen : https://codepen.io/DeyJordan/pen/NWOoEOg
#SolarSystem #Transitions #animation #WebDesign #FrontEnd #CodePen #HTML #web #design #100DaysOfCode https://t.co/6oljd8ZdIW
RT Ana Tudor 🐯🖤🌻
✨Best way to get grainy gradients✨ https://www.patreon.com/posts/video-grainy-83191847/
🚫 no external images
🚫 no base64 vomit
🚫 no messing with contrast/ brightness of gradient
✅ under 250 bytes #SVG filter
✅ even less CSS
✅ covers text & shadow cases
https://codepen.io/thebabydino/pen/abjpEbz
https://codepen.io/thebabydino/pen/VwBPygQ https://t.co/agZ4ZawRwm
RT Nicolas Jesenberger
What if inputs had secrets ? 👀
Check out what happens when you drag this slider over the maximum value 🌶️💥
Try it on @CodePen 👇 https://t.co/jKVbjaqE5n
RT Amit Sheen
Simple single-div roulette loader
(#CSS only)
Live demo on @CodePen: https://codepen.io/amit_sheen/pen/JjmgNyQ https://t.co/p6a1jiN9g0
RT jhey 🔨🐻✨
Future CSS Tip! 🔮
You can use scroll-driven animation and some masking to create a faux curved parallax scroller 🔥
.track {
animation: shift;
animation-timeline: scroll(root); 👈
}
Couldn't resist having a go at this cool design from @learnframer 👏
@CodePen link below! 👇 https://t.co/GuV0QCCUBp
<div class="rsshub-quote">
Framer University: If you're familiar with combining multiple transforms & effects in @Framer, the possibilities are endless.
For example, combine:
- Sticky positioning.
- Rotated container.
- Scroll transforms.
And create something like this: http://tilted.learnframer.site https://t.co/pOCZvPzBxa
</div>
https://twitter.com/jh3yy/status/1664323610708787229
RT Monica.dev @ RenderATL
Re I put together a CodePen collection of creative coding examples with Perlin Noise and randomness to accompany my RenderATL talk: https://codepen.io/collection/ZMRmZv https://t.co/m4EzESuWR6
https://twitter.com/indigitalcolor/status/1664355473779314691
RT Ana Tudor 🐯🖤🌻
Jupiter in 3D with #CSS trigonometry https://codepen.io/thebabydino/pen/GRYbVoe
Rotates around y axis, scrolling changes x axis tilt if browser supports CSS scroll animations.
There's just one image used for the sphere surface (#2). Distortion from rectangle to "dress" the sphere is all CSS. https://t.co/PrsaKnv2tO
RT Chris Gannon
AI Toggle - we can't turn them off! 🤖
@CodePen
https://codepen.io/chrisgannon/pen/RwemGjP
@greensock
#artificialintelligence #javascript #animation #ai https://t.co/upmbkyGiXx
RT Ksenia Kondrashova
If you've ever faced this, you know what I'm talking about. It's quite a challenge to build a gradient along an SVG path. Here is a GSAP solution.
Final demo: https://codepen.io/ksenia-k/full/mdzYKmm
Tutorial: https://dev.to/uuuuuulala/gradient-along-svg-path-with-gsap-kl4
Made with @greensock, hosed on @CodePen and @ThePracticalDev https://t.co/owZfCPebaI
RT 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
https://twitter.com/ChallengesCss/status/1664218261456601090
RT Jon Kantner
When deleting with a button also deletes the button label!
https://codepen.io/jkantner/pen/poxXLav @CodePen #CSS #SVG https://t.co/234lAyCYzw
"Random Ancient Library - Pure CSS" by Josetxu
https://codepen.io/josetxu/pen/vYVQmNb https://t.co/cHMAjPsSTD
We updated our screenshot renderer to a much newer Chrome. So if you have any screenshots that didn't render right because of (probably) fancy new CSS, a re-save will re-screenshot them.
"Unintentionally creepy circles" by LoFi
https://codepen.io/loficodes/pen/gOBZKaZ https://t.co/vr1ZoTIcKN
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
