CSS Custom Function

DEMO

<div class="demo-stage cfn-stage">
  <div class="cfn-row">
    <button type="button" class="cfn-card" style="--rest: 1" aria-pressed="false"><span class="cfn-lv">rest 1</span>Card</button>
    <button type="button" class="cfn-card" style="--rest: 2" aria-pressed="false"><span class="cfn-lv">rest 2</span>Card</button>
    <button type="button" class="cfn-card" style="--rest: 3" aria-pressed="false"><span class="cfn-lv">rest 3</span>Card</button>
  </div>
  <p class="cfn-hint">カードを押すと段数 6 まで持ち上がります（もう一度押すと戻る）</p>
  <p class="cfn-badge"></p>
</div>

/* 段数（number）を渡すと、2層の影を返す関数 */
@function --elevation(--level <number>) {
  result:
    0 calc(var(--level) * 1px) calc(var(--level) * 3px) rgb(0 0 0 / .35),
    0 calc(var(--level) * 4px) calc(var(--level) * 10px) rgb(0 0 0 / .25);
}
@property --lift { syntax: '<number>'; inherits: false; initial-value: 1; }
.cfn-stage { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; padding:2.2rem 1.25rem; background:#EDEAF2; min-height:320px; }
.cfn-row { display:flex; gap:1.2rem; flex-wrap:wrap; justify-content:center; }
.cfn-card { --lift: var(--rest);
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; width:110px; height:130px; box-sizing:border-box; padding:.8rem;
  border:0; border-radius:14px; background:#fff; color:#1A1A1A; font:inherit; font-weight:600; font-size:1rem; text-align:left; cursor:pointer;
  translate: 0 calc(var(--lift) * -2px);
  /* @function 未対応のブラウザ向け：関数の中身と同じ計算を直接書く */
  box-shadow:
    0 calc(var(--lift) * 1px) calc(var(--lift) * 3px) rgb(0 0 0 / .35),
    0 calc(var(--lift) * 4px) calc(var(--lift) * 10px) rgb(0 0 0 / .25);
  transition: --lift .45s cubic-bezier(.22,1,.36,1); }
.cfn-card[aria-pressed="true"] { --lift: 6; }
.cfn-card:focus-visible { outline:2px solid #7B37A8; outline-offset:4px; }
.cfn-lv { color:#6B21A8; font-size:.7rem; font-family:ui-monospace,monospace; font-weight:400; }
.cfn-hint { margin:0; color:#4B4B55; font-size:.78rem; text-align:center; }
.cfn-badge { margin:0; color:#6B21A8; font-size:.74rem; font-family:ui-monospace,monospace; text-align:center; }
.cfn-badge::after { content:"@function 未対応：calc() を直接書いた影で表示中"; }
@supports (box-shadow: --elevation(1)) {
  .cfn-card { box-shadow: --elevation(var(--lift)); }
  .cfn-badge::after { content:"box-shadow: --elevation(var(--lift)) で計算中"; }
}
@media (prefers-reduced-motion: reduce) {
  .cfn-card { transition:none; }
}

(function(){
  document.querySelectorAll('.cfn-card').forEach(function(c){
    c.addEventListener('click', function(){
      c.setAttribute('aria-pressed', String(c.getAttribute('aria-pressed') !== 'true'));
    });
  });
})();

AI PROMPT

CSS の @function で「段数を渡すと影を返す関数」を作り、カードを押すと段数に合わせて影が深くなるデモを作って。@function --elevation(--level <number>) の result に、0 calc(var(--level) * 1px) calc(var(--level) * 3px) rgb(0 0 0 / .35) と 0 calc(var(--level) * 4px) calc(var(--level) * 10px) rgb(0 0 0 / .25) の2層の影を書く。@property --lift を syntax:'<number>'・inherits:false・initial-value:1 で登録し、カード（button・aria-pressed 付き）は --lift: var(--rest)（style 属性で --rest に 1〜3 を渡す）から始め、押すと aria-pressed="true" で --lift: 6 にする。box-shadow には、@function 未対応ブラウザ向けに関数の中身と同じ calc() を直接書いた影を先に置き、@supports (box-shadow: --elevation(1)) の中で box-shadow: --elevation(var(--lift)) に置き換える。translate: 0 calc(var(--lift) * -2px) で少し浮かせ、transition: --lift .45s を付けると登録済みの数値が途中の値を通るので影も滑らかに変わる。どちらで表示しているかを ::after の文言で示す。prefers-reduced-motion: reduce の時は transition を無効化する。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。