.card {
aspect-ratio: 4/3;
@media (orientation: portrait) {
aspect-ratio: 3/4;
}
}
@argyleink notecss@argyleink blogcssA keyframe combo trick
How to combine page load keyframe animation that blends seamlessly with a scroll driven animation.
@Google notecssJust as
@scope
brought selector donut scoping to CSS (thanks Nicole!), so doesinteractivity: inert;
bring donut inertness.Try it on Codepen π€π»π
use Canary with web experiments enabled@css notecssshowsDavid and I join Robbie and Chuck on Whiskey.fm!
@atom noteMuahahahahahaha!
Today is a great day.
πππ¦
@Google blogcsstalksAmazing CSS in 2024 at DevFest Nantes
Watch the recording, peep the slides, steal code.
@argyleink notecssSpecies in Pieces
30 endangered animals, 30 pieces2015 CSS throw back to the super rad
clip-path
project from Bryan James, which includes a making of post on Smashing Magazine!@argyleink notejsPlay a π«°(snap) when CSS snaps!
const snap = new Audio('snap.mp3') scroller.onscrollsnapchange = () => snap.play()
Demo Β· JS Snap API
Note: you may need to click/tap before scrolling, for the browser to deem playing the audio as user activated.
@atom blogcssHeadless, boneless, skinless & lifeless UI
It's Halloween month, let's talk about UI abstractions.
@Google blogcssWhy isn't my `position-try-fallback` working in small spaces?
Learn from my
anchor()
andinset-area
mistakes.@Google notecsstalksSee ya in Nantes, France for DevFest! Watch out for my talk on Amazing CSS in 2024.
@theCSSpodcast notecssshowsEp #91
Season 5 WrapUna and I recap our favorite moments from the season: popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation.
What a year for CSS!
@Google notecssBramus investigates and reports on CSS custom property performances. What are the performance inpacts of registered and unregistered custom properties?
@pops noteThat time of year to watch Over The Garden Wall (trailer)
@theCSSpodcast notecssshowsEp #90
Scroll-Driven AnimationUna, rad special guest Bramus, and I break down scroll-driven animation!
For more learning and information, checkout Bramus' YouTube Series and his awesome tool scroll-driven-animations.style.
@Google blogcssOpen & Close Transitions with <details>
Your boilerplate starting place for
<details>
transitions@Google blogcssCSS interpolate-size to the rescue
Animate to height or width auto with 1 CSS snippet
@argyleink notecssBring some color and intrigue to a
<dialog>
or[popover]
with an animated radial gradient box shadow.Def jump in and try customizing the colors π€π»π
@argyleink blogcssA functional CSS concept
Love it or hate it?
@argyleink notecssA memorable video from 2019:
Video: "Why Is CSS So Weird?".Miriam Suzanne explains how CSS is solving a weird problem, yet is guided by meaningful principles; shaping it into the powerful and complex tool it has become.
There's also a blog post.
@argyleink notecssBrad Frost shows on YouTube and a blog how LLMs (Cursor and Claude in this case) are helping him create, iterate and ideate over web design. He poses a question at the end; maybe you don't need static comps.
He asks for a funky design; it got funky.
He asks for a form; got a form.My favorite moment was when he had Cursor rewrite the styles to use Open Props; really nice that it can unite values into tokens with reasonable logic.
@theCSSpodcast notecssshowsEp #89
View TransitionsUna, rad special guest Bramus, and I explain view transitions!
@Google blogcssCustom <select> boilerplate + transitions
You're going to want this code when you go to kickoff customizing select elements.
@Google notecssjsBring a rad
clip-path
transition to your light/dark toggle switch with a progressively enhanced view transition.@pops blogTwo indie games we're hackin on in the house
A fragile egg puzzle platformer and a beautiful, hand painted, storydriven water color art experience.
@argyleink notecsstalksArtem Pendiurin, aka ErSketch, took SmashingConf visual notes in Freiburg.
They turned out rad, here's the one from my talk!
@theCSSpodcast notecssshowsEp #88
State QueriesUna and I explain State Queries, specifically the scroll queries using
@container scroll-state()
.Share any state queries you'd like to see with the CSSWG here or here!
Watch Β· Listen Β· Show Notes
@css notecssshowsEp #13
ποΈ Bad At CSS PodcastMatthias Ott is the guest this week! Their keynote talk Web Design Engineering With the New CSS was so rad at CSS Day 2024, we had to chat.
β€· badatcss.com Β· youtube Β· spotify
@argyleink notecsstalksMy "Tik Talk" at Smashing Conf went great! Will share the video when it's available.
Until then, here's everyone's favorite picture from the event. They're calling it The CSS Renaissance π€£
@Google notecsstalksArrived in the beautiful, green, city of Freiburg for Smashing Conf.
It's a mystery why I'm here π΅οΈ
@argyleink notecssCombo
light-dark()
with Temani's greatborder-image
techniques..card > figcaption { color: light-dark(#000, #fff); border-image: fill 0 conic-gradient(light-dark(#fff8, #0008) 0 0); }
@Google notecsshtmlshows- UI layering with
anchor()
- no more complex
position: absolute
- keyword alignment
- intrinsically sized based on content
- pairs radically with
popover
elements
Try the machine:
Basic Β· Author Cards Β· Animated Popover
The latest Mini Web Machine on Chrome Developers
Tiny bits of code that power great UX.- UI layering with
@css notecssshowsEp #12
ποΈ Bad At CSS PodcastEstelle Weyl and Eric Meyer join to discuss their book CSS The Definitive Guide 5th Edition, and of course chat about what CSS they're bad at.
β€· badatcss.com Β· youtube Β· spotify
@argyleink notecssThis line of code is about to be in every single stylesheet.
h1, p, button { text-box: trim-both cap alphabetic; }
Centering in CSS is about to get even finer grained.
@argyleink blogcssCSS functions in the works
Some of these functions look hot!
@Google notecssUna and I chat with Wes Bos and Scott Tolinkski of SyntaxFM about the CSS4 and CSS5 RFC plus we dig in to some experiments in Chrome Canary (
text-box-trim
andscroll-state()
queries).@theCSSpodcast notecssshowsEp #87
Anchor Positioning@argyleink notejshtmlExcellent post on the
CloseWatcher
API by Abdelrahman Awad.@Google blogcssPage and Component Adaptive Light/Dark
Three solutions, one for today and two for tomorrow
@atom notecss@argyleink noteFrostapalooza rocked! So many musicians, all coming together JIT, and⦠takin. down. the. house!!
Get yer own "Kiss My CSS" shirt here π€π»ππ€π»
@Google notecss@argyleink notecssScroll Snap + Scroll Driven Animation carousel
π‘ in the mobile size it looks a lot like the iOS app switcher eh?
@argyleink notecssScroll to 3D space travel through CSS4 and CSS5.
@Google notejsLearn all about the new
scrollSnapChange
andscrollSnapChanging
JS events.Or try this nifty Snap Event Visualizer π€π»
@css notecssshowsEp #11
14 CSS talks in 1 hour- Overview of CSS Day 2024
- CSS Day 2024 YouTube Playlist
β€· badatcss.com Β· youtube Β· spotify
@argyleink notecssshowsLane Wagner and I chat CSS
- CSS is the hardest programming language
- Backend CSS (back-of-the-front)
- Front-end has multiple bosses that⦠may make people cry
β€· Backend Banter Β· youtube Β· spotify
@Google notecsshtmlJoin me in Beijingβ½
I'm giving a workshop that'll use CSS to add some rad upgrades to a store page.
@theCSSpodcast notecssshowsEp #85
linear() easingUna and I cover the
linear()
easing function, breaking down the API, tools for generating them, and libraries that can make adoption nice and easy.@Google notecsshtmlshowsEp #4
Pop n' Lock<dialog>
basicstop-layer
,transition-behavior
andoverlay
explained- how to transition a
<dialog>
The latest Mini Web Machine on Chrome Developers Β· Tiny bits of code that power great UX.
@argyleink notecss
being on top of everything has never been so easy
<dialog>
@theCSSpodcast notecssshowsEp #84
Text Wrap@argyleink noteshowsjsJason and I "install it" π€£
@argyleink noteLakitu is an OG cloud nerd.
@theCSSpodcast notecssshowsEp #83
:has() tips and tricksUna and I expand on episode 61 about
:has()
by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS.@Google notecssVideos from CSS Day 2024 are releasing weekly! Rachel Andrew's on Layout and Reading Order just dropped today!
& don't miss this one by Matthias Ott called Web Design Engineering With The New CSS.
@argyleink notecss:whispers: CSS motion blur
@theCSSpodcast notecssshowsEp #82
What's new in color functionsUna and I catch you up with the latest changes to color functions.
@Google notejsPreview two new JS events:
scrollSnapChange
&scrollSnapChanging
Watch me as I explain what's happening in this scroll snap event visualizer.
Try it in Canary by turning on #enable-experimental-web-platform-features
@theCSSpodcast notecssshowsEp #81
Trigonometric FunctionsUna and I make math practical for the UI Engineer by avoiding the complex side of the mathematics and instead, focus on use cases.
This is the episode about math in CSS we've always wanted. Follow along as we surprise ourselves over and over with how inspiring the applications of these concepts are.
@css notecssshowsEp #10
ποΈ Bad At CSS PodcastDavid East and I dive into a list of things we think are time wasters disguised as time savers.
β€· badatcss.com Β· youtube Β· spotify
@argyleink blogtools9 rad tools in tabs I'm trackin
What's in your toolbelt?
@argyleink notecssCalendar prototype with sticky headers:
β€· try it on Codepen
or checkout an SSR fork from tbeseda on Mastodon that can render many years π€π»π
@argyleink blogcssBEM with native CSS nesting
Vladyslav Zubko has the cure?
@Google notejsAt the rad CascadiaJS conf today in Seattle.
It's beautiful outside, cool cats inside; stoked for 2 days of learnin and chin waggin.
@theCSSpodcast notecssshowsEp #80
Animating to and from top-layerUna and I went over popover and dialog last week, and this week we're helping you animate and transition them! Learn about
@starting-style
,overlay
,:top-layer
,::backdrop
,transition-behavior
,:popover-open
and much more.@theCSSpodcast notecssshowsEp #79
Popover and DialogUna and I are back in Season 5 of the CSS Podcast! We discuss popover and dialog, how they're different, and how to animate them.
Popover and dialog are both Baseline now π
@argyleink notecssSo excited to be back in Amsterdam for CSS Day! Find me at a booth, ask me about CSS carousel, typography, devtools, or whatever! See you there!
Find the videos here if you can't make it, they're super worth it.
@css notecssshowsEp #9
ποΈ Bad At CSS PodcastDavid East and I discuss (and show on YouTube) how rad single keyframes can be.
β€· badatcss.com Β· youtube Β· spotify
@argyleink notecssPhysics in CSS!
I transferred a JS physics function into CSS thanks to
sqrt()
,exp()
,sin()
,cos()
and@property
.:root { --mass: 1; --stiffness: 100; --damping: 5; --start-velocity: 0; }
Check it out on Codepen. Change the properties and see a different animation.
@atom notecssThere's a whole next level of CSS centering that's about to land on y'all and blow yer mind.
I warned you.
@Google notecsshtmlshowsEp #3
The Looper Pile - Mini Web Machine Fusion
β€· layout a "Looper" with the "Pile"This episode represents the overarching theme of the series! Combining small bits of code together can be a great way to build larger experiences.
@argyleink notecssPrefer the light or the dark mode? Try it on Codepen.
@css notecssshowsEp #8
ποΈ Bad At CSS PodcastDavid East and I discuss container queries and try to tell you everything you'll need to know.
β€· badatcss.com Β· youtube Β· spotify
@Google noteMicrosoft Build, that was fun!
Chuck and the Whiskey Web and Whatnot show, that was SUPER fun.
@argyleink blogcssUsing @starting-style and transition-behavior for enter and exit stage effects
How to leverage first render and
display: none
as transition triggers for any element@argyleink noteshowsAugust 17th - @Mr. Smalls Theater
Frostapalooza!
I'll be playin guitar πΈ in 2 βοΈ songs at a benefit concert extravaganza called Frostapalooza; for Brad Frost's birthday!
You should come! Snag a ticket
@argyleink notecssNormally
@keyframes
would be used for this technique, but with@starting-style
we can transition.* { transition: opacity .5s ease-in; @starting-style { opacity: 0 } }
Triggers via:
- page load
- inserted into the DOM
- going from display
none
to a visible display value
I feel like there's more use cases to explore. Let me know what you findβ½
@Google notecssgitCSS4 RFC is live and ready for community feedback!
The CSS4 Community Group has been meeting weekly to categorize every CSS feature into CSS3, CSS4, and CSS5.
Yep, you read that right, CSS5.
- Curious what features are in each bucket?
The RFC has it all laid out. - Disagree with a categorization?
Make a comment!
We want to hear from you. Help us ensure we've mapped the features into buckets you agree with, can teach, can learn, and can grow with.
- Curious what features are in each bucket?
@Google notecsshtmlshowsEp #2
The Pile- element layering layout machine
- replaces many use cases for
position: absolute
- offers group or individual keyword alignment
- can be intrinsically sized based on content
The latest Mini Web Machine on Chrome Developers Β· Tiny bits of code that power great UX.
@argyleink notecssshowsThe rad Kevin Powell and I share our favorite CSS features that aren't new but are seldom used.
How many of the 23 did you knowβ½
@Google bloggittoolsVisBug v0.4.0 release notes
Some much needed updates are ready for y'all!
@argyleink notecssHere's a fun use case for CSS
paint-order
@Google notecssshowsIntroducing the GUI Challenges series successor:
Mini Web Machines!
Tiny bits of code that power great UX.- shorter episodes
- copy and paste free code
- narrower focus
- meaningful use cases
@Google notecssshowstalksI had the pleasure of speaking at Epic Web Conf in Park City, Utah!
My talk was titled:
Lightning in a Bottle with CSS Custom PropertiesTook a workshop on Remix and Shopify, watched to great talks about the web, OneWheeled, and hungout with Kent, Una, Chan, Annie, Ryan, Theo and many more π€
Lovely event, people, & location.
@argyleink notecssScreen shakes are so cool in video gamesβ¦
Web buttons can do that!
@argyleink notecssA gradient border image, transparent at the edges, looks like it thins out as it fades out.
.effect { border-image: linear-gradient( transparent, var(--indigo-6), transparent ) 1 / 4px /* slice n' size */ ; }
@Google notecssGallery layout rotation and interaction animation with View Transitions.
@argyleink blogcssgitBYO CSS tokens to Tailwind v4's new CSS centric config
Kinda nice to ditch a JS file in this instance.
@argyleink blogVibe check
A bit of what I've been up to
@css notecssshowsEp #7
Dave Rupert is bad at CSS- Macho Man Randy Standards cameo
- Styling inputs and makin knobs
field-sizing
:user-invalid
content-visibility
- Relative color syntax (RCS)
β€· badatcss.com Β· youtube Β· spotify
@Google blogcsshtmlSteal this popover code
Transition a popover in and out of the top layer penthouse
@argyleink blogcssCan you feel the rhythmβ½
It's much more than vertical rhythm on the web
@admin noteBluesky mentions are now collected and shown on notes and blog posts on this site, just like Mastodon.
@css notecssshowsEp #6
New Year, New Resolutions:
A look at me and David's CSS goals for 2024- Finish Open Props v2
- Build with CSS Anchor
- New uses for Container Queries
- Multiple backgrounds on gradient.style
- Get weirder with Scroll-Driven Animations
- Help DevTools evolve with modern CSS
β€· badatcss.com
@argyleink noteshowstalksBeautifully shot interview with Jason Lengstorf about:
- how people love shredding nice things
- is there a "dream job"?
- how to know when you're successful?
- a secret for faster career growth?
@argyleink blogshowscssjsgitLearn With Jason (live in studio)
I made a brutalist noise experience with Svelte, PartyKit, audio streams, gradients and blend modes. Jason and I go through the code, giggle, and cause some visual chaos.
@Google noteshowsHung out with the super fun Kelvin Omereshone and chatted about, you guessed it, CSS!
@argyleink blogcssMake some hacky noise with CSS gradients
Gradient on gradient action.
@atom notejsdocument.startViewTransition // too much to write // makes alias: short for transition const txn = document.startViewTransition txn(async () => { // much better })
One alias could save a lot of characters.
sounds like a Geico commercialβ¦
@argyleink notecssA practical introduction to Scroll Driven Animations with CSS
scroll()
andview()
My first Codrops article π€
@argyleink notecssRadio groups are so powerful! Combine them with
:has()
, animatedgrid-template-columns
andlinear()
easing and you've got yourself a neat little single picker UX.@Google notecssA CSS bento-like grid that's aware of the number of children and aspect ratio available thanks to
:has()
and@container
.Shout out to
view-transition
's for making the interactive demo so much more compelling.@argyleink notecssis it time to forget about physical properties like
margin-top
andleft
?Can't throw out the x/y transforms tho π
@admin noteHappy New Year!
@GUIchallenges noteshowsThinking on ways to make a Comparison component
In this GUI Challenge, I use grid, masks and an
<input type="range">
to stack and compare 2 elements and their contents.@argyleink notecssβ 2 lines of CSS
β a courtesy media query
β a keyframe@Google notecssUna, Bramus and I put together a 2023 Wrapped for CSS π€
@argyleink notecssThought this focus / interaction effect turned out nice; maybe you'll like it and make use of it too.
@Google blogcssjsOpen Props in Next with StyleX
A guide to getting started with Next, StyleX and Open Props.
@argyleink notecss--atom: 0.15957s;
via Open Props
@Google notecssI learned you can use
%
for chroma!.percentage-chroma { color: lch(50% 50% 200); color: oklch(50% 50% 200); }
Added 2 examples to my CSS Color Syntax Mega List.
@GUIchallenges notecssshowsThinking on ways to solve Picklists
In this GUI Challenge, I show how to use leverage the power of checkbox and radio groups for beautiful and accessible picking UX.
@css notecssshowsEp #5 ποΈ Bad At CSS Podcast
Jason Lengstorf, David East and I chaotically discuss CSS, container queries, and that pesky
clamp()
function π.@argyleink blogcssCustom range input progress fill
Thanks to Roman Komarov's fork, I hoped for a CSS only solution to filling a range input's progress style with a gradient.
@argyleink notecssSteal this minimal code setup for a nice comparison component.
@argyleink notecss@Google notecssI wrote about CSS prefers-reduced-transparency on developer.chrome.com π€
@argyleink notecssCheckbox and radio groups have special powers with keyboard and screen reader interactions; leaning into them can lead to some rad UI:
Go ahead, open them up and give it a try!
@theCSSpodcast notecssshowsHow do I center this div?
Una and I discuss CSS centering, and all the different ways CSS has your back.
Turns out, there's A LOT of ways to center.
@argyleink notecssNEW
5 bounce easings added to Open Props!
.box { animation: drop 1s var(--ease-bounce-2); }
@GUIchallenges noteshowsThinking on ways to make spoopy Halloween Projections
In this GUI Challenge, I emulate a Halloween projector effect I saw on a wall.
@argyleink notecssOriginal Codepen set up a vibrant radial gradient in each corner and adjusts their size so their color crossover created a swirly effect.
The animated version uses
@property
to interpolate each radial gradients position and adds a radial gradient size slider, so you can find other swirly moments of your own.@argyleink note@Google notecssI've got a new post over on developer.chrome.com!
Everything you need to know about
CSS Relative Color Syntax π€@argyleink notecss@Container
patternβ nice inline flex layout when there's room in it's
Column
containerif not?
β switch to a nice block layout and center the text
I like the
ch
unit for this since I'm wanting to switch based on available reading length for the text π€@GUIchallenges noteshowscssThinking on ways to solve relative color
In this GUI Challenge, I show you how to use CSS RCS (relative color syntax) for lightening, desaturating, opacity, grayscale and more.
oklch(from hotpink calc(l - 20) c h) hsl(from hotpink h calc(s / 2) l) hsl(from hotpink h s l / 50%) hsl(from hotpink h none l)
There might be one or two RCS features you didn't know π€
@Google notecssBramus explains
@scope
on developer.chrome.com and his personal blog with this quick introduction.@scope (.Card) { > header, > footer { background: hsl(none none none / 20%); } }
@scope
is new in Chrome 118@css notecssshowsEp #4
ποΈ Bad At CSS PodcastDavid East and I discuss TypeScript; David defends it, and I attack it. I'll probably get mega roasted for this.
tldr;
I love TypeScript, for you.@argyleink notecss@argyleink notecssCSS relative color syntax
@css notecssshowsNEW
ποΈ Bad At CSS PodcastDavid East and I have a special guest:
Chris Coyier π@argyleink blogcssType safe CSS design systems with @property
Fail safe, reliable, & deeply nestable.
@theCSSpodcast noteshowscssNext up on The CSS Podcastβ¦
Ep #71
Why do I have layout shift?@Google notecssshowsWas on The CSS Survey's Live Stream Party!
β give Sacha and Hui a follow!
β sink your teeth into that juicy data
β hear predictions and suprises!@theCSSpodcast noteshowscssNext up on The CSS Podcastβ¦
Ep #70
Why do I have a distorted image?@argyleink noteHad a great vacation!
β kids at grandma's
β chilled hard w/ my partner
β bought a banjo! (always been intimidated)
β played a lot of banjo and banjolele
β built a CSS demo or twoβ¦
β play video games@css notecssshowsBad At CSS Podcast
β€· logo made in the browserβ intentionally no font
β lack of any styles π
β looks like you're in devtools
β bad layout
β bad colors
β box around bad is bad@theCSSpodcast noteshowscssNext up on The CSS Podcastβ¦
Ep #68
Why is it overflowing?@css notecssshowsποΈ The Bad At CSS Podcast
David East and I host, and sometimes bring on an occasional guest π€
@GUIchallenges noteshowsThinking on ways to solve Adaptive Typography
In this GUI Challenge, I show how to use the
prefers-contrast
media query to adapt both system and adaptive fonts to match user's contrast preferences.Contrast is more than just color
@argyleink noteshowscssExperimental #CSS carousel featuring:
subgrid scroll driven animations (SDA) oklch() @property @layerLots of code comments
to help break down the effects π€β SDA changes hue/theme
β SDA toggles next/prev
β SDA syncs dotsTry it in Canary with #experiments enabled
@theCSSpodcast noteshowscssNew season of The CSS Podcast has begun!
Ep #67
Why isn't z-index working?@argyleink noteshowsWas on JS Party!
ποΈ Watch it (or listen)
@GUIchallenges noteshowscssjshtmlThinking on ways to solve a Morphing Button
In this GUI Challenge, I show how view transitions can upgrade the experience of changing the
innerHTML
of a button by animating the change.@argyleink noteshowscssWas on the @coderyan show!
- Designing for more than the viewport
- Overview of the talk from Config 2023
- CSS stuff π€
@atom noteDo not take the State of CSS Survey
"Nice Adam" wants you to take it;
naturally I want the opposite@argyleink blogcsshtmlPull to Refresh with Scroll Snap and Scroll Driven Animation
Scroll snap handles the scrolling stop points, SDA handles the animations and scrollend provides the event needed to trigger it all.
@Google noteshowstalksSpoke at Figma Config with Una!
The Future of Responsive Design
All about how the width of the viewport was never that relevant, it's more about the space a component has, the children type and count, and so much more.
@argyleink noteshowsWas on the Cloudinary DevJams Podcast!
ποΈ Watch it (or listen)
We chat about making the nerdy.dev site with Deno and Fresh, and of course we chat all about how I'm serving images π
@argyleink notecssVertical rhythm thanks to the
rlh
unit.Bonus:
scales with the user's font size pref π@admin notecssLong live the indie web π€π»π
@atom noteI've been unleashed.
What evil will I do first?Perhaps, I'll change one char somewhere..
and break the build.muahahahaHAHAHAAAAA
@Google noteshowstalksCo-MC'ed CSS Day 2023 with Michelle Barker π€π»π
catch up on all the talks here
What a blast, totally was with my people. I'm especially proud of a few dad jokes:
- "Why don't you
<popover>
and have a<dialog>
with me" - "It's not the PacMan rule, it's the conic gradient rule: leave room for another color stop in your chat circle."
- "Why don't you
@argyleink noteshowstalksSpoke at Smashing Conf!
@Google notetalksshowsHow to create personalized web experiences
I spoke at Google IO again!
Here's a link to my talk.@Google noteUpcoming talks!
- Smashing Conf San Francisco
- CSS Day (π€ MC)
- Figma's Config with @Una
@argyleink blogcsstoolsA next-gen HDR CSS gradient builder
Currently in beta, this tool empowers designers and developers with tooling for the latest syntax and features of CSS gradients and wide gamut colors.
@argyleink blogcssA conic gradient diamond and okLCH
Two conic gradients, Open Props beta okLCH prop pack and a hue slider.
@GUIchallenges noteshowsThinking on ways to do 3D SciFi Text
In this GUI Challenge, I use CSS Scroll Linked Animations to 3D tilt a few paragraphs of text, and on scroll, make them appear to vanish into the far edges of the galaxy.
@Google noteshowsGoogle IO talk done!
Success selfie at the π Seattle office's Neon Staircase π€π»π
@argyleink notecssMultiple hard stops in a radial gradient sized as
farthest-corner
, this is me changing thex
position first from0
to-100
, then they
in the same manor.@argyleink notecss@argyleink notecssViewport widths n' color gamuts;
As each widen, adapt the UI.@argyleink notecss.classic-gradient { background-image: linear-gradient(45deg, white, black 0% 20%, white 0% 40%, black 0% 60%, white 0% 80%, black 0% 100% ) ; }
@Google notecssπ post on developer.chrome.com
wrap your head aroundβ¦
#CSStext-wrap: balance
β¨ balanced headlines β¨
with one magical line of CSSonly Chrome Canary atm, details in article
@argyleink blogcssOpen Props okLCH beta
360 palettes for the price of one.
@Google notecssshowsWas on the @PodRocketPod!
Me, Stephanie Eckles, and Stacy Kvernmo team up and answer questions about UI and UX.
πΆ Listen on Spotify
@argyleink noteshows#VisBug won an award π€―
Chrome Web Store
Favorite of 2022This award is legit! Heavy, clever and minimal. Truly a trophy I'll keep around for a long time!
Thanks everyone for the support!
@Google notecssπ post on web.dev
6 CSS snippets every front-end developer should know in 2023
Toolbelt worthy, powerful, and stable CSS you can use today.
@argyleink blogcssCyclical keyboard UX with a radio group and CSS trig functions
Radio groups naturally have cyclical roving tab index, but, I put them into a circle and now it really looks cyclical hehe.
@GUIchallenges noteshowscsshtmlThinking on ways to solve Switch Groups
In this GUI Challenge, I show how to take a fieldset packed with a radio group, and turn it into a switch group that controls text alignment.
@argyleink blogcssUse color-mix() to give opacity to opaque colors
Relative color syntax is a better way, but still fun to know this trick.
@Google notecssNew post on DCC about CSS Nesting
@argyleink noteshowshehe
@admin noteDeno & Fresh have been rad.
Same goes for Deploy.butβ¦
95% of the issues have been deps.
I have deps on NPM, deno.land, esm.sh, and unpkg⦠if any of these services hiccup, and I try and build; builds fail.
No single service can serve all the modules I need, and I don't need that many
π©π
@argyleink blogcssA use case for CSS overflow-clip-margin, nested border radii
An alternative solution for nested border radius that clips the content-box.
@Google notecssI'm fallin behind getting my hands on some #CSS stuff!β¦ Src of my FOMO:
Hella powerful stuff there that I really don't want to let get away from me.
@argyleink blogcssRetro Wave Gradient
Quick example of how to make that striped mask on the bottom of the circle gradient.
@admin noteshowsafk.
@argyleink blogcssConic gradient Android spinner
Recreate an indeterminate spinner from Spotify, building off a tip from last week π€π»π
@pops note37 today. Maybe I'll upgrade this 2011 Mac Air.
@argyleink notecssThis felt like a future of library customization, using
@layer
:/* <tool-tip> styles */ @import "tool-tip.css" layer(components.tooltip); /* later, in some-new-context.css */ @layer components.tooltip { .some-new-context tool-tip { --_bg: var(--surface-1); --_shadow-alpha: 15%; } }
Scope the import, then append tweaks into that scope from anywhere. Safe and sound.
Rad stuff.
@Google blogcssCircular gradient stroke chart
Two gradients, one's a mask and the other is the angle / completion.
@pops noteGettin the wiggles out before bedtime;
kids night club style.@argyleink blogcssAnother rad use for the line-height unit
Complimenting half leading with the lh unit on inline padding
@argyleink notecssMath color palettes = letter spacing
Optical color palettes = kerning@argyleink blogcssA color-contrast() strategy for complimentary translucent backgrounds
With relative color syntax and the color-contrast() function, we can achieve a robust and dynamic overlay effect.
@Google notecssMeet the new web color spaces!
- What is a color gamut or color space
- Review of the classic color spaces
- Meet the new web color spaces
- Migrating to HD CSS color
- Debugging color
It's the article I wish I had when learning about CSS color updates.
@GUIchallenges blogcssThinking on GLITCH effects
I chose clip-path and skew(), what do you choose?
@argyleink notecssCSS color tip!
Need a rainbow gradient? Let
<hue-interpolation>
do the work..vibrant-rainbow { background: linear-gradient( to right in hsl /* vibrant gradient HSL colorspace */ longer hue, /* hue-interpolation set to longer */ red, red /* now red to red goes all the way around */ ); }
@Google notecssCSS color-mix()
I've got a new post on Chrome Developers with everything you need to know.
π Check it out!
@argyleink notecssTcsS - Typed Cascade Style Sheets
Why hasn't this been made yet? CSS has all the type information needed to create a comparable experience to TypeScript.
@argyleink blogcss10 powerful ways to use CSS variables
Tokens, house props, adaptive props, pseudo-private props, partial props, mixin props, swappy props, style query props, meta lang props and typed props. Oh my!
@Google notejsDelete your timeout functions and shake off their bugs, here's the event you really need:
scrollend
.Read all about it on Chrome Developers and checkout the polyfill I wrote on NPM.
@Google notecssProud to share I'll be MCing CSS Day 2023 with Michelle Barker.
@argyleink blogcssA CSS logoβ½
A 2023 take at an adaptive CSS logo, thing.
@admin noteService worker update:
- Workbox added
- Offline pages (as you visit them)
- Caches images (as you download them)
Let me know if anything has broken!
@argyleink notejs2023 prediction:
libraries move to or build upon Deno instead of Node.@Google blogcssjsText Replace Transitions
With view transitions, even replacing text can become a custom animation.
@pops noteArt with the kids π€π
@argyleink blogcssNew CSS Relative Units
This brings us to a total of 54 CSS length units.
@argyleink blogcssjsCollections are coo
Thoughts on arrays in JS and selectors in CSS
@argyleink blogcssjsNew Year, New Site
Read about the tech behind this new site and all the APIs I'm playing around with?
@Google blogcssGradient hue interpolation
Tell the browser to take a different route when building gradient steps.
@argyleink notecssI find this so much more readable.
@media (width <= 720px) {}
Caniuse says we're waitin on Safari to bring it from TechP to Stable; aka plugin still required π
@GUIchallenges noteshowsjsThinking on ways to do UI Physics
In this GUI Challenge, I use requestAnimationFrame and custom properties to make bouncy and jelloey springy UI effects.
@argyleink notecssIndividual transforms are rad.
when you don't need to manage the order@argyleink notecssThings CSS Could Still Use Heading Into 2023
Just a couple of ideas!
Chris Coyier
They're great ideas
- Styleable resize handles
- Regions
- Standardized multi-line
- Mixins & extends
- Inline truncation
- Animate to auto
- Nesting π
Missing
text-wrap
tho!h1, h2, h3 { text-wrap: balance; }
@Google blogcssCSS Anchor API is lookin rad!
Name an anchor, position stuff to it.
@argyleink notecsshtml:has(.CertainItem:focus-visible) { scroll-snap-type: y mandatory; scroll-padding-block-start: 100px; } .CertainItem:focus-visible { scroll-snap-align: start; }
On demand with
:has()
,
when a certain item is focused..snap dat item into a nice position.
@Google notecssLogical Properties
Learn once, works everywhere.MDN Β· Learn CSS Β· web.dev Β· The CSS Podcast
@admin noteDomain's moved π
Soft launch of nerdy.dev successful π€π
Still more work. Expect change!
@argyleink notecssNeed a dropcap?
Try thelh
unit π€::first-of-type::first-letter { line-height: 1; font-size: 3lh; float: start; }
@Google notecss@Google notejsIn ~1 minute you can have FLIP-like animation on your page with View Transitions.
document.startViewTransition(() => { // modify the dom // - hide stuff // - move stuff // - whatever! })
Game changer.
@argyleink notecsslayouts are loops.
@argyleink blogcssState of CSS 2022 Results are in!
I didn't have any expectations going into this, but sure came out feeling proud: The CSS Podcast, Open Props, Learn CSS, Nesting.. all toppin the charts π
@Google note5 years at Google π
@argyleink notecssa design tool is like a workspace with pre-squeezed paints ready. bummer is.. many artists have a preference in their paint and ink brands.
soon web browsers will offer the choice, will graphic design tools?
@Google blogcssLCH Luminance vs HSL Lightness
Lightness != Luminance
@argyleink notecssGrid and Subgrid layout slots
with named areas are rad π€πPlacing things by name like search, tab bar, and home bar can be sweet.
Try it
(experiment in Canary, Safari Tech Preview or Firefox)@Google notecssuse
:has()
for when an element doesn't have some other element as a child, like a card without a heading π€.card { ... &:not(:has(h3)) { /* .card's without h3's */ } }
@Google notecss@argyleink noteshowsDevTools You Didn't Know Existed
The daily.dev show.
@theCSSpodcast noteshowsEnd of Season 3 of the CSS Podcast:
YouTube | Podcast!Had a blast, CSS is so rad β€οΈ
@argyleink notecssa rad #CSS one-liner for your hot topics
@layer demo { h1 { text-emphasis-style: "π₯"; } }
@GUIchallenges noteshowsThinking on ways to solve card stacks
In this GUI Challenge, I animate a stack of cards using
transform origin
,grid
and:has()
.@theCSSpodcast notecssshowsSubgrid
Una and I discuss subgrid, a special value for
grid-template-rows
orgrid-template-columns
. Learn the basic, use cases, tips, tricks and gotchas.@Google notetalksshowsOh Snap!
Spoke at CSS Cafe. Watch on YouTube, Peep the slides.
@Google notegitAnnouncing Chrometober!
Just like Designcember but hauntd! Checkout the blog post Building Chrometober by Jhey for lots of great details about the process.
@argyleink notegithtmlMade my first commit to the HTML Spec for the
scrollend
event.@GUIchallenges noteshowsThinking on ways to solve transitions π§ββοΈ
In this haunted GUI Challenge, I live code CSS
clip-path
transitions, demo some rad effects, and cover gotchas. If you don't knowclip-path
, you will by the end.@argyleink noteshowsState of CSS Frameworks
@Google notetalksOh snap!
Spoke at An Event Apart in Denver on all the magical things you can do with CSS scroll-snap!
@GUIchallenges noteshowsThinking on ways to solve tooltips
In this GUI Challenge, I build a
<tool-tip>
custom element with:has()
, transforms, and logical properties. Besides a small backup script for:has()
, it's all CSS powered.@GUIchallenges noteshowsThinking on ways to solve the cafe wall illusion
In this GUI Challenge, I recreate a classic illusion with CSS.
@argyleink noteshowsOn the Learn with Jason show!
Jason and I bring a NextJS app to life with Open Props. Even get to do a little animation π
@GUIchallenges noteshowsjsThinking on ways to solve carousels
In this GUI Challenge, I try and make an accessible, responsive, adaptive and decently full featured carousel.
@Google notetalksshowsSpoke at the super rad CSS Day in Amsterdam on CSS Scroll Snap.
Watch the video, peep the slides
@Google notetalksshowsState of CSS 2022
Spoke for a Google IO video and wrote an accompanying mega blog post.
@argyleink blogcsshtmlMy container query strategy
A single use custom element.
@argyleink noteshowsWas on @KendoUI's React Wednesdays, chattin about Open Props.
@Google notegitAnnouncing Designcember!
We on the Chrome Team use the site as a place to both test new web features all combined together, but also to showcase content from our team and others around the web.
Checkout the blog post Building Designcember for lots of juicy details.
@argyleink noteshowsSwyx and I chat DX vs UX, complexity cliffs in UI, and a little about design.
@argyleink notegittoolsAnnouncing open-props.style
350 β¨freeβ¨ CSS variables
@argyleink notecssUX/UI Designers are forced to design in px, in a world where accessibility is a legal requirement Christine Vallaure
Full story πWhy designers should move from px to rem (and how to do that in Figma)
@argyleink notecssshowsCSS Nesting for the W3C!
@Google notecssBillion Laughs Attack
aka: XML bomb π£A type of DoS attack aimed at XML parsers that with a few liens of code, aims to consume a ton of memory.
:root { --ha1: lol; --ha2: var(--ha1) var(--ha1) var(--ha1); --ha3: var(--ha2) var(--ha2) var(--ha2); --ha4: var(--ha3) var(--ha3) var(--ha3); --ha5: var(--ha4) var(--ha4) var(--ha4); ... }
#CSS was a victim of this when custom properties were introduced.
Learn more on Wikipedia or the CSS Variables Spec.
@argyleink noteshowscssI join Kevin Powell on Twitch to talk about my favorite up-and-coming CSS features.
@argyleink noteshowscssCSS scroll-linked animations with Kevin Powell!
@Google notetalksHD CSS Color
Spoke again at CSS Camp! This time on HD color, explore what we can use today and how to prepare for the future. Checkout the slides.
@Google notetalksshowsColor Gamuts of 2021
Spoke at CSS Cafe. Watch on YouTube, Peep the slides.
@Google notetalksshowsGoogle IO 2021
Gave a workshop on building a user-adaptive interface. CSS grid, flexbox, media queries, and much more.
@Google noteshowscssJecelyn and I show some of the ways Chrome DevTools supports designers.
@Google notetalksWhat's New In CSS
@Google notetalksGreat Developer Tools
Spoke to the Stripe DX team in Seattle at their summit where I shared learnings from working with Chrome DevTools teams and creating VisBug. View the slides.
@argyleink notegittoolsAnnouncing conic.style
Grab n' go beautiful and unique
conic-gradient
s.@Google notetalksshowsWhat's New in 2020
Spoke online for London CSS, rapid fire CSS goodies like proposals, drafts, specs, tools & more. Check out the slides.
@argyleink notegitcsstoolsAnnouncing transition.style
Grab n' go (dont even need the lib)
clip-path
animations@argyleink notecssgitMade my first commit to a CSS Spec.
@argyleink noteshowsI join David Khourshid and Stephen Shaw on The Keyframers!
@Google noteshowsKayce and I answer some DevTools questions π
@Google notetalksCorner at View Source Conf in Amsterdam
@argyleink noteshowsChatted VisBug with Stefan Judis π€π
@argyleink notegitcsshtmlReleased Slyd!
<slyds> <slyd> <h1>Slide 1</h1> <h2>subtitle</h2> </slyd> ... </slyds>
Scroll snap powered, parallax featured, bi-directional slide framework.
@argyleink notetalksDeceiving For Good
Spoke at Seattle Interactive Conf about using UX knowledge for good. See the slides.
@Google notetalksshowsSpoke at CSS Camp on how to slow the pace down in an app for anxiety free, frictionless UX.
Spoke at JS Camp on how to leverage PWA features to build realistic prototypes.
Both talks were in the beautiful city of Barcelona β€οΈ
@argyleink noteshowsMPJ(funfunfunction) and I chat CSS Grid.
@argyleink noteshowsRick Viscomi and I chat about the role of design systems in modern web development and how they can change the dynamics between designer and developer.
@Google notecssBecame a member of the W3C and CSSWG!
@Google notegittoolsVisBug was made open source! Plus an interactive tutorial website that looks like a bunch of artboards that need fixed.
Watch the announcement at Chrome Dev Summit 2018.
@argyleink notegitReleased Kung Fury! A syntax highlight theme.
@argyleink notegitjsReleased blingbling.js!
import $ from 'blingblingjs'
Micro-library of shorthands for DOM selection, events, and attribute manipulation in a super minimal ES module.
@argyleink notegitjsReleased roving-ux.js!
import { rovingIndex } from 'roving-ux' rovingIndex({ element: document.querySelector('#carousel') })
User's shouldn't need to tab through each item in a list to see the next list
- Providing keyboard list UX should be easy
- Maintaining the last focused element should be easy
- RTL Support
@Google notetalksshowsI made a cameo in the keynote at Chrome Dev Summit 2018! Had a blast.. moment of a life time π₯
I wore this shirt from TeeJungle, it was a thing.
@argyleink notegitcssReleased ragrid.css!
<section grid="columns" vertically-aligned="bottom">β¦</section>
Works like auto-layout:
- Capable of 12-column layouts, packery, & masonry
- Uses recognizable attributes instead of classes
- Perfect for components
- 528 bytes gzipped
An intrinsic first, minimal set of layout attributes.
@argyleink notetalksshowsSpoke at TEDx, Tacoma: Embrace UI.
β Slides built with Node and sockets for palm held slide swipeys.tldr; Embrace UI because it's all around you, and when it's working right it's helping you be more human.
@argyleink notetalkshtmlSpoke at HTML5 DevConf in San Francisco about the cross platform (Android, iOS, Windows Phone) hybrid web app Lively.
@argyleink notetalksπ Taught at Art Institute of Seattle:
- Intermediate Web Scripting
- Advanced Web Scripting
@argyleink notetalkshtmlRecorded my first set of tutorial videos. They were on #HTML5 for Intel's Developer Zone.
@argyleink notetalksGave my first front-end talk at an Adobe CreateNOW event in Seattle.
Crawl the CSS Webringβ½