Show newer

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: codepen.io/t_afif/pen/QWZqpYN via @CodePen
twitter.com/ChallengesCss/stat 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: codepen.io/t_afif/pen/ExdgYXo via @CodePen
t.co/MZiXzoQY41
</div>
:sys_twitter: twitter.com/ChallengesCss/stat

Re ⤴️ Pen previews are back! Thanks for your patience while we got that solved.
Still need help? Let us know in support: codepen.io/support

:sys_twitter: twitter.com/CodePen/status/165

🛠 We're working to fix the Pen preview issue, very sorry for the trouble!

:sys_twitter: twitter.com/CodePen/status/165

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
codepen.io/jdillon/pen/VwEpbgy
@CodePen

:sys_twitter: twitter.com/_jdillon/status/16

RT Jordan Dey
Say goodbye to the limitations of font-weight! 👋
With GRAD properties for font variable, you can achieve a superior bold experience that gives your designs more depth and character.
@CodePen: codepen.io/DeyJordan/pen/yLRXQ
t.co/TYgS3ri1x0

:sys_twitter: twitter.com/DeyJordan/status/1

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: codepen.io/t_afif/full/abRWELR via @CodePen
t.co/nLZ9wav7sc

:sys_twitter: twitter.com/ChallengesCss/stat

RT Carl 💥 Creative Coding Club
Before you make the jaw-dropping, award-winning, animated sites you need to master the basics.
Thankfully, with 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 t.co/JsJGU6wGEZ

:sys_twitter: twitter.com/snorklTV/status/16

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)
codepen.io/una/pen/rNqmOdm t.co/uRrmtP4TeS

:sys_twitter: twitter.com/Una/status/1650947

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! 👇 t.co/oqhbJBPEDQ

:sys_twitter: twitter.com/jh3yy/status/16505

RT Sarah-Elizabeth Laws
Introducing Silkmorphism🪡🧵:
For this week on handmade textures.
For when you want your UI to look handstitched. 🤔
codepen.io/akalaws/pen/YzJZRMM via @CodePen
(Bonus: it stretches on hover 😄)

:sys_twitter: twitter.com/codingLaws/status/

Show older
小森林

每个人都有属于自己的一片森林,也许我们从来不曾走过,但它一直在那里,总会在那里。迷失的人迷失了,相逢的人会再相逢。愿这里,成为属于你的小森林。