@RT Amit Sheen @CSSDAY 🇳🇱
Can't believe I haven't animated this logo 'til now... 😃
#CSSDay @CSSDayConf
Live demo on @CodePen: https://codepen.io/amit_sheen/full/KKrwvaE
Amazing logo design by @stephenhay https://t.co/bVxmTpVmKQ
RT Taha Shashtari
Creating animations in CSS and JS is so addictive 😍.
I've been playing this toggle animation in my head for the past couple of days, and I'm excited to say that I've finally created it.
@CodePen: https://codepen.io/tahazsh/pen/VwVYNLK
#CodePenChallenge https://t.co/spZ1UHGPgP
RT Chris Smith
New post: Prototyping in CodePen
https://chrissmith.xyz/blog/prototyping-in-codepen/
How I use CodePen to create new real HTML, CSS and JavaScript working prototypes.
@CodePen #HTML #CSS #JavaScript
RT Cassidy
I made a fun little Pen on @CodePen for the first time in a while!
https://codepen.io/cassidoo/pen/QWJwgox
RT T. Afif @ CSS Challenges
Another toggle for this week #CodePenChallenge
Click to travel into the subatomic universe! 🚀
Demo: http://codepen.io/t_afif/full/gOQONbr via @CodePen
⚠️ Only Chrome supports quantum physics. Don't try another browser, It won't work.
#CSS https://t.co/TP3aoECyEK
<div class="rsshub-quote">
T. Afif @ CSS Challenges: A checkbox pattern? why not! #CodePenChallenge
Your customer cannot miss it! They are obliged to click 😈
Demo: http://codepen.io/t_afif/full/gOQORrg via @CodePen
#CSS https://t.co/3JP4vBAJ0G
</div>
https://twitter.com/ChallengesCss/status/1666567879943135235
RT Jordan Dey
This week's #CodePenChallenge is all about "Toggles"! 🕹️
I'm excited to share my submission called "Bubble Toggles", a cute and animated input design. 🫧
@CodePen: https://codepen.io/DeyJordan/pen/poQvgaz
#WebDevelopment #FrontEnd #Design #HTML #CSS #JavaScript #100DaysOfCode #CodePen #web #dev https://t.co/XXBZxDlEdi
RT Ksenia Kondrashova
This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple
Live demo & source code: https://codepen.io/ksenia-k/full/YzYRPwb
Made with @threejs
Hosted on @CodePen https://t.co/1GDQBFRYDd
RT Jon Kantner
#CSS Apple Pro Display XDR
https://codepen.io/jkantner/pen/RwqwXXe @CodePen https://t.co/5WIcR9h2Hy
RT T. Afif @ CSS Challenges
A checkbox pattern? why not! #CodePenChallenge
Your customer cannot miss it! They are obliged to click 😈
Demo: http://codepen.io/t_afif/full/gOQORrg via @CodePen
#CSS https://twitter.com/ChallengesCss/status/1666197056023584789 https://t.co/3JP4vBAJ0G
<div class="rsshub-quote">
T. Afif @ CSS Challenges: A crazy CSS-only checkbox for this week #CodePenChallenge
The best way to make your customer mad 🤬
Demo: http://codepen.io/t_afif/full/dyQyvxq via @CodePen
#CSS https://twitter.com/CodePen/status/1665738888676093952 https://t.co/B4MfSeeiWl
</div> https://twitter.com/ChallengesCss/status/1666391861878042629
RT Steph🛸
Made a (purely decorative) toggle for this week's @CodePen challenge! Was nice to write in SASS again 🥰 https://t.co/mewI9rgDS6
RT Adam Argyle @ CSS Day
forked and linked it to scroll / it's presence in the viewport 🤓
```#css
@keyframes morph {
to {
font-variation-settings: "MORF" 60;
}
}
h1 {
animation: morph linear;
animation-timeline: view();
}
```
https://codepen.io/argyleink/pen/qBQByGN https://t.co/Tij3ZYohfI
<div class="rsshub-quote">
Adam Argyle @ CSS Day: KEEP
#CSS
WEIRD
https://codepen.io/argyleink/pen/KKGOpMZ https://t.co/pOWxiYq7V3
</div> https://twitter.com/argyleink/status/1666426144571248642
RT Håvard
So excited for @CSSDayConf tomorrow! 🙌
Here's a @CodePen displaying an animated version of their logo (could do with some better easing and order of appearance, but I've got a plane to catch🙃)
https://codepen.io/havardob/pen/xxQxpNP
RT T. Afif @ CSS Challenges
A crazy CSS-only checkbox for this week #CodePenChallenge
The best way to make your customer mad 🤬
Demo: http://codepen.io/t_afif/full/dyQyvxq via @CodePen
#CSS https://twitter.com/CodePen/status/1665738888676093952 https://t.co/B4MfSeeiWl
<div class="rsshub-quote">
CodePen.IO: The June #CodePenChallenge starts now!
This month is all about Choice UI — the elements that help people make choices 🔘
Let's kick it off with toggles!
https://codepen.io/challenges/2023/june/1 https://t.co/VDkdS66wOs
</div> https://twitter.com/ChallengesCss/status/1666197056023584789
Zoron Jambor has been doing excellent CSS videos over on YouTube. Like:
• 7 Practical CSS Typography Tips & Tricks https://www.youtube.com/watch?v=d1QOiBRID2E
• Stop Rewriting Your CSS! Use :not() Instead https://www.youtube.com/watch?v=WnUNMcy-YTs
RT Mads Stoumann
Accept Terms & Conditions — from hell https://codepen.io/stoumann/pen/GRwRjYP via @CodePen
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Reveal the colors of black & white images using a sliding animation on hover
✅ No extra element (only the <img> tag)
✅ No pseudo-element
✅ Less than 15 CSS declarations
✅ Easily control the sliding direction
Demo: http://codepen.io/t_afif/full/gOQYqRp via @CodePen
#CSS https://t.co/L7r0u2VtxS
https://twitter.com/ChallengesCss/status/1666019103667113985
RT Ksenia Kondrashova
Ever thought of burning some annoying pop-ups to hell? I made a sketch to apply a GLSL shader to the DOM element to do so :)
Live demo & source code: https://codepen.io/ksenia-k/full/yLQLyZa
Made with @threejs
Hosted on @CodePen
Special thanks to @bookofshaders
Feel free to ask questions! https://t.co/Z1emha9myA
RT jhey 🔨🐻✨
Future CSS Tip! 🔮
You can use scroll-driven animation with animation-range "cover" to create CSS "Cover flow" ✨
.cover {
animation: flow;
animation-timeline:--cover;
animation-range: cover;
}
Use a smidge of JS to get infinite scroll 🚀
@CodePen link/details below! 👇 https://t.co/tynTXtC8X0
RT Amit Sheen
Gravity Buttons
(These icons are really attractive... 😉🤣)
Live demo on @CodePen: https://codepen.io/amit_sheen/full/LYXPVKV https://t.co/R4oSCBFFTU
Bot
Build, test, and discover front-end code 👩🏽💻
Joined Dec 2020
