UIデザイン - 覚え書き.com

JavaScriptなしで、transform / perspective / layered shadows と CSSカスタムプロパティ だけで

“パッ”と目を引く3Dカードを作成してみましょう。

さらに Shadow DOM 内でも同じ見た目を再現できるよう、::part() と変数で拡張可能にします。

ゴール（できあがりイメージ）

マウスホバーでわずかに傾く3D表現
斜めに流れるハイライト（きらめき）
ライト／ダークどちらでも映える配色
prefers-reduced-motion でアニメ控えめ
Shadow DOM対応：::part() と CSS変数で外部からのテーマ変更OK

デモ：CSSとHTMLだけで作る3DカードUI

💡 マウスを乗せるとカードがわずかに傾き、立体的な効果が確認できます。

最小HTML（ライトDOM版）

<link rel="preload" href="https://picsum.photos/600/400?random=13" as="image">

<div class="card-3d">
  <img class="card-3d__media" src="https://picsum.photos/600/400?random=13" alt="Sample cover">
  <div class="card-3d__body">
    <h3 class="card-3d__title">CSS Only 3D Card</h3>
    <p class="card-3d__text">
      transform と layered shadow で立体感を作るミニマル実装。Shadow DOMでも同じテーマが使えます。
    </p>
    <a class="card-3d__cta" href="#">詳しく見る</a>
  </div>
</div>

transform と layered shadow で立体感を作るミニマル実装。Shadow DOMでも同じテーマが使えます。

</p>

<a class="card-3d__cta" href="#">詳しく見る</a>

</div>

コアCSS（ライトDOM版）

:root {
  --card-bg: color-mix(in oklab, canvas, white 6%);
  --card-fg: canvastext;
  --card-accent: oklch(0.70 0.12 250);
  --card-radius: 16px;
  --card-shadow-1: 0 1px 2px color-mix(in oklab, black, transparent 80%);
  --card-shadow-2: 0 8px 24px color-mix(in oklab, black, transparent 88%);
  --card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 92%);
  --card-gloss: linear-gradient(120deg, transparent 30%, color-mix(in oklab, white, transparent 60%) 45%, transparent 60%) no-repeat;
  --card-gloss-size: 200% 200%;
  --card-tilt: rotateX(5deg) rotateY(-6deg);
  --card-tilt-hover: rotateX(6.5deg) rotateY(-10deg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --card-bg: color-mix(in oklab, canvas, black 6%);
    --card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 86%);
  }
}

.card-3d {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  padding: 14px;
  border-radius: var(--card-radius);
  background: var(--card-bg);
  color: var(--card-fg);
  border: var(--card-border);
  box-shadow: var(--card-shadow-1), var(--card-shadow-2);
  transform: perspective(900px) var(--card-tilt);
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  overflow: clip;
  isolation: isolate;
}

.card-3d::before {
  /* 斜めに流れるハイライト */
  content: "";
  position: absolute;
  inset: -10%;
  background: var(--card-gloss);
  background-size: var(--card-gloss-size);
  mix-blend-mode: soft-light;
  pointer-events: none;
  transform: translateZ(30px);
  transition: background-position .8s ease;
}

.card-3d:hover {
  transform: perspective(900px) var(--card-tilt-hover) translateZ(0.001px);
  box-shadow: 0 4px 10px color-mix(in oklab, black, transparent 80%), 0 24px 48px color-mix(in oklab, black, transparent 85%);
}
.card-3d:hover::before { background-position: 120% 40%; }

.card-3d__media {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: calc(var(--card-radius) - 6px);
  transform: translateZ(20px);
  box-shadow: 0 10px 24px color-mix(in oklab, black, transparent 80%);
}

.card-3d__body { display: grid; gap: 8px; transform: translateZ(24px); }

.card-3d__title {
  font-size: clamp(1.05rem, 1.2rem + .25vw, 1.35rem);
  line-height: 1.25;
}

.card-3d__text { opacity: .9; }

