Adam Argyle

Adam Argyle episodes

September 29, 2025 Getting A Frontend Job In 2025 On Frontend Fire

I joined the good folks on Front-End Fire to share how front-end interviewing is like in 2025, in the age of AI and short attention spans.
⤷ website · youtube · spotify · apple
0 min
September 26, 2025Sticky Gradient Transitions
Sticky staggered offsets + gradients = neat transition
Simple version (linear)
Trig version (curves)
0 min
September 26, 2025 Squircles

Squircles with clip-path: shape(), while we wait for corner-shape: squircle.
Vote for corner-shape in Interop 2026 or give this little GUI a peep from Zoran.
Try on Codepen
0 min
September 25, 2025 Just Vite It

Nobody wants to see your ugly config,
Just Vite It.
0 min
September 20, 2025Scroll To Bloom
Scroll To Bloom
animation-timeline: view()
:nth-of-type(An + B)
@keyframes
SO fun.
0 min
September 19, 2025 Karaoke At Cascadiajs

Wow Lerosh, these are rad pics from CascadiaJS 🤩
0 min
September 19, 2025 Cascadiajs 2025 Talk

My talk is in just a couple hours here in Seattle at CascadiaJS 🤘🏻💀
cascadiajs-2025.netlify.app
0 min
September 10, 2025One List To Rule Them All
Whether I'm giving a talk or on a podcast, these two things constantly pop up:
how do I find what to study to keep up?
what's new in CSS?
If you've wondered those things before, then this list is for you.
Find something you've never heard of, click the link; and look at you, you're already getting more familiar with what's new!
Selectors
#
:has()
:is() and :where()
:focus-visible
:user-valid
:user-invalid
:active-view-transition
:active-view-transition-type()
:target-current
:popover-open
:scope
:heading
:heading()
:state()
Pseudo Elements
#
::backdrop
::slotted()
::part()
::highlight()
::grammar-error
::spelling-error
::view-transition-new()
::view-transition-old()
::view-transition-group()
::view-transition-image-pair()
::scroll-button()
::scroll-marker()
::details-content
::picker()
::picker-icon
::checkmark
::column
::target-text
Language
#
CSS Nesting
@rules
#
@property
@container
size query
style query
state query
@scope
@layer
@keyframes with entry and exit
@supports
@starting-style
@view-transition
@position-try
@mixin
@function
@else
@when
Color
#
color-mix()
color(from …)
contrast-color()
oklch(), oklab(), hwb(), color()
linear-gradient(in oklab, …)
Functions
#
var()
if()
linear()
fit-content()
repeat()
min()
max()
attr()
env()
circle(), polygon()
scroll()
view()
clamp()
sibling-count() and sibling-index()
cos(), sin(), tan(), pow(), atan2() asin() acos()
shape()
light-dark()
at-rule()
image-set()
anchor()
random()
random-item()
control-value()
progress()
media-progress()
container-progress()
mix()
calc-mix()
cross-fade()
transform-mix()
first-valid()
toggle()
Properties
#
accent-color
color-scheme
container-type
content-visibility
contain-intrinsic-size
aspect-ratio
animation-composition
animation-timeline
animation-range
text-wrap
font-palette and font-palette-values
scrollbar-gutter
forced-color-adjust
reading-flow
scroll-behavior
interpolate-size
corner-shape
overscroll-behavior
scroll-marker-group
scroll-target-group
transition-behavior
scrollbar-color and scrollbar-size
text-box
anchor-name
anchor-scope
position-anchor
position-area
position-try-fallbacks
position-try-order
position-visibility
field-sizing
initial-letter
Values
#
grid-template-columns: subgrid;
text-align: start | end;
overflow: clip;
Queries:
#
@media (prefers-contrast)
@media (prefers-reduced-data)
Units
#

There's a whole lot of units now. In my opinion, each are unique and useful in their own occasions. Super powers, knowing which to use when.
Relative
#
ex
ch
cap
ic
lh
Root Relative
#
rex
rch
rlh
ric
rcap
Absolute
#
pt
pc
in
cm
mm
Q
Viewport
#
vw
vh
vi
vb
vmin
vmax
dvw
dvh
dvi
dvb
dvmin
dvmax
svw
svh
svi
svb
svmin
svmax
lvw
lvh
lvi
lvb
lvmin
lvmax
Container
#
cqw
cqh
cqi
cqb
cqmin
cqmax
Have a suggestion? Let me know on Bluesky or Twitter! 🤝
0 min
September 05, 2025 Keyframe Offsets

Well aren't keyframe offsets just super handy!
circle.animate([
{ offset: 0, transform: 'scale(0)', opacity: 1 },
{ offset: .10, transform: 'scale(1)', opacity: 1 },
{ offset: .75, opacity: 1 },
{ offset: 1, opacity: 0 },
])
See those useful offset values?
In CSS
#

Keyframe percentages are super important in crafting animations; for both complex animations or just well orchestrated timings.
You've probably seen the % values in the keyframes.
#circle {
animation: scale-then-fade-out 3s ease infinite;
}
@keyframes scale-then-fade-out {
0% { transform: scale(0); opacity: 1; }
10% { transform: scale(1); opacity: 1; }
75% { opacity: 1; }
100% { opacity: 0; }
}
They're pretty much 2nd nature.
But I bet you've never thought to yourself, "Let me specify this keyframe offset value to 15%" 🤓 At least I hadn't, but I like the more formal name!
So… what about in JS?
In JS
#

In the animate function, the keyframes are passed as an array of objects, where each object is a keyframe.
The logical place to put an offset value is right there!
circle.animate([
{ offset: 0, transform: 'scale(0)', opacity: 1 },
{ offset: .10, transform: 'scale(1)', opacity: 1 },
{ offset: .75, opacity: 1 },
{ offset: 1, opacity: 0 },
], {
duration: 3000,
easing: 'ease',
iterations: Infinity,
})
and there you have it, the tip in this article, how to set offsets in your JS keyframe animations. At least… that's why I wrote this. Was new to me!
Try it out in this Codepen if you want to 🙂
0 min
August 28, 2025Gradient Style Is Out Of Beta
I'm happy to share that gradient.style is out of beta and:
has been Open Sourced
finally supports multiple background layers
Open to feedback and comments 🙂
0 min

About Adam Argyle

From the publisher's feed

RSS Feed for Adam Argyle: Web design & development tips & tricks: CSS, JS, HTML, Design, & UX.

Share Adam Argyle

Sign up to save your podcasts

Adam Argyle

Adam Argyle episodes

About Adam Argyle