【完走賞ゲットだぜ！】CSSでモンスターボールを作る！

## はじめに
みなさん初めまして。🎅🏻

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

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

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

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

１記事目は、 「**【完走賞ゲットだぜ！】CSSでモンスターボールを作る！**」です。

ポケモントレーナーに必要なものの1つは、**モンスターボール**ですよね。(間違えない。)
モンスターボールがあれば、どんなポケモンだって捕まえられますよね！！

そのため、この記事では、CSSで作るモンスターボールを紹介しようと思います。


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

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="MWXjpvx" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/MWXjpvx">
  モンスターボール 3d</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


## 作成手順
では、早速作って行きましょう！

### 01. モンスターボールの外形を作る
まずは、↓このようなモンスターボールの外形を作って行きましょう！
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/88e365e3-7fce-ef67-b729-404d793e9ce6.png)

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

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

```sample.css
div {
  background: linear-gradient(red 46%, black 46%, black 54%, white 54%);
}
```

この `linear-gradient` を使い以下のように記載するとモンスターボールの外形を作ることができます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LYrRybO" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/LYrRybO">
  モンスターボール 3d</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 02. モンスターボールのボタンを作る
次に、↓このようなモンスターボールのボタン部分を作って行きましょう！
![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b4d428c7-ee65-e364-609d-388fd1b9e65f.png)

モンスターボールのボタンが立体的に見えるように、中のボタンに`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`で２種類の影を使い、以下のように記載するとボタン部分を作成することができます。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="KKegmjN" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/KKegmjN">
  モンスターボール 3d - 1</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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


### 03. モンスターボールを立体的に見えるようにする
次に、↓このようにモンスターボールが立体的に見えるようにして行きましょう！
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/eb0ec5e5-9db4-bad8-6930-e8da16a280d8.png)

`box-shadow`を使って、内側に影をつけてあげると、立体感が出ます。
また、モンスターボールが浮いているように見えると立体感が増すので、影に追加して浮いているように見せます。

内側に影を出すためには、 `box-shadow` に `inset` を追加することで、内側になります。

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

このように、`box-shadow`に`inset`を使うことで、以下のようにモンスターボールを立体的に見せることができます。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="oNyzwbJ" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/oNyzwbJ">
  モンスターボール 3d - 2</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


### 完成. モンスターボールをアニメーションさせる
最後にアニメーションさせたら、完成です。


ボタン部分が左から右へ移動するように、下記のようにCSS Animationを追加します。
`translate` で左から右へボタンを6秒で移動させます。
`scale`は、scaleYを変化させて、それっぽくしています。

```sample.css
div {
  animation: rotate-anim 6s linear infinite;
}

@keyframes rotate-anim {
  0% {
    translate: -100px;
    scale: 70% 100%;
  }
  25% {
    scale: 100% 100%;
  }
  50% {
    translate: 100px;
    scale: 70% 100%;
  }
  100% {
    translate: 100px;
    scale: 70% 100%;
  }
}
```

このように記載することで、モンスターボールが回転し、完成です。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="MWXjpvx" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/MWXjpvx">
  モンスターボール 3d</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## まとめ

この記事では、CSSでモンスターボールを作ってみました。
ポケモン世界への第一歩を踏み出せますね！

アドベントカレンダーは、まだまだ初日です。
アドベントカレンダー完走を目指して、あと24日分投稿するので、
是非、カレンダーを購読して、応援していただけると嬉しいです。

どんどん色々なものを作って行きます！

https://qiita.com/advent-calendar/2022/degudegu2510


---

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

https://jobs.qiita.com/employers/qiita-inc/dev_talks/404?utm_source=link_share&utm_medium=social&utm_campaign=dev_talk_share&utm_content=dev_talk_show

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

https://twitter.com/degudegu2510