.card-3d__cta {
  justify-self: start;
  display: inline-grid;
  place-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--card-accent), white 5%);
  color: white;
  text-decoration: none;
  font-weight: 600;
  transform: translateZ(26px);
  box-shadow: 0 6px 16px color-mix(in oklab, var(--card-accent), black 25% / 22%);
  transition: transform .25s, filter .25s, box-shadow .35s;
}
.card-3d__cta:hover  { filter: brightness(1.05); transform: translateZ(28px); }
.card-3d__cta:active { transform: translateZ(22px) scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .card-3d, .card-3d * { transition: none !important; }
  .card-3d { transform: none; }
  .card-3d::before { display: none; }
}

:root {

--card-bg: color-mix(in oklab, canvas, white 6%);

--card-fg: canvastext;

--card-accent: oklch(0.70 0.12 250);

--card-radius: 16px;

--card-shadow-1: 0 1px 2px color-mix(in oklab, black, transparent 80%);

--card-shadow-2: 0 8px 24px color-mix(in oklab, black, transparent 88%);

--card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 92%);

--card-gloss: linear-gradient(120deg, transparent 30%, color-mix(in oklab, white, transparent 60%) 45%, transparent 60%) no-repeat;

--card-gloss-size: 200% 200%;

--card-tilt: rotateX(5deg) rotateY(-6deg);

--card-tilt-hover: rotateX(6.5deg) rotateY(-10deg);

}

