@RT jhey 🔨🐻✨
Future CSS Tip! 🔮
You could combine anchor positioning + :has to create this kinda iPad style follow effect ✨
[href=blog]{anchor-name:--bl;}
:root:has([href=blog]:hover){--a: --bl;}
.cursor{left:anchor(var(--a) left);}
You can transition anchors! 😎
@CodePen link below! 👇 https://t.co/PvF9cRE0SZ
RT David Kjelkerud
Made a simple drawing app in 30 min using GPT-4. It's so good with code!
https://codepen.io/davidkjelkerud/pen/mdGxZqX https://t.co/txAMyCmQKe
https://twitter.com/davidkjelkerud/status/1636003986678644736
RT T. Afif @ CSS Challenges
A jumping radio button? Why not! #CodePenChallenge
🌟CSS-only powered by the :has() selector and some magic cubic-bezier()
Demo: http://codepen.io/t_afif/full/abaYxQj via @CodePen
#CSS https://t.co/B8mYrQtwCC
https://twitter.com/ChallengesCss/status/1635756368681398272
RT Web Bae
I'm having fun working with more technical content on the blog lately. Here's an intro to GSAP (@greensock ) tweens with easy-to-follow @CodePen examples, from the POV of a @webflow dev.
https://www.webbae.net/post/gsaps-bread-and-butter-from-to-and-fromto-animations
RT LukyVj - A$AP Luky
👋😎
My take on that excellent dropdown @ui8 recently shared 🔥
Here's a @CodePen with 3 versions just because 🤓
Using:
- CSS vars
- Houdini #css ( property at-rule & vars transition )
- :has ( parent selector 👪 )
- :focus-within for the #a11y version
#frontend #webdesign https://twitter.com/ui8/status/1633368459319885825 https://t.co/cKZ7s5KFYA
<div class="rsshub-quote">
UI8: Fun with dropdowns in @figma ✨ https://t.co/MMkOdZSjrP
</div> https://twitter.com/LukyVJ/status/1635693759714164736
RT Konstantin Denerz
Check out my new @CodePen that demonstrates light effects ✨ with cool CSS features like:
- conic- & linear-gradients
- @property
- CSS variables
- filter
- clip-path (custom shapes)
- mask (border-gradient)
🔗 https://codepen.io/konstantindenerz/pen/yLxpjYz
#css #animation #fluxcapacitor #bttf https://t.co/Zh7rEYy9Gk
RT Cassidy
Re And here's a fun lil @CodePen with the first 10,000 digits of pi for your studying pleasure!
https://codepen.io/cassidoo/pen/wvamVzm
RT Khanh Tran 🌈
Re Here's the CodePen link, as usual, friends! https://codepen.io/khanhtranngoccva/pen/poOaMoE
I hope you enjoyed the blob, and goodnight to you all! 💤
RT Chris Gannon
🍕Pizza Loader🍕 @CodePen https://codepen.io/chrisgannon/pen/abaEbaG @greensock #svg #animation #pizza https://t.co/SfLv9aVg1p
RT Amit Sheen
The triangle caterpillar (🔺🪱)
#CSS only.
Live demo at @CodePen: https://codepen.io/amit_sheen/pen/NWLXXdp https://t.co/PhK7KdraV7
RT Zajno
We recently stumbled upon @CodePen because we love to flex our skills and realized we haven't been showing off our development. Well, we're about to fix that!
1/2 https://t.co/92HhASvkN9
RT LukyVj - A$AP Luky
👋 Hey hey
Here is my @CodePen of the day!
Inspired by @madebyharsh on @Framer 🔥
Using:
- Houdini CSS 🪄
- CSS variables
- CSS :has (parent selector 👪 )
- Lots of pseudo-elements
- Lots of transitions 🎡
Best rendered in Chrome ✅
🔗https://codepen.io/LukyVj/pen/RwYjLwZ
#css #webdesign https://twitter.com/madebyharsh/status/1633459657133158400 https://t.co/3I7J6b94jM
<div class="rsshub-quote">
Harsh Katariya: Glowing tabs 🔥
Made with @framer
_____________________
https://glowingtabs.framer.website/glowing-tabs
_____________________
@JoshGuoSpace @learnframer @framerlyco @framerclub @BlessCreatics @benjaminnathan @aleksliving @liampmccabe @itsnotnabeel https://t.co/8mDoAd7fvP
</div> https://twitter.com/LukyVJ/status/1635268145882763265
The March #CodePenChallenge continues!
For week 2 of the Buttons challenge, let's turn up the radio 📻
https://codepen.io/challenges/2023/march/2 https://t.co/OiWiFRVOlb
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a fancy hover effect to your image
✅ One element (no pseudo-element)
✅ Optimized with CSS variables
✅ Powered by trigonometric functions and @property 🤩
Demo: http://codepen.io/t_afif/full/NWLXqPz via @CodePen
#CSS https://t.co/tD3XbF5gvd
https://twitter.com/ChallengesCss/status/1634152470325633026
RT Ksenia Kondrashova
Quick video tutorial on a tiny (1.5kb!) SVG animation. It gives the illusion of blobs morphing randomly but it's much easier than it seems
Text version: https://dev.to/uuuuuulala/making-background-blob-animation-in-just-15kb-step-by-step-guide-2482
Live demo & source code: https://codepen.io/ksenia-k/pen/jXbWaJ
Youtube: https://youtu.be/0yp9-_NKPC0
Hosted on @CodePen https://t.co/JlQanIEkER
RT Konstantin Denerz
Have you wondered how to get motion blur effect ✨ with CSS? It works with SVG's Gaussian blur filter.
https://codepen.io/konstantindenerz/pen/zYJzvEQ via @CodePen
#css #motionblur #animation https://t.co/c9KfWhgFYA
RT kotAndy 🐾
My new experiment on @CodePen ☺️
Used @greensock and `mix-blend-mode` css to create interesting night mode effect.
https://codepen.io/kotAndy/live/RwYgxJy https://t.co/lvYY707Jex
RT Luke Meyrick
Sometimes you just wanna...😠😡🤬
http://cdpn.io/lukemeyrick/full/JjaOppW https://t.co/Chsm4Rgvuc
RT LukyVj - A$AP Luky
👋A few weeks ago, I've made my own version of it in #css ✨
Inspired by @learnframer of course 😎
You like it?
Go check it out on @CodePen
🔗https://codepen.io/LukyVj/pen/bGxpORa
#webdesign #frontend https://t.co/1Mw70NIKFO
<div class="rsshub-quote">
Framer University: 🪄 Rt this for a free @Framer (sliding) button component. https://t.co/wd0Jtt9bBA
</div> https://twitter.com/LukyVJ/status/1633821741628919808
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
