@RT Nicolas Jesenberger
Skeuomorphic Toggle Switch in CSS (vol. 2) 🔵
@CodePen in next tweet ⬇️ https://t.co/UAk7MCNipA
"Animate CSS Grid with View Transitions" by @Bramus
https://codepen.io/bramus/pen/VwEXmqd
This View Transitions API stuff is big. It's cool on a single page using `document.startViewTransition` but it's going to be even better & easier on actual page transitions (⛳️'d in Chrome Canary) https://t.co/2teoHPa2yR
RT Mustafa Enes
This is a hello world in what I call gravitational drawing. Hackable here @CodePen: https://codepen.io/pavlovsk/pen/NWOMwZR https://t.co/L7y8GuuMh0
RT jhey 🔨🐻✨
Know what View Transitions are good for? 👀
Slide deck transitions! ⚡️
Transitions between slides are a cool use case for doing something between DOM states 🤓
This is a little peak at something I've been putting together ✨ (Rest is for Miami 😎)
@CodePen link below! 👇 https://t.co/OXJq7LKBl1
RT Genwaver
Here it is! A codepen of the last series. Feel free to play with the parameters and the code. I suggest you to mess around with the fragment shader to create different patterns. Have fun 💖
https://codepen.io/silmood/full/bGmKNoq
#threejs https://t.co/Vecvb7FfB2
RT Jordan Dey
#CodePenChallenge inspired me to create another quotes work! Check out my latest creation featuring random quotes from Breaking Bad with a cool animation 🗣️
@CodePen: https://codepen.io/DeyJordan/pen/ExdLazx
#BreakingBad #HTML #CSS #animation #WebDesign #FrontEnd https://t.co/tbzFSR7zyF
RT Jon Kantner
Hover/focus effects for icons with glass and color tiles
https://codepen.io/jkantner/pen/QWZrMeB @CodePen #CSS https://t.co/IEI8IBKX1s
RT Zoë | z-
Just hit 7'500 followers on #CodePen! I've always found perspective art interesting and made one with CSS to celebrate 🥳
https://codepen.io/z-/pen/QWZQPZJ on @CodePen #webdesign #CSS https://t.co/02ujaZDtIR
RT jhey 🔨🐻✨
CSS Tip ✨
Button shimmers are a cool use case for container queries 🤓
Shift an element side to side whilst spinning a gradient
Don't know the size? Use a query ⚡️
button{container-type: size;}
@ keyframes slide {to{
translate: calc(100cqw-100%) 0;
}}
@CodePen link below 👇 https://t.co/OUBqtRpO9D
RT Nicolas Jesenberger
Skeuomorphic Range Slider with CSS & JS 🎚️
@CodePen and details about how I made it below 🧵⬇️ https://t.co/I9NrldefzZ
"Animate CSS Grid with View Transitions" by @Bramus
https://codepen.io/bramus/pen/VwEXmqd
This View Transitions API stuff is big. It's cool on a single page using `document.startViewTransition` but it's going to be even better & easier on actual page transitions (⛳️'d in Chrome Canary) https://t.co/9zmZTH3KPw
"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
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
