@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
"Unintentionally creepy circles" by LoFi
https://codepen.io/loficodes/pen/gOBZKaZ https://t.co/vr1ZoTIcKN
RT T. Afif @ CSS Challenges
Here is my idea for the inverted border-radius layout 👇
Demo: https://codepen.io/t_afif/full/LYgaexY via @CodePen
Using mask to have transparency. A minimal HTML with no pseudo-element and some CSS variables to control everything (the gap, the radius, etc)
#CSS https://t.co/DdN7KNmkdM
<div class="rsshub-quote">
Kevin Powell: I've just put out a new video! Creating an inverted border-radius with CSS https://youtu.be/khjVPkO35F0
</div> https://twitter.com/ChallengesCss/status/1661822077584789507
RT jhey 🔨🐻✨
Future CSS Tip! 📜
You can use scroll-driven animation to create cool scroll effects that change with viewport size 🤓
No JavaScript! 🤯
img {
animation: clip both;
animation-timeline: --article;
animation-range: exit;
}
@CodePen link below! 👇 https://t.co/5dae89MH3v
RT Carl 💥 Creative Coding Club
Just having a little isometric fun with #GSAP #SVG
It's often the small things that bring the most joy.
#creativeCoding
@CodePen demo right here
https://codepen.io/snorkltv/pen/gOBEOWb?editors=0010 https://t.co/sIhbbmrbRD
RT Elisabéth (Tee)
I watched some of my favorite Pokémon episodes this week including the episode inspiring this gem of an animation. Reading code I wrote as a #CSS newbie from #100daysofcode years ago feels as heartwarming as glancing at my old baby photos 🩷
CodePen: https://codepen.io/acupoftee/full/xxwKRxN https://t.co/liBTUTZkEN
https://twitter.com/elisabethdiang/status/1661413431478714374
RT Nicolas Jesenberger
Arc Time Slider using SVG & JS ☀️🌙
@CodePen below ⬇️ https://t.co/qjQjnAgMAk
RT Mikael Ainalem
Smooth hamburger menu animation that work across all popular browsers. Built with SVG and SMIL with over 98% browser compliance according to http://caniuse.com. On @CodePen https://codepen.io/ainalem/full/bGmzRbE https://t.co/g9B5y3DKnR
https://twitter.com/mikaelainalem/status/1661083734546759696
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
