@"Multi-input Maze 🎮" by @mrvalaty
https://codepen.io/nitnelav/pen/GRQEadJ
Works with:
- Keyboard Arrow Keys
- Clicking buttons with mouse
- The GamePad API (?!)
- Swiping on Touch Pad
- Tilting mobile device
- JS API
Cool. https://t.co/Bhrcnu9Y2e
RT Zoë | z-
Getting that shrinking feeling. A drop-down that hides based on the distance the cursor has moved away. https://codepen.io/z-/pen/dygeoyO on @CodePen
This also uses CSS Grid to get the button to smoothly change to max size without setting the size explicitly.
#CodePen #webdesign https://t.co/in3srwA5Mu
RT jhey 🔨🐻✨
Future CSS Tip 🔮
You can animate numbers using @ property
property --ms {
inherits: false;
initial-value: 0;
syntax: '<integer>';
}
keyframes ms { to { --ms: 100; }}
Here's a pure CSS stopwatch! ⏱️ (Works in Chromium and Safari TP now 😎)
@CodePen link below! 👇 https://t.co/v3icJ4nwBU
RT Bence
Couldn't really name this one, but the cake emoji is because of the layers
Nonfigurative no. 3 🍰 (538 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/ZEqxBWY https://t.co/FlDY7f27xg
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a ribbon style to your title that extend to the edge of the screen.
✅ Only one CSS property 🤩
✅ No extra element
✅ No pseudo-element
✅ No scrollbar issue
Demo: http://codepen.io/t_afif/full/rNqJYrZ via @CodePen
#CSS https://t.co/BhBR3ZsBOu
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 💡 CSS Tip!
Add a slanted background to your container that extend to the edge of the screen.
✅ Only 2 CSS properties 🤯
✅ No pseudo-element
✅ No scrollbar issue
✅ One variable to control the angle
Demo: http://codepen.io/t_afif/full/zYmpdeK via @CodePen
#CSS https://t.co/Pb1QJNwuaU
</div>
https://twitter.com/ChallengesCss/status/1655532557096689664
RT Amit Sheen
One orb, three axes, 24 rings =>🥳
(#CSS only)
Live demo on @CodePen: https://codepen.io/amit_sheen/full/MWPrWoB https://t.co/NmrgYrHgzP
RT Jane Ori 💜 CSS Contortionist
100% 3D CSS + HTML Render (+ basic JS Controls)
https://codepen.io/propjockey/full/KKGQpdK
View on @CodePen ^ 💜
warning: Stress Test and it works wayyyyy better in Firefox! 👀
Original artwork by @Romaintrystram https://t.co/P9HRHkK8Ph
The Typography of Quotes #CodePenChallenge continues!
This week, we're working with blockquotes 🧱
https://codepen.io/challenges/2023/May/2 https://t.co/t5Uo4DdWDb
RT jhey 🔨🐻✨
What you can do when you animate time itself ⚡️
Pretty close, with a twist 🤏
The trick is to animate the trails going around a few times. Then animate a window of that animation on a loop.
Tweak your timings, rinse, and repeat! 😎
🛠️ @greensock
👇 @CodePen link https://t.co/wMPezaipkR
RT Nicolas Jesenberger
Colorful Toggle Switches 🔴🟡🔵
I will try to regularly code small elements like these, recommendations are welcome!
Anyway, @CodePen below! ⬇️ https://t.co/UIUrepg7pS
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a slanted background to your container that extend to the edge of the screen.
✅ Only 2 CSS properties 🤯
✅ No pseudo-element
✅ No scrollbar issue
✅ One variable to control the angle
Demo: http://codepen.io/t_afif/full/zYmpdeK via @CodePen
#CSS https://t.co/Pb1QJNwuaU
https://twitter.com/ChallengesCss/status/1654449075163484162
RT Ana Tudor 🐯🖤🌻
🆕 quick video: pure CSS invert text on scroll https://www.patreon.com/posts/video-pure-css-82521128 - yes, we can now do this without JS! 🤯
Live demo on @CodePen https://codepen.io/thebabydino/pen/QWVLBqe
Inspiration https://codepen.io/PointC/pen/ZErvbPR https://t.co/whR92o5SCt
RT S. Shahriar
In a recent video, @KevinJPowell showed us a way to transition height from 0 to auto. Seeing that I couldn't resist experimenting with the idea
Then I came up with this CSS-only Accordion with fancy reveal animation 😅
@CodePen 🔗 https://codepen.io/ShadowShahriar/pen/LYgeNLB https://t.co/j5hpSEdkj4
https://twitter.com/ShadowShahriar/status/1654241132778512385
RT Jon Kantner
A timeline experiment with IntersectionObserver and enter and exit transitions of items
https://codepen.io/jkantner/full/ZEqvpWd @CodePen #CSS #JS https://t.co/cerrLcty69
RT Jordan Dey
Check out my submission for the #CodePenChallenge!🎨
I created a poster with famous Marvel quotes🦸♂️💬
Take a look at my @CodePen: https://codepen.io/DeyJordan/pen/ZEqadrm
#HTML #CSS #design #web #dev #developer #development #FrontEnd #typography #fontvariable #UI #Code #Inspiration https://t.co/gTCjTtlhFV
RT kotAndy 🐾
I couldn’t resist taking the opportunity to congratulate everyone on #StarWarsDay ✨ via @CodePen
May the 4th be with you ❤️
https://codepen.io/kotAndy/full/mdzqQKW
#CodePenChallenge #typography #creativecoding #typescript #codepen @PixiJS https://t.co/iTRyZ6asQi
RT Laura | Front End Sr
May the 4th be with you ✨ only html and css art on @CodePen for all the Star Wars fans as me❤️
https://codepen.io/lauragrassig/pen/dygZaxB https://t.co/Qsl0wmYS9v
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
