← KolofonDesignelementSVG-filter

Liquid glass

Navigasjonsdocken bryter lyset bak seg, ikke bare gjør det uskarpt. Glasset har tykkelse, kant og et speilende høylys.

Vanlig «glassmorfisme» er backdrop-filter: blur(). Liquid glass går lenger: et SVG-filter med feTurbulence og feDisplacementMap forskyver pikslene bak glasset, slik at innholdet ser ut til å bøye seg gjennom en linse.

Lysbrytningen virker i Chromium-baserte nettlesere. Safari og Firefox får en mykere variant med blur, metning og samme høylys. FX-runtime oppdager hva nettleseren støtter og slår på riktig variant.

Høylyset er to radielle gradienter i blandingsmodus «screen» og indre skygger som etterligner glassets tykkelse.

<feDisplacementMap in="SourceGraphic" in2="soft"
  scale="48" xChannelSelector="R" yChannelSelector="G" />

I koden: app/layout.tsx · app/globals.css (.liquid)

Neste bit

Kolofon · Designelement04

animation-timeline

Scroll-drevne animasjoner

Lesefremdriften, kort som glir inn og stabler som krymper styres av scrollposisjonen, i ren CSS uten én linje JavaScript.

Kolofon · Teknologi05

React 19.3

View Transitions mellom sider

Når du klikker et kort, flyr bildet og tittelen over til artikkelen i stedet for å forsvinne og dukke opp igjen.

Kolofon · Designelement06

CSS grid · @property

Bento-grid med levende kanter

Innleggene ligger i et asymmetrisk rutenett der hvert kort har sin egen størrelse, sin egen generative farge og en kant som roterer.