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

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

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

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

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

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

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

ヘビーボールは、体重の 重い ポケモンが 捕まえやすくなる特別なボールです。
金銀世代(HGSS)で登場して以来サンムーン以降で再登場した少しエモいボールです。

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


## 完成形
完成形は**↓こちら**です。
影やアニメーションを用いて、球体を表現しています。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="KKeWOVN" 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/KKeWOVN">
  ヘビーボール 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/d6063ca6-71ed-cf4d-a7c9-8d3504967b4c.png)

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

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

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

また、ヘビーボールの耳の部分は、
60px x 30pxの長方形を `border-radius: 30px 30px 0 0;`で半球の形にして。
`position: absolute;`と`transform: rotateZ(-45deg);` いい感じの場所・角度に配置します。

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

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="oNywveN" 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/oNywveN">
  ヘビーボール 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/8c8a353c-71bd-3f0b-ad1a-e46d7ba67dc2.png)

ヘビーボールの内側の青い部分は、円を`position: absolute;`でいい感じの位置に配置しています。
また、ヘビーボールのボタンが立体的に見えるように、中のボタンに`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="eYKROXo" 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/eYKROXo">
  ヘビーボール 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/2d1a89d7-8651-48e1-9890-44d5ca80e4f0.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="bGKRbPM" 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/bGKRbPM">
  ヘビーボール 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を追加します。

まずは以下のように、`translate` と キーフレームを調整して 、ヘビーボールの重さを伝えていきます。

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

@keyframes ball-anim {
    0%{
        translate: 0;
    }
    80%{
        translate: 0 -150px;
    }
    84%{
        translate: 0;
    }
    86%{
        translate: 0 -10px;
    }
    88%{
        translate: 0;
    }
}
```

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

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

@keyframes shadow-anim {
    0%{
        scale: 100%;
    }
    80%{
        scale: 150%;
    }
    84%{
        scale: 100%;
    }
    86%{
        scale: 105%;
    }
    88%{
        scale: 100%;
    }
}
```

このような感じに記載することで、ヘビーボールに、重さを感じられるようなアニメーションが加わり、完成です。

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="KKeWOVN" 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/KKeWOVN">
  ヘビーボール 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でヘビーボールを作ってみました。
ヘビーボールを使えば、体重の重いポケモンを捕まえるのは簡単になります！
ですが、くさむすびを使われると、威力が高くなるので、ご注意ください！

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

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

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

---

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

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

https://twitter.com/degudegu2510