CSSだけでコインを作ってみた

仕事でコインモチーフを使ったデザインを作ることがよくあります。
普段はイラレやらフォトショやらで作っているのですが、
CSSだけで作れたらもしかして楽かも？さらにくるくる回せたらかわいいかも？🤔
ということでいくつかのパターンで作ってみました。

仕事で使えるかどうかは分かりません。

この記事では、ベンダープレフィックスを省略しています。

上向きコイン

See the Pen 上向きコイン by n-mzb (@fbllajgh-the-encoder) on CodePen.

まずはベーシックなコインです。
厳密には奥行きが表現されていなくて不自然ですが、ちょっとした装飾に使う分には悪くないかと思います。

側面は、疑似要素 ::before を使って背面に円を配置して表現しています。
ギザギザ風の柄は repeating-linear-gradient で設定しました。

css

background: repeating-linear-gradient(90deg, #e5c10b, #e5c10b 5px, #ffd400 5px, #ffd400 10px);

右向きコイン

See the Pen 右向きコイン by n-mzb (@fbllajgh-the-encoder) on CodePen.

側面（用の円）の位置と柄の角度を変えれば、コインの向きを調整することができます。

css

top: -5px;
left: -15px;
background: repeating-linear-gradient(-45deg, #e5c10b, #e5c10b 5px, #ffd400 5px, #ffd400 10px);

輝くコイン

See the Pen 輝くコイン by n-mzb (@fbllajgh-the-encoder) on CodePen.

コインがキラッと輝くアニメーションを追加しました。
linear-gradient で設定したグラデーションの位置をアニメーションで動かしています。

css

background: linear-gradient(45deg, #e5c10b 10%, #fee9a0 15%, #e5c10b 20%) top/1000px;
animation: coin_shining 15s linear infinite;

グラデーションコイン

See the Pen グラデーションコイン by n-mzb (@fbllajgh-the-encoder) on CodePen.

少しリッチな見た目にしてみました。
border で作っていた縁は transparent で透過にして内側と同じグラデーションを適用させています。
background で指定している border-box は background-origin の値です。

background-origin は背景画像を適用する基準位置を指定するプロパティです。
border-box にすることで、ボーダーの範囲にもグラデーションを適用しています。

css

border: 10px solid transparent;
background: linear-gradient(45deg, #b28704 20%, #ffec8c, #d9b60b 80%) border-box border-box;

回転するコイン

See the Pen 回転するコイン by n-mzb (@fbllajgh-the-encoder) on CodePen.

一番やりたかったくるくる回るコインです。
Y軸回転させるだけならそれっぽく見えなくも…ない…？

パーツ

• 表面
• 表面の窪み（色が暗い部分）
• 側面
• 裏面
• 裏面の窪み（色が暗い部分）

html

<div class="coin">
  <div class="parts front"></div>
  <div class="parts front inner">P</div>
  <div class="parts side"></div>
  <div class="parts back"></div>
  <div class="parts back inner"></div>
</div>

配置

まず、コインを3D的に表現するにあたって transform-style: preserve-3d; を親要素に設定します。
今回はパーツの div 達を .coin で囲んでいます。

css

.coin {
  transform-style: preserve-3d;
}

そして表面、裏面のパーツを translateZ でZ軸方向に移動させています。
表面は手前に、裏面は奥に移動させました。

css

.front {
  transform: translateZ(5px);
}

.back {
  transform: translateZ(-5px);
}

これまで作ってきたコインのままでは、回転したときに内側の暗い色が見えてしまいます。
側面がないため、隠すことができません 😭

そのため、暗い色の部分は .inner という別の div に分けています。
表面、裏面より 1px 外側に配置しました。

css

.front.inner {
  transform: translateZ(6px);
}

.back.inner {
  transform: translateZ(-6px);
}

最後に側面ですが、コインの側面をまあるく沿わせるといったことはCSSではできません。
ただの長方形を90度回転させた状態で中央に配置することで、
横から見たときに表面と裏面の隙間が埋まるように見せています。

css

.side {
  left: 50px;
  transform: rotateY(90deg);
}

このコインを上から見ると、下の図のようなイメージになります。スカスカです。

真横から見る分には、なんとなく隙がない感じになります。

※ 図はあくまでイメージです。実際の図形に厚みはありません。
※ CSSの限界と自分の技術不足により側面の柄は諦めました 😢

まとめ

簡易的なデザインですが、CSSだけでコインを作ることができました。
仕事で使うかどうかはさておき、CSSの勉強にもなったのでよかったです。

いろいろカスタマイズもできそうなので、どなたかの参考になれば幸いです。