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

はじめに

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

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

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

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

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

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

ネットボールは、水タイプと虫タイプのポケモンが捕まえやすくなるボールです。
そのため、コイキングを釣り上げた時や、タイプのポケモンに出会った時に使えるボールです。

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

完成形

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

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

作成手順

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

01. ネットボールの外形を作る

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

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

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

上半分は、別に色をつけていくため、rgba(0,0,0,0)のショートカットであるtransparentを指定しています。

sample.css

div {
  background: linear-gradient(transparent 46%, black 46% 54%, white 54%);
}

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

See the Pen ネットボール3d - 1 by でぐぅー | Qiita (@sp_degu) on CodePen.

02. ネットボールの内部を作る

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

ネットボールの内部の模様は、pattern-wrapperに背景の色を指定して、2つのdivを以下のようなHTML・CSSを記述して作成しています。

sample.html

<div class="base">
  <div class="pattern-wrapper"> 
    <div class="pattern top"></div>
    <div class="pattern bottom"></div>
  </div>
</div>

sample.css

.pattern-wrapper {
  border-radius: 50% 50% 0 0 / 100% 100% 0 0 ;
  background-color: #00ADA9;
  display: grid;
  place-items: center;
  height: 50%;
  position: absolute;
  width: 100%;
  top: 0;
  overflow: hidden;
  z-index: -1;
}

.pattern {
  border: 20px solid #595656;
  height: 100px;
  position: absolute;
}

.top {
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  bottom: -8px;
  width: 120px;
}

.bottom {
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  top: -10px;
  width: 100px;
}

また、ネットボールのボタンの部分が、立体的に見えるように、中のボタンに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

.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で影を作ることで、模様も含めて、影を追加することができます。

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

完成. ネットボールをアニメーションさせる

最後にアニメーションさせたら、完成です。

ネットボールには、背景を動かしそれに合わせて、ボールが漂って見えるように、下記のようなCSS Animationを追加します。

sample.css

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

@keyframes ball-anim {
  0% {
    rotate: -15deg;
    translate: 0 6px;
  }
  33% {
    rotate: 5deg;
    translate: 0 -3px;
  }
  66% {
    rotate: -5deg;
    translate: 0 3px;
  }
  100% {
    rotate: 15deg;
    translate: 0 -6px;
  }
}

body {
  animation: bg-anim 6s linear infinite;
}

@keyframes bg-anim {
  0% {background-position: 0 0;}
  100% {background-position: 100% 100%;}
}

このような感じに記載することで、
ネットボールが背景の動きに合わせて、ボールが漂って見えるようなアニメーションが加わり、完成です。

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

まとめ

この記事では、CSSでネットボールを作ってみました。
このボールを使って、水タイプのポケモンや虫タイプのポケモンをたくさん捕まえてポケモンマスターを目指して行きましょう！

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

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

---

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

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