CSS only scroll fade example that I implemented on ibrewmyown.coffee:

@supports (animation-timeline: scroll()) {
  @property --fade-left {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }
  @property --fade-right {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

  .scroll-fade {
    --fade-distance: 40px;
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 var(--fade-left),
      #000 calc(100% - var(--fade-right)),
      transparent 100%
    );
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    animation:
      fade-in-left 1 linear both,
      fade-out-right 1 linear both;
    animation-timeline: scroll(x self), scroll(x self);
    animation-range:
      0% 12%,
      88% 100%;
  }

  @keyframes fade-in-left {
    from {
      --fade-left: 0px;
    }
    to {
      --fade-left: var(--fade-distance);
    }
  }

  @keyframes fade-out-right {
    from {
      --fade-right: var(--fade-distance);
    }
    to {
      --fade-right: 0px;
    }
  }
}

Easiest method for targeting Safari with CSS and Tailwind in 2025.

Discover the best coffee gifts for the holidays—espresso machines, drippers, brewers, and bean subscriptions that coffee lovers will actually use every day.

Australian Design Engineer who loves working on open source software for the web.

Staff front-end engineer based in Amsterdam, working on AI assistants at Shopify.

This is one of those that feels like it should be easier than it ends up being, but here is where I landed at to ensure a modal image preserves its 3/2 aspect ratio no mater the viewport width/height.

.modal {
  aspect-ratio: 3 / 2;
  height: min(calc(100vh - 2rem), calc((100vw - 2rem) * 2 / 3));
  margin: auto;
  position: relative;
}

See it in action on I Brew My Own Coffe.

It’s always felt weird using opacity for disabled buttons for situations where its not placed on a solid background.

In this alternative approach I am using color-mix to create a similar disabled effect without the opacity.

<button
  class="bg-[color-mix(in_srgb,var(--color-blue-500)_50%,var(--color-background))] text-[color-mix(in_srgb,var(--color-white)_50%,var(--color-background))]"
  disabled
>
  Hello world
</button>

See also Rauno’s Web Interface Guidelines.

I’ve been fortunate to work with some amazing people over the years and a couple of those folks are open for new opportunities. Scoop them up.

Fixing folks list alignment one PR at a time.

• midday/pull/606
• billingsdk/pull/144

Two fantastic pieces of web inspiration:

• operate.so
• tempo.xyz

I’ve been slowly working on my own shadcn/ui registry while learning more about the whole component distrubution setup at work. So far I have the following components:

• <InfoList />
  A list component with support for items, headers, and icons slots.
• <InlineText />
  An inline text component with an icon slot that wraps perfectly with the text.
• <PricingTable />
  A pricing table component with support for monthly/yearly pricing.

Another use case for absolute positioning elements within inline text to support hanging punctuation.

Supports varying sizes of text, without the need for custom negative text indent values.

<p class="relative inline-block">
  <span class="absolute right-full">“</span>Lorem ipsum dolor sit amet
  consectetur adipisicing elit. Iste officia quasi fugiat, dolores ab nam
  repellendus voluptate”
</p>

Native‑like swipeable sheets on the web

A lightweight React Hook intended mainly for AI chat applications, for smoothly sticking to bottom of messages.

Ensure the trailing icon never orphans itself on to a new line. Paired with the icon alignment technique I shared last week to vertically center it.

<p class="relative inline-block pr-[1.25em]">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, ducimus
  <span class="absolute ml-[.25em] inline-flex h-[1lh] items-center">
    <Icon name="arrow-up-right" class="size-[1em]" />
  </span>
</p>

Picked this tip of from John Phamous some time ago.