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

はじめに

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

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

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

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

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

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

ポケモントレーナーに必要なものの1つは、スーパーボールですよね。(間違えない。)
スーパーボールは、モンスターボールより捕獲率が高いボールです。
ボーマンダをスーパーボールに入れている人はおしゃれさん確定です。

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

完成形

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

See the Pen モンスターボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.

作成手順

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

01. スーパーボールの外形を作る

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

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

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

sample.css

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

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

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

02. スーパーボールの内部を作る

次に、↓このようなスーパーボールの内部を作って行きましょう！

モンスターボールの記事と同様にボタン部分作成します。

また、スーパーボールの赤い部分は、
position: absolute;で左右の赤い部分をいい感じのポジションにそれぞれ移動し、
transfomeで45°回転させます。

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

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

03. スーパーボールを立体的に見えるようにする

次に、↓このようにスーパーボールが立体的に見えるようにして行きましょう！

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

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

sample.css

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

このように、box-shadowにinsetを使うことで、以下のようにスーパーボールを立体的に見せることができます。

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

完成. スーパーボールをアニメーションさせる

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

ボールが上下にホバーしているように見えるように、下記のようなCSS Animationを追加します。
ボールをtranslate で上下にを3秒で移動させます。
また、影をscale　で、変化させることで、それっぽくしています。

sample.css

.base {
  animation: hover-anim 3s ease-in-out infinite;
}

@keyframes hover-anim {
  0% {
    translate: 0 5px;
  }
  50% {
    translate: 0 -15px;
  }
  100% {
    translate: 0 5px;
  }
}

.shadow {
    animation: shadow-anim 3s ease-in-out infinite;
}

@keyframes shadow-anim {
  0% {
    scale: 120%;
  }
  50% {
    scale: 100%;
  }
  100% {
    scale: 120%;
  }
}

このように記載することで、スーパーボールがホバーし、完成です。

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

まとめ

この記事では、CSSでスーパーボールを作ってみました。
スーパーボールを使っていろんなポケモンを捕まえて行きましょう！

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

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

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

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