詳細解説有言実行：Progressive Enhancementで構築したリデザイン
Brecht De Ruyte は自身のサイトを progressive enhancement の実証として再設計しました。corner-shape squircle、:active-view-transition-type() による方向対応 cross-document view transition、@property を使った hue 変化 scroll orb、anchor positioning によるJS不要の nav ピルハイライトをすべて @supports ブロック内に収め、polyfill ゼロで動作させています。タイプスケールは clamp() によるビューポート連動の fluid sizing を採用し、SCSS を廃して oklch と color-mix() を用いるプレーン CSS に移行、@layer でカスケードを管理しています。scroll-state query でスティッキーヘッダーの影と表示切替を Intersection Observer なしで実現し、animation-timeline: scroll(root) で読書進捗バーを実装。Interop 2026 対応の enhanced attr() 構文で data-vt 属性から view-transition-name を解決し、::scroll-button() による CSS のみのカルーセルも導入しています。
Read Articlearrow_forward Video · チュートリアル16:41
CSSで反射するグロー効果を作る
Kevin Powell は、Dribbble で見つけた上下バーにグラジエントグローを持つデザインからヒントを得て、anchor positioning で追従する nav ハイライトに反射グロー効果を実装する方法を解説します。核心テクニックは border-block-start と border-block-end で効果を水平エッジに限定し、border の色の代わりに background 短縮形に padding-box と border-box の 2 レイヤー radial gradient を適用することです — border-image を使わない CSS グラジエントボーダーと同じアプローチです。anchor positioning でグロー pseudo-element の幅をホバー中のリンクに合わせ、calc() で両側 40px 拡張して光の広がりを表現します。transition-delay を分割し、ホバー進入時は inset が即座に反応して opacity がフェードイン、マウスアウト時は opacity が先に消え 700ms 後に inset がリセットされます。リンクには oklch の box-shadow を加え、周囲の要素への反射光効果を演出しています。
AI_INFOGRAPHICWATCH_VIDEOarrow_forwardArticle · ガイドREAD TIME: 4m
CSS backdrop-filterプロパティガイド
backdrop-filter が受け付けるすべての filter 関数 — blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), saturate(), sepia(), opacity(), drop-shadow() — を網羅した簡潔なリファレンスです。重要なのはフィルターの適用順序で、左から右へ逐次処理されるため、brightness の後に contrast を適用した場合と contrast の後に brightness を適用した場合では結果が異なります。ブラウザサポートの格差も解説しており、opacity() は Firefox Nightly のみで安定動作し Chrome・Edge・Safari では無視され、drop-shadow() も同様の制限があります。本番の glassmorphism 効果には blur() と brightness()・contrast()・grayscale() の組み合わせが安全です。効果を表示するには半透明の背景が実質的に必要ですが、著者はこれを制限ではなく意図的なデザインの指針と捉えています。
READ_FULL_LOGarrow_forwardArticle · テクニックREAD TIME: 3m
豪華なフレーム用CSS Generator（波線、ギザギザ、ウェーブ、破れなど）
Temani Afif の CSS Generators サイトに fancy frame ジェネレーターが追加されました。squiggly、ragged、wavy、torn などの有機的で不規則なボーダー形状を clip-path: shape() だけで生成します。生成されたコードは shape() 関数の smooth カーブコマンドと calc() によるパーセント・ピクセル混合オフセットを使い、SVG や pseudo-element を一切使わずに要素サイズに追従しながら有機的な輪郭を保つ .frame クラス単独の CSS ルールを出力します。このツールは Afif の既存ジェネレーターコレクションを拡張し、従来はコードの記述が難しかったテクニックをポイント&クリックのインターフェイスで手軽に利用できるようにしています。
READ_FULL_LOGarrow_forwardArticle · 考察READ TIME: 8m
Tailwind CSS v4 vs MUI、Ant Design、Styled Components
このアーキテクチャ比較記事は、Tailwind CSS v4・MUI・Ant Design・Styled Components を単なるスタイリングの選択肢としてではなく、スタックの異なるレイヤーで機能するツールとして位置付けています。Tailwind v4 の主な変更点は、シングルインポート設定（@import "tailwindcss"）、oklch カラー値をサポートする CSS ファースト @theme ディレクティブ、そしてフルビルドで最大 5 倍・増分ビルドで最大 100 倍の高速化を実現したビルドエンジンの再設計です。MUI と Ant Design はアクセシビリティのデフォルト設定・キーボードナビゲーション・フォーカス管理を含む完全なコンポーネントエコシステムを提供しますが、固定 DOM 構造とカスタムデザインシステムと衝突し得るデザイン言語を強制します。Styled Components はランタイムスタイル生成のオーバーヘッドと未使用スタイルの残留リスクを抱えています。カスタムデザインシステムとマルチフレームワーク対応には Tailwind、ダッシュボードの迅速な構築には UI キット、スタイルがコンポーネント props と密に結合している場合にのみ CSS-in-JS を推奨しています。
READ_FULL_LOGarrow_forwardArticle · テクニックREAD TIME: 5m
CSSで折れた角を作る
Kitty Giraudel は、3 層の clip-path: polygon() を重ねた折り畳みコーナーのホバー効果を詳解しています。画像は --fold-start-x: 30%・--fold-start-y: 25% の 5 点ポリゴンにクリッピングし、::before の白い三角形が折り目の裏面を表現し、::after の影三角形が奥行きを加えます。すべてのレイヤーのアニメーションは 400ms の clip-path トランジションで行われ、pseudo-element にも継承されます。filter: blur() と clip-path が併用できないため、柔らかい影には --index カスタムプロパティで半ピクセルずつオフセットした約 10 個の装飾 div を積み重ねる回避策が必要です。sibling-index() で解決できますが、記事執筆時点では Firefox が未対応であることも触れられています。
READ_FULL_LOGarrow_forwardsummarizeDigest_Summary
Brecht De Ruyte のサイトリデザインが今週のフィーチャー記事です。corner-shape によるsquircle、方向対応のcross-document view transition、scroll-state queryによるsticky header、::scroll-button()を使ったCSS専用カルーセルをすべて@supportsガード内でpolyfillゼロで実装したprogressive enhancementの教科書です。Interop 2026のenhanced attr()構文も含め、適切なfallbackレイヤリングがあれば最新機能を今日から本番で使えることを実証しています。
CSSテクニック面では2本の記事が際立ちました。Kitty Giraudelのanimated folded-corner effectは3層のclip-path: polygon()とfilter: blur()との非互換に対するクリエイティブな回避策を示し、Temani AfifのFancy frameジェネレーターはクリック操作だけでclip-path: shape()ベースの有機的なボーダーを生成します。backdrop-filterガイドはフィルター関数の順次適用ルールと、opacity()・drop-shadow()のブラウザサポート状況を明確に整理しています。
アーキテクチャ面では、Tailwind CSS v4とMUI・Ant Design・Styled Componentsを代替ではなくスタックの異なるレイヤーとして位置付けた比較記事が印象的です。Kevin PowellのAnchor positioning nav glowチュートリアルは、oklchグラジエントとborder-boxクリッピングを使った分割遅延トランジション技法で週を締めくくります。
Key Takeaways- scroll-state query・enhanced attr()・::scroll-button()などのInterop 2026機能は、@supportsガードで今日から本番利用できます。De Ruyte のリデザインはすぐに参照できるリファレンスです。
backdrop-filterのフィルター関数は左から右へ順次適用されます。opacity()とdrop-shadow()はFirefox Nightly以外では不安定なため、クロスブラウザglasmorphismにはblur()・brightness()・contrast()・grayscale()を使ってください。- Tailwind v4はカスタムデザインシステムとマルチフレームワーク対応に最適で、MUIのようなコンポーネントライブラリは固定DOM構造が許容される高速ダッシュボード構築に適しています。
