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

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

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

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

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

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

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

ムーンボールは、月の石で進化するポケモンが捕まえやすいボールです。
月の石で進化するポケモンのは、*ニドリーナ*・*ニドリーノ*・*ピッピ*・*プリン*・*エネコ*・*ムンナ*です。
意外と少ないですね。

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


## 完成形
完成形は**↓こちら**です。
影やアニメーションを用いて、球体を表現しています。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qBKPgoJ" 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/qBKPgoJ">
  ルアーボール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/1d3078c9-6507-e285-2bc8-9d3005d1f919.png)


まず、この外形を作るために `linear-gradient` を使って作って色分けをして、
`position: absolute;` で青い部分を作って行きます。

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

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

`position: absolute;`　でいい感じに青い部分作成していきます。

このようにすることで、以下のような形になります。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="XWYeQWW" 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/XWYeQWW">
  ムーンボール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/656412ec-688a-a460-815d-64f74479abc2.png)

ムーンボールの青い部分のギザギザは、`::after`で、`linear-gradient`を2つ重ねて、ギザギザを表現して、
月の部分は、`radial-gradient` の中心を透明にして、中心の位置をずらすことで三日月の模様を作成しています。

まずは、青い部分のギザギザを以下のように記述すると作成できます。

```sample.css
.top_pattern::after {
  content: "";
  position: absolute;
  background: linear-gradient(45deg, #00B1FF 50%, transparent 50%),linear-gradient(135deg, #00B1FF 50%, transparent 50%);
  background-size: 22px 22px;
  height: 100%;
  width: 22px;
  right: -10px;
}
```
　

ざっくりと何をしているかを解説します。
まずは、`background-size`を正方形にすることで、背景が正方形のパターンが繰り返されるようになります。
次に、45°傾いた、青→透明のグラデーションを2つ重ねています。
最後にwidth・positionを調整して、完成です。
![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d547b7a5-7bf1-0dd4-80fb-470f5e335b64.png)


次に、月の部分を作っていきます。
以下のように`radial-gradient` を使って、の中心を透明にして、中心の位置をずらして三日月の模様を作成しています。

```sample.css
div {
  background: radial-gradient(farthest-corner at 100px 22px, transparent 50%, #fff719 50%);
}
```

そうすると以下のようなものが作成します。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="abKLxbv" 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/abKLxbv">
  ムーンボール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>
※ ついでに、ボタンを押せるようにしてみました。


### 03. ムーンボールを立体的に見えるようにする
次に、↓このようにムーンボールが立体的に見えるようにして行きましょう！
![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ea289095-be36-c568-4eed-678908a2fbb0.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="qBKPwBN" 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/qBKPwBN">
  ムーンボール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 Animationを追加します。

まずは以下のように、`clip-path`で満ち欠けに見えるように `polygon` を調整して見える位置を整することで、表現します。

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

@keyframes ball-anim {
  0% {
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%);
  }
  25% {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%, 100% 0%, 100% 0%);
  }
  50% {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 100%, 100% 0%);
  }
  75% {
    clip-path: polygon(100% 0%, 0% 100%, 0% 100%, 100% 100%, 100% 100%, 100% 0%);
  }
  100% {
    clip-path: polygon(100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
  }
}
```


このような感じに記載することで、ムーンボールが、月の満ち欠けをしているようなアニメーションが加わり、完成です。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="qBKPgoJ" 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/qBKPgoJ">
  ルアーボール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でムーンボールを作ってみました。
ムーンボールをつかって、月の石で進化するポケモンを捕まえて行きましょう！

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

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

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

---

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

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

https://twitter.com/degudegu2510