RT Chris Gannon
Loading Content @CodePen https://codepen.io/chrisgannon/pen/WNaZyqX @greensock #animation #typography https://t.co/SA2VuoN5rS
RT Ceramic Soda
💫 SVG Starry cube 💫 https://codepen.io/ceramicSoda/pen/ZEqXypP via @CodePen #CodePen #minimalist #SVG #animation
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Do you want to select all the elements between two different class names? Use the :not() selector to do it 👍
Demo: http://codepen.io/t_afif/pen/QWZqpYN via @CodePen
#CSS https://twitter.com/ChallengesCss/status/1648305779739447296 https://t.co/J8oLy2j9eX
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 💡 CSS Tip!
Do you want to select the first and last element with a specific class? It's possible and you can do it using 2 different methods!
The browser support will soon be good so save them for your next project 👍
Demo: http://codepen.io/t_afif/pen/ExdgYXo via @CodePen
#CSS https://t.co/MZiXzoQY41
</div> https://twitter.com/ChallengesCss/status/1653357247483740162
Re ⤴️ Pen previews are back! Thanks for your patience while we got that solved.
Still need help? Let us know in support: https://codepen.io/support
🛠 We're working to fix the Pen preview issue, very sorry for the trouble!
RT Bence
This one fits in a tweet #SVG
Oblique Stripes 💈 (268 bytes) #PetitePatterns on @CodePen
https://codepen.io/finnhvman/pen/jOeGaoR https://t.co/e57I0KkacG
RT Amit Sheen
Dripping... ☔️
(#CSS only)
I Really liked the watery texture at the edges. 😊
Live demo on @CodePen: https://codepen.io/amit_sheen/full/jOeGzBv https://t.co/oGzCCJfJiU
RT Jesse Couch
Finished up a small #CodePenChallenge Quote Poster on @CodePen - hope you like it!
https://codepen.io/designcouch/pen/NWOabNR
The May #CodePenChallenge starts now!
This month, we're working on the typography of quotes 💭
Let's begin with a quote poster!
https://codepen.io/challenges/2023/may/1 https://t.co/aRfejaLNO5
RT Josh Dillon
Had fun recently building a hamburger menu using SVG and applying animations to it. Here is a customizable version of it to experiment with
https://codepen.io/jdillon/pen/VwEpbgy
@CodePen #JS #CSS
RT Yusuke Nakaya
CSSだけで電車のジオラマを作りました🚋 久しぶりのCSS作品!
OnlyCSS: Low-poly Train
https://codepen.io/YusukeNakaya/pen/PoybbMY
@CodePen
#css #css3d #cssart #webdevelopment https://t.co/t2wcGEGUif
RT Jordan Dey
Say goodbye to the limitations of font-weight! 👋
With #CSS GRAD properties for font variable, you can achieve a superior bold experience that gives your designs more depth and character.
@CodePen: https://codepen.io/DeyJordan/pen/yLRXQad
#typography #webdesign #frontend #codingtips https://t.co/TYgS3ri1x0
RT Jon Kantner
The best Apple keyboard for developers! 😂
https://codepen.io/jkantner/pen/ZEqKgWJ @CodePen #CSS #JS https://t.co/To9WsLcr1w
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Add a fancy hover effect to your image with a small code
✅ One element (the <img> tag)
✅ No pseudo-element
✅ Powered by CSS mask and @property
⚠️ Chromium only for now
Demo: http://codepen.io/t_afif/full/abRWELR via @CodePen
#CSS https://t.co/nLZ9wav7sc
https://twitter.com/ChallengesCss/status/1651218096684691458
RT Carl 💥 Creative Coding Club
Before you make the jaw-dropping, award-winning, animated sites you need to master the basics.
Thankfully, with #GSAP you can have loads of fun moving a robot's jaw (and other parts) with just a few tweens in a timeline😀
@CodePen demos in thread to build and study https://t.co/JsJGU6wGEZ
RT Una 🇺🇦
Re Here is what that looks like all nested:
And a Codepen link to try it out with (Canary behind the experimental web platform features flag for now)
https://codepen.io/una/pen/rNqmOdm https://t.co/uRrmtP4TeS
RT Chris Coyier
A good use case for Container Queries in CSS: A Weekly Events Calendar
Pen: https://codepen.io/chriscoyier/pen/jOeBzNN
5 minutes on YouTube explaining: https://www.youtube.com/watch?v=3R1vOG1pta4 https://t.co/TKRxulpHBU
RT jhey 🔨🐻✨
Future UI Tip 🛸
How about a futuristic <selectmenu> for the future of styling <select>? 😎
The list box popover needs a long enough CSS transition to show entry/exit
--t: calc(var(--count) * 0.1s + 0.2s)
[popover] { transition: display var(--t); }
@CodePen link below! 👇 https://t.co/oqhbJBPEDQ
RT Sarah-Elizabeth Laws
Introducing Silkmorphism🪡🧵:
For this week #codepenchallenge on handmade textures.
For when you want your UI to look handstitched. 🤔
https://codepen.io/akalaws/pen/YzJZRMM via @CodePen
(Bonus: it stretches on hover 😄)
Build, test, and discover front-end code 👩🏽💻