Adam Argyle

1 post| pastweek

12 posts| pastmonth

98 postsin2025

devrel@google11 months ago

To give View Transitions a perspective, either:

::view-transition-image-pair(--foo) {
  perspective: 500px;
}
/* or */
::view-transition-new(--foo) {
  transform: perspective(500px);
}

Hope this finds someone well.

devrel@google1 year ago

Advanced attr() in Chrome 133. Opening new ways to integrate with CSS from your HTML:

<li scroll-snap="start"></li>
<li scroll-snap="center"></li>

[scroll-snap] {
  scroll-snap-align: attr(scroll-snap type(start | center | end));
}

Try it & learn more from Bramus @ Chrome Developers

122 postsin2024

atom@argyleink1 year ago

.card {
  aspect-ratio: 4/3;
  
  @media (orientation: portrait) {
    aspect-ratio: 3/4;
  }
}

atom@argyleink1 year ago

Combo light-dark() with Temani's great border-image techniques.

.card > figcaption {
  color: light-dark(#000, #fff);
  border-image: fill 0 conic-gradient(light-dark(#fff8, #0008) 0 0);
}

Try it on Codepen

atom@argyleink1 year ago

A 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 */
  ;
}

evil@atom2 years ago

document.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…

99 postsin2023

atom@argyleink2 years ago

.classic-gradient {
  background-image: 
    linear-gradient(45deg, 
      white, 
      black 0% 20%, 
      white 0% 40%, 
      black 0% 60%, 
      white 0% 80%, 
      black 0% 100%
    )
  ;
}

atom@argyleink3 years ago

This 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.

atom@argyleink3 years ago

CSS 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 */
  );
}

39 postsin2022

atom@argyleink3 years ago

html: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.

15 postsin2021

devrel@google4 years ago

Billion 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.

3 postsin2020

12 postsin2019

5 postsin2018

1 postin2017

1 postin2014

4 postsin2013