【完走賞ゲットだぜ！】CSSでパークボールを作る！ #CSS

はじめに

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

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

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

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

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

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

パークボールは、パルパークの中で使うことのできる特別なボールです。
3世代から4世代にポケモンをおくるためには、必要なボールです。
そのため、パークボールはポケモントレーナーに必要なボールの1つと言っても過言ではありません。

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

完成形

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

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

作成手順

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

01. パークボールの外形を作る

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

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

linear-gradientを以下のように記載することで、上から順に
0% ~ 46% ： #fccd00
46% ~ 54% ： #0088f0
54% ~ 100% ： White
と塗り分けることができます。

sample.css

div {
  background:linear-gradient(#fccd00 46%, #0088f0 46%, #0088f0 54%, white 54%);
}

この linear-gradient を使い以下のように記載するとパークボールの色を表現します。

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

02. パークボールの内部を作る

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

パークのボタンが立体的に見えるように、中のボタンに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を追加します。

まずは以下のように、translate と scale で前後に揺れてみえるアニメーションを作成して行きます！

sample.css

div {
  animation: ball-anim ease-in-out 2s alternate infinite;
}

@keyframes ball-anim {
  0% {
    scale: 80%;
    translate: 0 -50px;
  }
  50% {
    translate: 0 10px;
  }
  100% {
    scale: 120%;
    translate: 0 -50px;
  }
}

また、影もパークボールのアニメーションにあわせて、動かして行きます！

sample.css

div {
  animation: shadow-anim ease-in-out 2s alternate infinite;
}

@keyframes shadow-anim {
  0% {
    scale: 80%;
    translate: 0 -20px;
  }
  50% {
    scale: 100%;
  }
  100% {
    scale: 80%;
    translate: 0 20px;
  }
}

このような感じに記載することで、パークボールは、左右に揺れるアニメーションをになり、完成です。

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

まとめ

この記事では、CSSでパークボールを作ってみました。
これで、3世代から4世代に色々なポケモンを送ることができ、全国図鑑完成も目の前です。

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

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

最後まで読んでくださってありがとうございます！
さらに詳しい内容を聞きたい方は、Devトークで直接お話しましょう！

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