@media (prefers-color-scheme: dark) {

:root {

--card-bg: color-mix(in oklab, canvas, black 6%);

--card-border: 1px solid color-mix(in oklab, var(--card-fg), transparent 86%);

}

.card-3d {

position: relative;

display: grid;

gap: 12px;

width: min(100%, 420px);

padding: 14px;

border-radius: var(--card-radius);

background: var(--card-bg);

color: var(--card-fg);

border: var(--card-border);

box-shadow: var(--card-shadow-1), var(--card-shadow-2);

transform: perspective(900px) var(--card-tilt);

transform-style: preserve-3d;

transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;

overflow: clip;

isolation: isolate;

}

.card-3d::before {

/* 斜めに流れるハイライト */

content: "";

position: absolute;

inset: -10%;

background: var(--card-gloss);

background-size: var(--card-gloss-size);

mix-blend-mode: soft-light;

pointer-events: none;

transform: translateZ(30px);

transition: background-position .8s ease;

}

.card-3d:hover {

transform: perspective(900px) var(--card-tilt-hover) translateZ(0.001px);

box-shadow: 0 4px 10px color-mix(in oklab, black, transparent 80%), 0 24px 48px color-mix(in oklab, black, transparent 85%);

}

.card-3d:hover::before { background-position: 120% 40%; }

.card-3d__media {

width: 100%;

aspect-ratio: 3/2;

object-fit: cover;

border-radius: calc(var(--card-radius) - 6px);

transform: translateZ(20px);

box-shadow: 0 10px 24px color-mix(in oklab, black, transparent 80%);

}

.card-3d__body { display: grid; gap: 8px; transform: translateZ(24px); }

.card-3d__title {

font-size: clamp(1.05rem, 1.2rem + .25vw, 1.35rem);

line-height: 1.25;

}

.card-3d__text { opacity: .9; }

.card-3d__cta {

justify-self: start;

display: inline-grid;

place-items: center;

padding: 10px 14px;

border-radius: 999px;

background: color-mix(in oklab, var(--card-accent), white 5%);

color: white;

text-decoration: none;

font-weight: 600;

transform: translateZ(26px);

box-shadow: 0 6px 16px color-mix(in oklab, var(--card-accent), black 25% / 22%);

transition: transform .25s, filter .25s, box-shadow .35s;

}

.card-3d__cta:hover { filter: brightness(1.05); transform: translateZ(28px); }

.card-3d__cta:active { transform: translateZ(22px) scale(.98); }

@media (prefers-reduced-motion: reduce) {

.card-3d, .card-3d * { transition: none !important; }

.card-3d { transform: none; }

.card-3d::before { display: none; }

}

Shadow DOM に対応させる考え方

ポイントは 「パーツを切り出す」 と 「CSS変数でテーマ化」。
外側（ライトDOM）から Shadow DOM 内を直接スタイルできないため、コンポーネント作者が part を付与し、利用者は ::part() で装飾、色や半径は CSS変数で調整します。

Web Component 側（作者向け：影DOM内のテンプレ）

※ここでは概念を示すための HTMLスケッチ です。実際の ShadowRoot 作成は JS が必要ですが、スタイル設計の指針としてご覧ください。

<!-- shadow root 内部イメージ（概念） -->
<style>
  :host {
    --card-bg: var(--card-bg, color-mix(in oklab, canvas, white 6%));
    --card-fg: var(--card-fg, canvastext);
    --card-accent: var(--card-accent, oklch(0.70 0.12 250));
    --card-radius: var(--card-radius, 16px);
    /* …上記ライトDOM版と同等の宣言… */
  }
  .card { /* = .card-3d と同様 */ }
  .card::before { /* gloss */ }
  .media::part(img) { /* メディア要素が更にshadowならここで委譲 */ }
</style>

<div class="card">
  <img part="media" class="media" alt="">
  <div class="body" part="body">
    <h3 part="title" class="title"></h3>
    <p part="text" class="text"></p>
    <a part="cta" class="cta" href="#"></a>
  </div>
</div>

<style>

:host {

--card-bg: var(--card-bg, color-mix(in oklab, canvas, white 6%));

--card-fg: var(--card-fg, canvastext);

--card-accent: var(--card-accent, oklch(0.70 0.12 250));

--card-radius: var(--card-radius, 16px);

/* …上記ライトDOM版と同等の宣言… */

}

.card { /* = .card-3d と同様 */ }

.card::before { /* gloss */ }

.media::part(img) { /* メディア要素が更にshadowならここで委譲 */ }

</style>

</div>

利用者側（外部）からのテーマ上書き例

/* Shadow host にぶら下がる要素（custom-element）へ変数を供給 */
custom-3d-card {
  --card-accent: oklch(0.78 0.17 30);     /* 暖色寄りに */
  --card-radius: 20px;
}

/* コンポーネントが part を公開していれば装飾できる */
custom-3d-card::part(title) { letter-spacing: .3px; }
custom-3d-card::part(cta)   { text-transform: uppercase; }

/* Shadow host にぶら下がる要素（custom-element）へ変数を供給 */

custom-3d-card {

--card-accent: oklch(0.78 0.17 30); /* 暖色寄りに */

--card-radius: 20px;

}

/* コンポーネントが part を公開していれば装飾できる */

custom-3d-card::part(title) { letter-spacing: .3px; }

custom-3d-card::part(cta) { text-transform: uppercase; }

まとめ：

作者は Shadow DOM 内で CSS変数とpart名を定義

利用者は ホストへ変数指定し、必要なら ::part() でピンポイント調整

デザインバリエーション（クラス追加だけ）

/* さらに“浮かせる” */
.card-3d.is-elevated {
  --card-tilt: rotateX(6deg) rotateY(-8deg);
  --card-tilt-hover: rotateX(9deg) rotateY(-12deg);
}

/* ガラス風 */
.card-3d.is-glass {
  background: color-mix(in oklab, var(--card-bg), transparent 30%);
  backdrop-filter: blur(8px) saturate(1.2);
  border: 1px solid color-mix(in oklab, white, transparent 80%);
}

/* 枠線強調・フラット */
.card-3d.is-outline {
  box-shadow: 0 1px 0 color-mix(in oklab, black, transparent 86%);
  --card-gloss: linear-gradient(120deg, transparent, transparent); /* きらめき無効 */
}

/* さらに“浮かせる” */

.card-3d.is-elevated {

--card-tilt: rotateX(6deg) rotateY(-8deg);

--card-tilt-hover: rotateX(9deg) rotateY(-12deg);

}

/* ガラス風 */

.card-3d.is-glass {

background: color-mix(in oklab, var(--card-bg), transparent 30%);

backdrop-filter: blur(8px) saturate(1.2);

border: 1px solid color-mix(in oklab, white, transparent 80%);

}

/* 枠線強調・フラット */

.card-3d.is-outline {

box-shadow: 0 1px 0 color-mix(in oklab, black, transparent 86%);

--card-gloss: linear-gradient(120deg, transparent, transparent); /* きらめき無効 */

}

アクセシビリティと実用Tips

ボタン／リンクのヒット領域は最低44×44pxを意識（paddingで確保）
prefers-reduced-motion に配慮（すでに対応）
コントラスト：oklchやcolor-mix()で暗所・明所どちらも読みやすく
画像のalt を適切に
フォールバック：古い環境では oklch が未対応 → 代替色を上書き可能に

よく使うCSSカスタムプロパティ（外から上書きOK）

変数名	役割	例
--card-bg	背景色	#fff / #111
--card-fg	文字色	#111 / #eee
--card-accent	CTAなどの強調色	oklch(0.78 0.17 30)
--card-radius	角丸	12px / 20px
--card-shadow-1	影レイヤ(近)	0 1px 2px rgba(0,0,0,.2)
--card-shadow-2	影レイヤ(遠)	0 8px 24px rgba(0,0,0,.12)
--card-border	境界線	1px solid rgba(0,0,0,.06)
--card-tilt	傾き(通常)	rotateX(5deg) rotateY(-6deg)
--card-tilt-hover	傾き(ホバー)	rotateX(6.5deg) rotateY(-10deg)
--card-gloss	ハイライト	linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 45%, transparent 60%)
--card-gloss-size	ハイライトサイズ	200% 200%

