【完走賞ゲットだぜ！】CSSでゴージャスボールを作る！

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

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

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

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

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

20記事目は、 「**【完走賞ゲットだぜ！】CSSでゴージャスを作る！**」です。

ゴージャスボールは、捕まえた野生ポケモンがとても仲良くなりやすくなるボールです。
そのため、自分のお気に入りのポケモンなどには積極的に使いたいボールです。

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


## 完成形
完成形は**↓こちら**です。
影やアニメーションを用いて、球体を表現しています。
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLEjmXo" 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/yLEjmXo">
  ゴージャスボール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/73814816-1853-68c5-f364-355b17126118.png)


まず、この外形を作るために複数のグラデーションを重ねて作っていきます。

構造としては以下の画像のような形で、`radial-gradient`を使い、黒色とグレーの部分を作成し、
その上から、`linear-gradient`を使って色を重ねています。

![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9ef0977a-653a-7b1a-59b4-e958e29aae72.png)


これをCSSで表現すると以下のようになり、
上から、`黒の部分` → `ボーダーの部分`を表現しています。
```sample.css
div {
  background:
    linear-gradient(transparent 10%, #FABE00 10% 13%, #B01E35 13% 17%, #FABE00 17% 20%, transparent 20% 42%, #D3D9DC 42% 46%, #FABE00 46% 54%, #D3D9DC 54% 58%, transparent 58%),
    radial-gradient(circle at 50% 50%, #D3D9DC 30%, #30353A 30%);
}
```

このようにすることで、以下のような形になります。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="oNyrxWN" 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/oNyrxWN">
  ゴージャスボール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/2b860d22-d5b2-e315-bcbe-2bbf4569dda3.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="JjZQXWQ" 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/JjZQXWQ">
  ゴージャスボール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/22e68968-3f9c-2df4-4f6b-72e7e9f3b5b1.png)

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

```sample.css
.base::after {
  content: "";
  box-shadow: -20px -10px 40px rgba(0, 0, 0, .5) inset;
  border-radius: 50%;
  height: 100%;
  position: absolute;
  width: 100%;
}
```

このように`::after`に`box-shadow`で影を作ることで、模様も含めて、影を追加することができます。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="vYrqGZL" 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/vYrqGZL">
  ゴージャスボール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>


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

ゴージャスボールには、後方から光がさしているように見えるアニメーションを追加します。

まずは以下のように、`.shadow`で光の色を表現して、`translate` と `rotate` で光が揺らぐアニメーションを作成して行きます！

```sample.css
.shadow {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  filter: blur(5px);
  position: absolute;
  box-shadow:
    0 0 50px #ffffff,
    -10px 0 80px #ffff00,
    10px 0 80px #ff0000; 
  animation: shadow-anim ease-in-out 2s infinite;
}

@keyframes shadow-anim {
  0% {
    rotate: 0deg;
    translate: 2px -2px;
  }
  50% {
    translate: -2px 2px;
  }
  100% {
    rotate: 360deg;
    translate: 2px -2px;
  }
}
```

このような感じに記載することで、ゴージャスボールが後方から光がさしているように見えるアニメーションが加わり、完成です。
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="yLEjmXo" 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/yLEjmXo">
  ゴージャスボール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でゴージャスボールを作ってみました。

このボールを使って、自分のお気に入りポケモンを捕まえて、仲良し度を上げてポケモンマスターを目指して行きましょう！

アドベントカレンダーは、今日で20日目が終わり、あと5日です。

ラストスパートになりますが、もっと複雑なボールを作って投稿するので、是非、カレンダーを購読して、応援していただけると嬉しいです。

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