【完走賞ゲットだぜ！】CSSでレベルボールを作る！

はじめに

みなさん初めまして。🎅🏻

Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。

今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉

Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。

この記事は、そのカレンダーの9記事目です。

9記事目は、 「【完走賞ゲットだぜ！】CSSでレベルボールを作る！」です。

レベルボールは、戦闘に出ているポケモンのレベルより相手のレベルが低いほど捕まえやすいボールです。
弱い相手ほど強くなるという、どんな漫画・アニメにも登場する悪党のようなボールです。

この記事では、CSSで作るレベルボールを紹介しようと思います。

完成形

完成形は↓こちらです。
影やアニメーションを用いて、球体を表現しています。

See the Pen レベルボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.

作成手順

では、早速作って行きましょう！

01. レベルボールの外形を作る

まずは、↓このようなレベルボールの外形を作って行きましょう！

まず、この外形を作るために linear-gradient を使って作っていきます。

linear-gradientを以下のように記載することで、4色を上から順に
0% ~ 20% ： #676b71
20% ~ 46% ： #ffd31d
46% ~ 54% ： black
54% ~ 100% ： White
と塗り分けることができます。

sample.css

div {
  background: linear-gradient(#676b71 20%, #ffd31d 20% 46%, black 46% 54%, white 54%);
}

このようにすることで、以下のような形になります。

See the Pen レベルボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.

02. レベルボールの内部を作る

次に、↓このようなレベルボールの内側の部分を作って行きましょう！

レベルボールの内部のVは、長方形をclip-pathのpolygon(多角形)でVの形に切り抜いて、それっぽい模様にしていきます。
polygon(多角形)では、頂点を１つずつ指定してあげることで、多角形を作成することができます。

Vの形は、以下のように作成しています。
clip-path: polygon(0% 25%, 25% 0%, 50% 35%, 75% 0%, 100% 25%, 50% 100%);

また、レベルボールのボタンの部分が、立体的に見えるように、中のボタンにbox-shadowを使い２種類の影を使っています。
box-shadowは以下のように、1種類の影ごとに,区切ると複数の影を使うことができます。

sample.css

div {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -3px -3px 4px rgba(255,255,255,0.2);
}

このように、box-shadowで２種類の影を使い、ボタン部分を作成することができます。

See the Pen レベルボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.

※ ついでに、ボタンを押せるようにしてみました。

03. レベルボールを立体的に見えるようにする

次に、↓このようにレベルボールが立体的に見えるようにして行きましょう！

box-shadowを使って、内側に影をつけてあげると、立体感が出ます。
内側に影を出すためには、 box-shadow に inset を追加することで、内側になります。

sample.css

div {
  box-shadow: -20px -10px 40px rgba(0, 0, 0, .5) inset;
}

このように、box-shadowにinsetを使うことで、以下のようにレベルボールを立体的に見せることができます。

See the Pen レベルボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.

完成. レベルボールをアニメーションさせる

最後にアニメーションさせたら、完成です。

レベルボールには、レベルアップしたかのように見せるため、波紋が出ているようなCSS Animationを追加します。

まずは以下のように、outline-offseで、波紋の位置を外側へ広がるようにして、
outline-colorのだんだんと透明にしていき、
それに合わせて、scaleを調整してあげることで、レベルアップしたかのように伝えていきます。

sample.css

div {
  outline: 6px double;
  animation: ball-anim linear 1s infinite;
}

@keyframes ball-anim {
  0%{
    scale: 0%;
    outline-color: rgba(255, 210, 30, 0.5);
    outline-offset: 0;
  }
  20%{
    scale: 125%;
    outline-color: rgba(255, 210, 30, 0.2);
    outline-offset: 20px;
  }
  30%{
    scale: 100%;
    outline-offset: 40px;
  }
  100%{
    scale: 100%;
    outline-color: rgba(255, 210, 30, 0);
    outline-offset: 60px;
  }
}

また、ボールの後ろから光をあててあげるとそれっぽくなるので、追加してあげます！

このような感じに記載することで、レベルボールが、レベルアップようなアニメーションが加わり、完成です。

See the Pen レベルボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.

まとめ

この記事では、CSSでレベルボールを作ってみました。
レベルボールをつかって、自分のポケモンより弱いポケモンを捕まえて、いい気になりましょう！

アドベントカレンダーは、今日で9日目が終わりました。
アドベントカレンダー完走を目指して、あと16日ありますが、引き続き投稿するので、
是非、カレンダーを購読して、応援していただけると嬉しいです。

これからも、色々なものをどんどん作って行きます！

---

最後まで読んでくださってありがとうございます！

X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！