トラブルシュート

立体感が弱い → --card-tilt と影（--card-shadow-2）を強める
グロスが強すぎる → --card-gloss の不透明度を上げる（=白を薄く）
画面酔い → prefers-reduced-motion 環境で確認、もしくはカードに .is-outline を付与
Shadow DOM で色が変わらない → 変数は ホスト（custom element）側に定義しているか確認

まとめ

項目	ポイント
3D表現	transformとperspectiveで奥行きを演出
輝き	::beforeのグラデとbackground-positionで流し込み
配色	oklchとcolor-mixでライト/ダーク両対応
アクセシビリティ	prefers-reduced-motionと十分なヒット領域
Shadow DOM	作者はpart公開&変数化/利用者は::part()と変数上書き
拡張	クラス追加でelevated/glass/outlineを切替

覚え書き.com

「UIデザイン」タグアーカイブ

CSSとHTMLだけで作る立体的カードUI（Shadow DOM対応）

ゴール（できあがりイメージ）

デモ：CSSとHTMLだけで作る3DカードUI

最小HTML（ライトDOM版）

コアCSS（ライトDOM版）

Shadow DOM に対応させる考え方

Web Component 側（作者向け：影DOM内のテンプレ）

利用者側（外部）からのテーマ上書き例

デザインバリエーション（クラス追加だけ）

アクセシビリティと実用Tips

よく使うCSSカスタムプロパティ（外から上書きOK）

トラブルシュート

まとめ

「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。

ゴール（できあがりイメージ）

デモ：CSSとHTMLだけで作る3DカードUI

最小HTML（ライトDOM版）

コアCSS（ライトDOM版）

Shadow DOM に対応させる考え方

Web Component 側（作者向け：影DOM内のテンプレ）

利用者側（外部）からのテーマ上書き例

デザインバリエーション（クラス追加だけ）

アクセシビリティと実用Tips

よく使うCSSカスタムプロパティ（外から上書きOK）

トラブルシュート

まとめ

関連記事

「駑馬十駕」を信念に IT系情報を中心に調べた事をコツコツ綴っています。

　関連記事