XOutlier
Download .zipAdd to Chrome

Adam Argyle

@argyleink59k followers

@Shopify design-engineer; prior @GoogleChrome, @GoogleCloud, CSSWG, and CSS Podcast. Host on @whiskeywebfm, maker of @OpenProps, and more

Open on X
Top outlier
77.7×
Best organic post
Peak views
750k
Single post
Bookmarks
35k
Across 100 organic posts
Last scan
Oct 16
Community cache
Posts 100 posts
#DatePost↓ OutlierViewsLikesRepostsBookmarks
1Apr 11, '25G̶o̶o̶g̶l̶e̶r̶… ex-Googler.77.7×750k3.1k214883
2Jul 25, '23I can't stop seeing #CSS View Transitions! here I'm animating new `node.textContent`, letting the browser handle the morph while bringing in custom animations (and stagger) for sta48.6×470k2.3k2521.3k
3May 25, '23Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation 47.4×457k2.7k3601.4k
4Jul 31, '23View Transition powered drag n' drop! just drag events then swappin DOM, #CSS view transitions doin all the animation work (which it's GREAT AT) 🤯 that animated emoji don't miss a36.4×352k2k2301.1k
5Jul 27, '23calc() var() clamp() fit-content(), repeat() min(), max() attr() env() color(), rgb(), hsl(), oklch() circle(), polygon() url() translate(), scale(), rotate() matrix() invert() sin28.4×275k1.7k220464
6Mar 28, '24PREVIOUSLY: separate rulesets for light and dark NOW: one ruleset with `light-dark()`28×270k2k2681.1k
7Mar 3, '23#CSS `text-wrap: balance` ❤️21.4×206k1.4k149278
8Jun 21, '23Kickin the tires of @figma's.. NEW ✨Dev Mode✨ PLUS ✨Figma for VS Code✨18.9×183k1.1k151283
9Aug 15, '24no pain syntax highlighting‽ - no JS - no markup transformation or tokenization how? via Colr Fonts 💪 try it!18.3×177k756123446
10Apr 20, '23Announcing… 🥁 A modern #CSS gradient and color picking tool for next-gen gradients: - explore color spaces - export modern and classic CSS - explore gradient features - share them18.1×175k871156366
11Apr 26, '24#CSS `paint-order`17×164k69592311
12Aug 17, '23Took 30m to make this! viva View Transitions 🤘🏻💀14.6×141k1.2k128536
13Jan 14, '204 layouts for the price of 1, thanks flex 👍 css` form { display: flex; flex-wrap: wrap; & > input { flex: 1 1 10ch; margin: .5rem; &[type="email"] { flex: 3 1 30ch; } }14.2×07.7k1.5k1.3k
14Jul 11, '23Animate every element as it enters the viewport (not saying to do this lol) with just a few lines of CSS 😈 I love the ✨natural stagger✨ this effect has, since it's duration/length13.5×131k85392687
15Jan 8, '24#CSS Neue Bento ✅ grid layout ✅ :has() quantity queries ✅ aspect-ratio container queries ✅ view transitions for flare13.3×128k1.4k1911k
16Feb 3Wild how far you can push "customizable select" with just #CSS10.6×103k1.6k751.1k
17Jul 17, '23#CSS Radiento a bento box radio group design with View Transition animations plus custom "squish" easing from Open Props 🤓 ✅ grid layout ✅ no abs positions ✅ visual transition is 9.8×95k978136593
18Nov 7, '19#CSS :is() selector 🎉 the successor to :any() and :matches() sneak peak into our talk, here's a neat gif I made with XD showing what the :is() selector syntax can do. be excited f8.9×04.6k1.4k314
19Aug 16, '23Experimental #CSS carousel ✅ subgrid ✅ scroll driven animations (SDA) ✅ oklch() ✅ @property ✅ @layer *Lots of code comments* to help break down the effects 🤓 ✅ SDA changes hue/the8.8×85k770124447
20Jan 21, '24h1 { line-height: 1cap; }8.2×79k70451373
21Mar 20, '25#CSS only carousels arrive in Chrome 135 ⤷7.9×76k70287331
22Jun 12, '24pretty cool technique to make tables more usable on mobile! #CSS47.5×73k62650504
23Jun 2, '23❤️ #CSS View Transitions this API can do like anything! even animate `display: none` 🤯 this demo: 1. copies what you type into the `<pre>` 2. calls `document.startViewTransi7.5×72k55881213
24Feb 20, '25yep, been sayin this backend gets to pick the runtime, the version, give it modules, etc front-end picks nothing, has to satiate multiple browsers that constantly change, network i7.3×71k7105892
25Mar 24, '25in Chrome 135 - Tomorrow Mar 26, 2025 customize all the parts of a <select> with #CSS! ⤷7.3×70k1.1k159388
26Nov 27, '23#CSS6.6×63k6386234
27Aug 6, '24#CSS scroll-driven animation + scroll snap events synchronized with a number input scrollSnapChange is lazy: used to update the blue highlight feedback UX scrollSnapChanging is eag6.4×62k1.1k101773
28May 22, '24steal this dialog and popover snippet #CSS - transitions - entry/exit - backdrop included ready for richer design system integration try on Codepen6.1×59k59180594
29Jun 18, '21make taps 300ms faster with 1 line of CSS: ```#css touch-action: manipulation; ``` means: element doesn't want double-tap to zoom result: browser *immediately* responds to taps ins5.9×03.1k575634
30Jul 10, '20CSS Gradient Text 🤘💀5.0×02.6k417633
31Apr 27, '21make focus a little more engaging ```css @media (prefers-reduced-motion: no-preference) { :focus { transition: outline-offset .25s ease; outline-offset: 5px; } } ``` try it4.8×02.5k400586
32Dec 1, '21Announcing Open Props 🎉 350 ✨free✨ CSS variables4.5×01.9k433644
33Sep 12, '20.logo { display: flex; place-items: center; gap: .5ch; font-size: 20vmin; } .logo > img { max-block-size: 1.25em; } 🤩 logo img height is 125% of a responsive font-size (20vmin)4.5×02.4k397518
34Apr 27, '20🎉 flex that gap in the latest release of Chrome Canary 🎉 ```css display: flex; 🦾 gap: 1ch; 🔥 ``` early adopters: help us test it out won't ya!? note: requires web experiments e4.4×02.4k589137
35Oct 13, '20How slick :is(this CSS!?) 😏 removes the margins on all headers with a `.tight` class h1.tight, h2.tight....... 🤢 :is(h1,h2).tight { 🤓 }4.1×02.4k398336
36Sep 19, '25in the audience, scratchin an itch: responsive #CSS scroll animation try it!4.1×39k96960624
37Sep 16, '21media-queries-4 making confusing queries much simpler 😍 caniuse (Firefox only atm) CSS spec PostCSS plugin ⭐️ to show Chromium you want it4.0×02.1k462297
38Apr 15, '21typography and copy editing 🔥 tip ✅ word break with <wbr> and/or ­ ```html <h1>superlongword</h1> <h1>super<wbr>long<wbr>word</h1&gt3.9×01.9k428424
39Aug 21, '21CSS Gradient Shadow 😎 A pseudo-element, sized and positioned within the container, offset + scaled with transforms, then blurred with filters demo3.9×02k261544
40Apr 9, '21full-screen scroll-snap starter? here! 🙂 ```css html { scroll-snap-type: y; } section { scroll-snap-align: center; block-size: 100vh; /* optional */ scroll-snap-stop: always; } ``3.9×01.9k337524
41Aug 7, '21user adaptive frosted glass 😎 ```#css .adaptive-glass { --glass-lightness: 100%; background: hsl(0 0% var(--glass-lightness) / 50%); backdrop-filter: blur(40px); @media (prefers-c3.8×01.8k226670
42Jan 30, '25You can now see which value is the active value in min(), max() and clamp() - in Canary DevTools today - coming to Chrome stable soon!3.7×36k7028074
43Jan 6, '25Focus By Demotion a use case for #CSS `:hover > :not(:hover)`3.6×35k73747383
44Jul 14, '20CSS conic-gradient borders 🤘💀3.5×01.8k317436
45Sep 21, '20#CSS media queries conditionally *apply* styles, BUT did you know they can conditionally *load* styles too? This tasty sip pairs well with a main course of CSS bundle splitting 👍3.5×01.8k363372
46Jul 21, '20bored of your #CSS easing? try a new one! Here's 18 pop choices 🤓 example: --ease-out-expo: cubic-bezier(.19, 1, .22, 1); gist play/fork3.1×01.5k270419
47Sep 28, '20```#CSS width: calc(50% - 2ch); min-width: 20ch; max-width: 70ch; ``` OR ``` width: clamp(20ch, 50% - 2ch, 70ch); ``` aka: optimally half the page minus some space.. but cap it at 3.1×01.6k345304
48Jan 29, '21Explode A Node! an interactive CSS box model experience 🤓 source on @CodePen -3.0×01.6k260308
49Jan 17, '20rgb() ⇒ rgba() just to add transparency? 🤢 hsl() ⇒ hsla() ... 😭 GOOD NEWS! fixed in CSS color-level-4, rgb() & hsl() accept a 4th parameter 🎉 color demo color level 4 docs �3.0×01.6k455131
50Dec 19, '24Wildest #CSS media query I've written in a while `@container (inline-size >= calc(100cqi - 120px))` yep, `calc()` in a MQ! WHY? to re-anchor buttons to be "inside" when space is2.9×28k63861478
51Jan 15, '25#CSS scroll-state() container queries in Chrome 133! @container scroll-state(stuck: top) { … } Read all about snapped, stuck and scrollable in this post: ↪2.7×26k57568334
52Aug 31, '21`font-size: min(100%, 16px);` opt your UI out of iOS zooming when inputs are tapped [video alt] a <select> element is tapped before and after it's font-size is changed, and i2.7×01.3k194387
53Nov 6, '21v2 = no 100vh side effects! ```#css html, body, section { block-size: 100%; } html { scroll-snap-type: y; } section { scroll-snap-align: start; scroll-snap-stop: always; display: f2.5×01.1k196432
54Aug 18, '20Opposing corner radial gradients look softer than angled linear gradients: #CSS background-image: radial-gradient( circle at top right, cyan, transparent ), radial-gradient( circle2.5×01.3k209328
55Jun 20, '19animation happening too fast you can't figure it out? pop open devtools, open the animations panel (), then slow time to 25% or scrub a timeline like me! .drips 👀 give it a shot o2.5×01.4k325139
56Jul 13, '20CSS conic-gradient() filled text 🎉 background: conic-gradient( hsl(100 100% 60%), hsl(200 100% 60%), hsl(100 100% 60%) ) fixed; bonus: fixed position = radness during scroll2.3×01.2k207305
57Jan 30, '20TIL CSS can check for a font installed locally before fetching it remotely! #perfmatters Shout out to Dank Mono, my favorite ligature featured coding font2.3×01.3k270178
58Oct 21, '20🆕 <angle> DevTool ✨ in Canary now ✨ try out an early version today! 👍 A CSS component for quick visual access to angle direction. Thoughts!?2.1×01.3k20681
59Jul 29, '20💯 CSS flex gap is in Chrome 84 💯 play around at this sandbox on @codepen 👇2.1×01.1k28584
60Aug 4, '206 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 2.0×0908173317
61Aug 20, '20in Chromium 86 now: 1-click #accessibility color contrast correction for AA and AAA ratios 🎉 Struggle to fix failing contrast ratios? Tired of the guess and check? @ChromeDevTools2.0×0964311101
62Apr 21, '20✅ style if mobile ✅ style if desktop ✅ style if stylus ✅ style if controller ✅ combine together 🎉 spec caniuse2.0×0973239200
63Feb 3, '21CSS date/time picker concept: grid + scroll-snap-points demo Codepen2.0×01k179232
64Jun 20, '20#lintHTMLwithCSS this selector hunts for links that have: - no href - an empty href - a "#" href (button perhaps?)2.0×01.1k181162
65Apr 16, '21If I'm making "hover to reveal" UI interactions, I like to put them behind the CSS hover capability media query 🤓 Then I'm not hiding content from a user who viewing without the c1.9×01.1k144194
66Jun 15, '20I enjoy modern CSS syntax so much! Here I target article headers that directly follow a paragraph 🤓1.7×01.1k132149
67Feb 6, '21Wondering how sites like Github have nice dark form controls? You gotta set the color-scheme! ✅ enable from CSS (whole page or per selector) ✅ enable from HTML (page can prepare ea1.7×0819156256
68Feb 28, '20🎨 a 4 corner layered gradient by stacking 2 simple linear gradients and using a linear mask to blend them together! 1 red to cyan gradient 1 hotpink to rebeccapurple gradient and 1.7×0949134180
69Apr 23, '20CSS grid has some rad shorthand! Here's a little sample of what y'all can do with it 💀🤘1.7×0966188111
70Sep 1, '21CSS Nesting 1 spec has it's 1st working public draft (not just a draft anymore!) 📄 Here's 4 examples to help get your ramped up and stoked 🤓1.6×083519382
71Nov 10, '21"UX/UI Designers are forced to design in px, in a world where accessibility is a legal requirement"1.6×0753141219
72Oct 30, '20#CSS Media Scroller Layout with Grid 🤓 stumble along with me on YouTube 👉 find the code on @CodePen1.6×0750121232
73Dec 15, '20CSS "individual transforms" in 2021 we'll see these in a lot more styles! Firefox has it, Safari tech preview has it, and Chrome's nearly finished. value: - composable transforms -1.5×0826150120
74Nov 2, '20🆕 in Chrome Canary: dynamic contextual flexbox alignment icons! Intent is to assist you by projecting a minimap of the alignment 🗺 Let us know if these help!1.4×085815626
75Jun 21, '20#lintHTMLwithCSS this selector hunts for lists that have something other than an <li> inside1.4×0844113124
76Oct 5, '21#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 ine1.4×0681105213
77Mar 18, '21LET CSS PICK AN ACCESSIBLE COLOR! `color-contrast()` will automatically pick a color that passes contrast ratios, just give it a list to choose from. aka: throw colors at it! ```#c1.4×0687138156
78May 3, '21user in data saver mode? skip the media, save loads! ```css @media (prefers-reduced-data: reduce) { img, video { display: none; } } ``` (Canary behind a flag only) enjoy NICE page 1.4×0729122146
79Jan 28, '21You can use #CSS to tailor UX writing based on device capabilities 🤓 Here I instruct the user to either hover or tap, depending on if the device can hover or not 👍🏻1.4×0749111152
80Nov 15, '22fun single div, tail chasing circular loader, can be tweaked to a few different looks and is responsive try it on Codepen1.3×062390221
81Jul 7, '201-Line Layouts by @Una “10 modern CSS layout and sizing techniques that highlight just how robust and impactful a single-line of styling code can be” - 🦄 watch it 📼 visit it 📃 m1.3×0611118193
82Oct 19, '21get a callback when the user changes theme 🤓 bonus: snatch that `matches` prop and make it more readable while you're at it1.3×073384160
83Apr 10, '22teach a label element to give itself a nice layout upgrade when it's wrapping a checkbox we :has()'nt seen nothing yet with :has()1.3×073685139
84Jul 19, '22```#css -webkit-mask-image: linear-gradient(to right, #0000, #000, #000, #0000) ``` wrote that last night to give a horizontal scroller a nice "scroll hint" by masking it's edges; 1.3×061971211
85Nov 7, '22Gradient Border with Rounded Corners just made this demo for someone, figured I'd share it here too: 1. transparent border to create the size and space 2. a border radius 3. a grad1.2×056265227
86Oct 17, '20my #CSS typography for headers lately: - unitless liquid line height - wraps on wide/long (less legible!) headlines - 1 liner liquid font size color / spacing belong to the rest of1.2×064284169
87Nov 20, '21Atomic CSS Keyframes ✅ smaller purpose ✅ composable code example: slide fade in, wait 3s, fade out1.2×063279165
88Jan 21, '22make keyboard interaction a little more engaging ```#css @media (prefers-reduced-motion: no-preference) { :focus { transition: outline-offset .25s ease; } :focus:not(:active) { out1.2×056877187
89Sep 3, '20Use #CSS to customize HTML list bullets (and more!) in the upcoming Chromium 86 release (Canary or Beta today) 🆕 individual && global selectors li::marker { color: var(--n1.1×056814397
90May 14, '21Wanna change a parent with CSS‽ Check out `:has` Getting prototyped in Chromium by @igalia 🎉, they believe they've "gathered enough information and data on this that we feel like 1.1×058612875
91Jun 12, '20scroll position = theme hue scroll 🏳️‍🌈 🙂 set --hue on scroll with JS: ```js document.body.onscroll = () => .setProperty('--hue', window.scrollY / 10) ``` use --hue from CSS:1.1×0577102122
92Sep 30, '20boop. 👋 bye trailing space on paragraphs, I'll be giving the ownership of that to your container. k thanks, bye1.1×064883116
93Jul 25, '20feelin like a blob? feel like makin a blob?1.1×06209789
94Feb 12, '21`accent-color: hotpink;` 🎉 Chromium is prototyping the style feature for forms! I couldn't wait, so I went and tried it out in a custom build. Here it is! hotpink checkboxes with 1.0×057512461
95Feb 6, '20TIL about the CSS media query `prefers-reduced-data` 💀🤘 If users have data saver on: - deliver smaller images or just a gradient - smarter <picture> <source>'s - more1.0×055015447
96May 20, '20DevTools now shows you a preview of a background image in your CSS!1.0×07039812
97Jul 24, '19new in Canary @ChromeDevTools: Copy authored CSS Another VisBug inspired feature 🎉 Where VisBug can copy computed styles off any element, now DevTools can now copy authored styles1.0×054914037
98Nov 13, '22subtle UX tip: use `line-height` instead of padding to create vertical space in your inputs for uncramped text highlights try it on Codepen1.0×055755110
99Mar 25, '21boxes are 2 lines of CSS now btw ```#css .box { aspect-ratio: 1; width: 100px; } ``` set a width OR height, get a box thx aspect-ratio 👍🏻 (Chrome 88+, Safari TP, Firefox behind a0.9×05289768
100Apr 15, '21Hello Safari 123 CSS grid tools 🤓0.9×05428339

Scan another creator

@
@karpathy@levelsio@paulg@naval@marclou@illyism

Run this on any account.

XOutlier builds this table for every public profile you open on x.com, with live data and every post, not just the top 50.

Add to Chrome Download .zip