Show newer

RT Ana Tudor 🐯🖤🌻
✨Best way to get grainy gradients✨ patreon.com/posts/video-grainy
🚫 no external images
🚫 no base64 vomit
🚫 no messing with contrast/ brightness of gradient
✅ under 250 bytes filter
✅ even less CSS
✅ covers text & shadow cases
codepen.io/thebabydino/pen/abj
codepen.io/thebabydino/pen/VwB t.co/agZ4ZawRwm

:sys_twitter: twitter.com/anatudor/status/16

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 👇 t.co/jKVbjaqE5n

:sys_twitter: twitter.com/njesenberger/statu

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! 👇 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: tilted.learnframer.site t.co/pOCZvPzBxa
</div>
:sys_twitter: twitter.com/jh3yy/status/16643

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: codepen.io/collection/ZMRmZv t.co/m4EzESuWR6

:sys_twitter: twitter.com/indigitalcolor/sta

RT Ana Tudor 🐯🖤🌻
Jupiter in 3D with trigonometry codepen.io/thebabydino/pen/GRY
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. t.co/PrsaKnv2tO

:sys_twitter: twitter.com/anatudor/status/16

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: codepen.io/ksenia-k/full/mdzYK
Tutorial: dev.to/uuuuuulala/gradient-alo
Made with @greensock, hosed on @CodePen and @ThePracticalDev t.co/owZfCPebaI

:sys_twitter: twitter.com/uuuuuulala/status/

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: codepen.io/t_afif/full/VwEJqKV via @CodePen
t.co/OprEyBYyjE

:sys_twitter: twitter.com/ChallengesCss/stat

RT T. Afif @ CSS Challenges
Here is my idea for the inverted border-radius layout 👇
Demo: 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)
t.co/DdN7KNmkdM
<div class="rsshub-quote">
Kevin Powell: I've just put out a new video! Creating an inverted border-radius with CSS youtu.be/khjVPkO35F0
</div>
:sys_twitter: twitter.com/ChallengesCss/stat

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! 👇 t.co/5dae89MH3v

:sys_twitter: twitter.com/jh3yy/status/16614

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 newbie from years ago feels as heartwarming as glancing at my old baby photos 🩷
CodePen: codepen.io/acupoftee/full/xxwK t.co/liBTUTZkEN

:sys_twitter: twitter.com/elisabethdiang/sta

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 caniuse.com. On @CodePen codepen.io/ainalem/full/bGmzRb t.co/g9B5y3DKnR

:sys_twitter: twitter.com/mikaelainalem/stat

Show older
小森林

每个人都有属于自己的一片森林,也许我们从来不曾走过,但它一直在那里,总会在那里。迷失的人迷失了,相逢的人会再相逢。愿这里,成为属于你的小森林。