Adam Argyle

Adam Argyle

By
Download on the App Store

Adam Argyle episodes

  • Customize A Select

    Get ready!

    The element can now be customized with CSS,
    check out the post on the Chrome Blog!
    Finally render custom HTML inside an
    Works without JS
    Easy to progressively enhance

    1 min
  • CSS Carousel In Chrome 135

    We just

    announced how CSS can make carousels
    on the Chrome Blog!

    • Incredible accessibility
    • Works without JS
    • Builds upon regular scrollers

      • CSS Carousel Configurator:

      I made this so you can directly see the relationship of a feature you want and
      the related CSS.

      CSS Carousel Gallery:
      Showcases

      meaningful use cases and exemplifies how to orchestrate many capabilities
      together.

      2 min
    • Let the stagger experiments begin

      2019, I proposed an idea to

      help remove a ton of boilerplate code from CSS and HTML while also making
      stagger effects easier on authors. The proposal ended up being
      sibling-index() and
      sibling-count().

      Fun

      news!
      You can try it in Canary today and
      I've got this little example to help kick off some ideas for you!

      Try on Codepen

      Staggering animation
      #

      Instead of inlining a CSS variable for each element:

      <div class="parent" style="--sibling-count: 5">
      <div style="--sibling-index: 1">div>
      <div style="--sibling-index: 2">div>
      <div style="--sibling-index: 3">div>
      <div style="--sibling-index: 4">div>
      <div style="--sibling-index: 5">div>
      div>

      You can use sibling-index() to retrieve it just in time instead of doing the

      work in the template or JS.

      Clean that HTML up to make room for sibling-index() by removing all the inline

      styles:

      <div class="parent">
      <div>div>
      <div>div>
      <div>div>
      <div>div>
      <div>div>
      div>

      and then drop in this new magic bomb:

      .parent > * {
      transition: opacity 0.3s ease;
      transition-delay: calc(sibling-index() * 100ms);
      }

      and now you have a 100ms staggered crossfade transition effect 🤓

      Staggering color
      #

      There's nothing stopping you from using sibling-index() to stagger a color

      change, or anything else!

      Here the hue increments by 50 each element.

      .parent > * {
      --hue: calc(sibling-index() * 50);
      color: oklch(70% 70% var(--hue));
      }

      You could easily add a min() or clamp() or trig functions to help you too.

      Time to experiment
      #

      Share with me what you build!

      Fork this Codepen

      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.