RT DigitalOcean
🥳 DigitalOcean 🤝 @css 💙
https://do.co/3KJPRT0
RT Adam Argyle
#CSS color is about to be incredible!!!
✅ relative color syntax for deriving palettes from any color
✅ LCH for perceptually equal lightness across palettes
✅ every hue can be a palette
Here's me prototyping Open Props vNext Color (Safari TP only) 👇🏻
https://codepen.io/argyleink/full/VwrKRrY
Nice!
T. Afif @ CSS Challenges: I made @css with CSS 😊
The logo of CSS-Tricks with one element. 👇
It was tricky with only gradients so I used clip-path as well.
Demo:
#CSS
https://codepen.io/t_afif/full/zYPNrOe
RT Adam Argyle
Safari Tech Preview has experimental CSS gradient colorspaces and I had tons of fun playing around last night with it!
```#css
background: linear-gradient(
to right in var(--colorspace),
black, white
);
```
basic black to white can be so different!
https://codepen.io/argyleink/pen/OJObWEW
We don't have a "course" you can follow to learn CSS on @css. That's why we have a learning partner in @FrontendMasters!
@jen4web's course "Getting Started with CSS" is free access and your best bet at getting going with CSS in a video-by-video instructional format.
RT Adam Argyle
I still find many folks don't know these place alignment shorthands exist!
Adam Argyle: 6 Different #CSS Centering Grid & Flex Layouts 👍
`place-items: center`
`place-content: center`
when used with..
`display: flex` vs `display: grid`
What's the difference?
What do they even do?!
I got ya 👇🤓
https://codepen.io/argyleink/pen/PoqWOPZ
RT Henri Helvetica v3.0 👨🏾🚀 🇭🇹
Did you know that that Internet Explorer was the 1st browser to support CSS?? 😱 🤯. Everyone but 2 ppl got the answer wrong. Best part? We had the engineer responsible for it speak at the end: Thank you @cwilso for your time in sharing how its happened 25yrs ago! ✨🙏🏾✨
RT Amelia Wattenberger ❄️ 華曼如
this is something I believe in very strongly! follow your heart and interest will likely follow ❤️
CSS-Tricks: Exactly What You Want by @Wattenberger
https://css-tricks.com/exactly-what-you-want/
RT Chris Coyier
This Apple Arcade game wurdweb (
I tried building here.
(NOTE: I built with @property in CSS, so Chrome-based only for now. I'm sure there is a better fallback way to do it.)
https://apps.apple.com/us/app/wurdweb/id1507350222
https://codepen.io/chriscoyier/pen/oNePEyW
RT Adam Argyle
🆕 #GUIchallenges
Thinking on ways to build a 3D menu
Watch →
Read along →
Try a demo →
Get the source →
Thought the Japanese translated version turned out super rad!
https://www.youtube.com/watch?v=HCsV8u-KYUw
https://goo.gle/3c3oILb
https://goo.gle/3bWNSLz
https://goo.gle/3wulnOO
RT Una Krav 👩🏻💻
My favorite thing about container queries is how they stack 🥰
Responsive button (icon + text) in a responsive card (typography & layout) in a responsive grid
https://codepen.io/una/pen/WNEOjdB
RT Adam Argyle
🆕 #GUIchallenges 🦇
responsive multi-select UX
Peep the video
Read along
Try the demo
[video alt]
UX preview across MacOS Safari, iOS Safari (iPad and iPhone), Android Chrome, Firefox and desktop Chrome
https://www.youtube.com/watch?v=x0aCdLDZ8BM&list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ
https://web.dev/building-a-multi-select-component/
https://gui-challenges.web.app/multi-select/dist/
RT Adam Argyle
#CSS trick - Bouncy Overscroll 🪄
Flank a scroll snapping layout with unsnappables 🤓
result:
as users scroll to an edge, it'll snap back to the nearest snappable with built-in inertia / timing
🕹 try it
https://codepen.io/argyleink/full/oNwmrXM
RT Adam Argyle
media-queries-4 making confusing queries much simpler 😍
caniuse (Firefox only atm)
CSS spec
PostCSS plugin
⭐️ to show Chromium you want it
https://caniuse.com/mdn-css_at-rules_media_range_syntax
https://www.w3.org/TR/mediaqueries-4/#range-context
https://github.com/postcss/postcss-media-minmax
https://bugs.chromium.org/p/chromium/issues/detail?id=1034465
SVG syntax is so ripe for these "generator" design tools.
https://wickedbackgrounds.com/backgrounds.html
RT Una Kravets 👩🏻💻
Responsive card > Responsive button > Responsive icon
Container queries are the future y'all.
SO dope to work with.
Demo requires Canary + Container Queries flag
Uses:
- Newer `container: inline-size` syntax
- Named containers to query diff parents
https://codepen.io/una/pen/NWgxXGV
Yessss these are sweet, @ckirknielsen
https://www.reddit.com/r/VaporwaveAesthetics/comments/p2rg1f/made_some_web_developmentthemed_blank_vhs_designs/
RT Adam Argyle
Re works with translation and language directionality's toooooooo
RT Adam Argyle
CSS Gradient Shadow 😎
A pseudo-element, sized and positioned within the container, offset + scaled with transforms, then blurred with filters
demo
https://codepen.io/argyleink/pen/WNxeBKa
