CSSでホログラフィック効果を作成する

トレーディングカード、プレミアムUIコンポーネント、ポートフォリオサイトなどで見かける、視野角に応じて光が変化する虹色の表面効果。ホログラフィックCSS効果は、レイヤー化されたグラデーション、ブレンドモード、そして繊細なアニメーションを使用してこの光学現象をシミュレートします—WebGLは不要です。

本記事では、これらのモダンなCSSビジュアル効果の背後にある構成技術と、実際のインターフェースでそれらを使用する適切なタイミングについて解説します。

ホログラフィック効果が機能する理由

物理的なホログラフィック素材は、光の干渉パターンによって虹色を生み出します。CSSでは、深さと動きを示唆する方法でシフトしブレンドする複数の色のグラデーションをレイヤー化することで、これをシミュレートします。

重要な洞察:ホログラフィックCSS効果は単一のプロパティではありません。これらは、CSSグラデーションのブレンド、ブレンドモードの戦略的使用、オプションのモーションなど、複数の技術が連携して機能する構成です。

基礎:レイヤー化されたグラデーション

CSS虹色グラデーションは、複数のグラデーションレイヤーを重ねることに依存しています。単一の要素にlinear-gradient、radial-gradient、conic-gradientを組み合わせることができます:

.holographic {
  background: 
    linear-gradient(115deg, transparent 20%, oklch(0.7 0.15 200) 45%, oklch(0.75 0.18 320) 55%, transparent 80%),
    conic-gradient(from 45deg, oklch(0.8 0.12 60), oklch(0.7 0.15 180), oklch(0.8 0.12 300), oklch(0.8 0.12 60));
}

各レイヤーが最終的な効果に貢献します。線形グラデーションは方向性のある輝きを提供し、円錐グラデーションはホログラフィックフォイルの特徴である放射状の色の変化を追加します。

グラデーションの種類と構成の背景については、MDNドキュメントを参照してください: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

OKLCH色CSS:モダンな基盤

OKLCH色CSSは、これらの効果に好まれる色空間となっています。RGBやHSLとは異なり、OKLCHは知覚的に均一です—つまり、数値的に等しいステップが視覚的に等しい色の差を生み出します。

ホログラフィック効果において、これが重要な理由:

• より滑らかな遷移:グラデーションが灰色の中間点を通って濁りません
• 予測可能な色相シフト:色がスペクトル全体で自然に回転します
• 一貫した明度:効果が色の停止点全体で視覚的なバランスを維持します

グラデーション補間を明示的に制御することもできます:

.holographic {
  background: linear-gradient(in oklch, oklch(0.7 0.15 0), oklch(0.7 0.15 360));
}

これにより、sRGB補間で一般的な予期しない暗いバンドなしに、連続的な色相回転(開始色相に戻る)が作成されます。

OKLCHの詳細な説明と、多くのデザインタスクでHSLに取って代わった理由については、以下を参照してください: https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl

ブレンドモードとフィルター

ブレンドモードは、グラデーションレイヤーの相互作用を変換します。ホログラフィック効果に最も有用なもの:

• color-dodge:下層の色を明るくし、金属的なハイライトを作成します
• difference:レイヤーが重なる部分で色を反転し、プリズム的なシフトを生み出します
• overlay:乗算とスクリーンを組み合わせて、色褪せることなく深みを加えます

フィルターは最終的な仕上げを追加します:

.holographic-layer {
  mix-blend-mode: color-dodge;
  filter: brightness(0.8) contrast(1.4);
}

ブレンドモードとフィルターを組み合わせると、特に低性能またはモバイルGPUでレンダリングコストが増加する可能性があることに注意してください。

モーションを責任を持って追加する

繊細なアニメーションは、ホログラフィック効果に命を吹き込みます。標準的なアプローチは、拡大されたグラデーション上でbackground-positionをシフトすることです:

.holographic {
  background-size: 200% 200%;
  animation: shimmer 6s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

パフォーマンスの考慮事項:可能な限り、アニメーションにはtransformとopacityを使用してください。背景アニメーションの場合、不要なメモリオーバーヘッドを避けるため、will-change: background-positionを控えめに、一時的に(例えば、ホバーやアクティブ状態で)適用してください。

アクセシビリティ要件:常にユーザーの設定を尊重してください:

@media (prefers-reduced-motion: reduce) {
  .holographic {
    animation: none;
  }
}

実用的な制約

ホログラフィック効果は、デバイスやブラウザによって異なるレンダリングをします。以下のような変動を予期してください:

• 異なるディスプレイガマットでの色の鮮やかさ
• 低性能デバイスでのアニメーションの滑らかさ
• 8ビットディスプレイでのグラデーションバンディング

プログレッシブエンハンスメントで構築してください。単色のフォールバックから始め、対応ブラウザ用にグラデーションをレイヤー化し、最後にアニメーションを追加します:

.holographic {
  background: #6366f1; /* フォールバック */
  background: linear-gradient(115deg, transparent 20%, oklch(0.7 0.15 200) 45%, oklch(0.75 0.18 320) 55%, transparent 80%);
}

これらの効果を使用するタイミング

ホログラフィックCSS効果が最適な用途:

• アクセント要素(カード、バッジ、CTA)
• インタラクティブ状態(ホバー、フォーカス)
• プレミアムまたは遊び心のあるブランドコンテキスト

不適切な用途:

• 本文テキストの背景
• 素早いスキャンが必要なナビゲーション要素
• アクセシビリティや認知的シンプルさを優先するインターフェース

この効果は注目を集めます。注目が必要な場所で使用してください。

結論

ホログラフィックCSS効果は構成的です—レイヤー化されたグラデーション、ブレンドモード、モーションが連携して機能します。OKLCHは、滑らかで現実的な遷移のための色の基盤を提供します。これらの技術はモダンブラウザで広くサポートされていますが、デバイス間での視覚的な一貫性は保証されていません。

シンプルに始めてください:1つのグラデーションレイヤー、1つのブレンドモード、最小限のモーション。効果がインターフェースを装飾するのではなく、インターフェースに貢献する場合にのみ、複雑さを追加してください。

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..