@RT Amit Sheen
Was challenged to create this rotating text effect in pure #CSS...
Challenge accepted. 😎
Live demo on @CodePen: https://codepen.io/amit_sheen/pen/mdzVNrz https://t.co/dXHyHnNvZY
RT Konstantin Denerz
Check out my new @CodePen ! It uses CSS to visualize the intersection between a sphere and cubes ✨, featuring cool #CSS features like mask 🎭, cos() function, and @property of Houdini 🧙♂️.
🔗 https://codepen.io/konstantindenerz/pen/xxyZJpO
Inspiration: https://twitter.com/GuillaumeMitch/status/1646463654781501440
#css #animation #houdini https://t.co/skIbEb4pwQ
<div class="rsshub-quote">
Mitch.glow: I woke up this morning wandering if it was possible to animate boolean with @splinetool. I guess the answer is YES! RT, Like, Show your love 🌈 https://t.co/gzFH1vO2Wo
</div>
https://twitter.com/kdenerz/status/1646651577510375433
RT Matthias Hurrle
Hammered Steel
The fragment shader creates the illusion of a hammered steel plate inside a dodecahedron using raymarching and voronoise.
https://codepen.io/atzedent/pen/oNaboro via @CodePen #webgl #shader https://t.co/G2EboyocTP
RT Paul Roger
SOTD Challenge #2 : Awwwards - SOTD Animation in 1h
https://codepen.io/Tiopayo/full/eYPpLVe
Inspired by : https://2authenticators.co/
@CodePen #codepen #gsap #js #css https://t.co/YRdsMJnSVT
RT Jon Kantner
Cooked up another toggle switch… and I mean cooked up! 🍳
https://codepen.io/jkantner/pen/rNqxNXW @CodePen #CSS https://t.co/7Qp4deszpu
RT jhey 🔨🐻✨
Future CSS Tip! 🔮
Power scroll animations with the scroll-driven animations API 🚀
.car{
animation:drive;
animation-range:cover;
animation-timeline:brian;
}
Let Dom Toretto show you the animation ranges in "Tokyo Scroll"
p.s Brian is the orange car 😅
@CodePen link below!👇 https://t.co/lu6wI2J5dz
RT Paul Roger
Challenge : Awwwards - SOTD Animation in 1h
https://codepen.io/Tiopayo/pen/QWZbqZz
Inspired by : https://www.torebentsen.com/ (@ToreBentsen)
@CodePen #codepen #gsap #js #css https://t.co/ePGOUKX2JI
RT Juxtopposed
using this real-time UI colorpicking tool, now you can find random trendy color palettes on the design itself.
just press the Spacebar and get started :)
try it out now on @CodePen:
https://codepen.io/Juxtopposed/full/VwGovbY
or check live site: https://realtimecolors.com
#codepen #webdesign https://t.co/AqWmStqLaS
RT jhey 🔨🐻✨
CSS Tip! ✨
Add some visual interest to your fading entry animations by adjusting brightness, contrast, etc. 🔥
keyframes enter {
0% {
opacity: 0;
filter: brightness(2);
}
}
@CodePen link below! 👇 https://t.co/zR465CfzXo
RT Bence
SVG filters are quite powerful. This image is 2.1 MB in JPG format, while in SVG it's only 480 bytes 🤯
Sand Grooves 🏖️ (480 bytes) #PetitePatterns on @CodePen #CodePenChallenge
https://codepen.io/finnhvman/pen/mdzbOEj https://t.co/bLGZyGHEco
RT Jordan Dey
Five lines of code for a colorful gradient effect 🌈🌈🌈
I made a @CodePen to show what we can do with #SCSS loops🌀
Take a look : https://codepen.io/DeyJordan/pen/BaOXNaE
#webdevelopment #frontend #CSS #codinglife #codepen #codingtips #webdesign #programming #CSS3 #HTML #html5 https://t.co/EQz9fVhcOL
<div class="rsshub-quote">
Jordan Dey: Why use loops with just #JavaScript, when you can use them with #SCSS too? Loops can save you a lot of time 🔄
Check out this demo using a #CSS helper for spacing
#webdevelopment #webdeveloper #webdev #codingtips #programming #frontend #webdesign #HTML #sass #CSS3 #html5 https://t.co/wW4CMq4t8D
</div> https://twitter.com/DeyJordan/status/1642955857364221952
RT jhey 🔨🐻✨
Future CSS Tip! 🚀
Transition the display property 🤯
No animationend event listening required 😎
Toggle display:none & set your styles! ✨
.el{
--show:1;
opacity:var(--show);
transition:display 0.5s,opacity 0.5s;
}
[hidden]{
--show:0;
display:none;
}
@CodePen link below! 👇 https://t.co/DTC7vfSxQV
RT LukyVj - A$AP Luky
👋It's that time of the day!
Glad to share this Old School Calculator 🧮
Link at the end ⬇️
✅ #css color-mix
✅ :has()
✅ Grid layout
✅ lots of CSS variables, to switch theme
✅ Audio on click 🔊
✅ CSS @supports
Inspired by @SebastienNvzt's design ✨
#frontend #webdesign https://t.co/cj6BKxuFtX
RT Chris Gannon
Butterfly 🦋 @CodePen https://codepen.io/chrisgannon/pen/dyqEeYV @greensock #animation https://t.co/wv35OeDsMS
RT Ksenia Kondrashova
Draw GLSL flowers with your cursor! 🌺
One full-screen plane, two render targets, and a bit of shader magic
Live demo & source code: https://codepen.io/ksenia-k/full/poOMpzx
Made with @threejs
Hosted on @CodePen
Special thanks to @bookofshaders
#webgl #glsl #threejs #shader #drawingtool https://t.co/hQ480LjV4e
The April #CodePenChallenge starts now 💎
This month is all about Texture.
We're kicking things off with earthy textures 🌎🪨🏝
https://codepen.io/challenges/2023/april/1
Thanks @koredotai for sponsoring! https://t.co/bQjeACPy6m
RT Jon Kantner
If the Windows XP shutdown icon buttons were animated
https://codepen.io/jkantner/pen/oNPRMQY @CodePen #CSS #SVG https://t.co/9YOiA14cnW
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
