はじめに
みなさん初めまして。🎅🏻
Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。
今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉
Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。
この記事は、そのカレンダーの16記事目です。
16記事目は、 「【完走賞ゲットだぜ！】CSSでダイブボールを作る！」です。
ダイブボールは、釣りや波乗りなので出現したポケモンが捕まえやすくなるボールです。
そのため、タイプ等は関係なく、釣りで出現したミニリュウや波乗り中のズバットなどにも使えるボールです。
この記事では、CSSで作るダイブボールを紹介しようと思います。
完成形
完成形は↓こちらです。
影やアニメーションを用いて、球体を表現しています。
See the Pen ダイブボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
作成手順
では、早速作って行きましょう！
01. ダイブボールの外形を作る
まずは、↓このようなダイブボールの外形を作って行きましょう！
まず、この外形を作るために linear-gradient を使って作っていきます。
linear-gradientを以下のように記載することで、3色を上から順に
0% ~ 46% ： #E9EEF8
46% ~ 54% ： black
54% ~ 100% ： #0075C1
と塗り分けることができます。
div {
background: linear-gradient(#E9EEF8 46%, black 46% 54%, #0075C1 54%);
}
このようにすることで、以下のような形になります。
See the Pen ダイブボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
02. ダイブボールの内部を作る
次に、↓このようなダイブボールの内側の部分を作って行きましょう！
ダイブボールの内部の模様は、clip-path で↓このようなパスで切り取り、position: absolute;で良き位置に配置させます。
div {
clip-path: path("m150 26v-3c-8.912 0-16.412-5.1184-22.5-9.2732-4.159-2.8382-7.659-5.2268-10.5-5.2268-3.25 0-5.784 1.6414-8.482 3.3884-3.069 1.9875-6.349 4.1116-11.1334 4.1116-6.2013 0-10.0019-4.6995-13.4836-9.00468-2.9426-3.63851-5.6574-6.99532-9.401-6.99532s-6.2869 3.35681-9.0436 6.99532c-3.2618 4.30518-6.8224 9.00468-13.0237 9.00468-4.7845 0-8.296-2.1241-11.5813-4.1116-2.8881-1.747-5.6014-3.3884-8.8514-3.3884-2.8411 0-6.1764 2.3886-10.1395 5.2268-5.8015 4.1548-12.94853 9.2732-21.8605 9.2732v3 18 3 6 15 6c8.91197 0 12.1761-.8825 14.8257-1.5988 1.81-.4894 3.3332-.9012 6.1743-.9012 3.25 0 4.9932.5471 6.8487 1.1295 2.1108.6624 4.3668 1.3705 9.1513 1.3705 4.5844 0 9.4003-2.7289 14.3736-6 1.0145-.6673 2.0357-1.3572 3.0627-2.0511l.0004-.0003c6.5038-4.3941 13.2449-8.9486 20.0633-8.9486s13.5595 4.5545 20.0633 8.9486l.0004.0003c1.027.6939 2.0482 1.3838 3.0627 2.0511 4.9736 3.2711 9.7896 6 14.3736 6 4.785 0 7.324-.7081 9.7-1.3705 2.088-.5824 4.05-1.1295 7.3-1.1295 2.841 0 4.364.4118 6.174.9012 2.65.7163 5.914 1.5988 14.826 1.5988v-6-15-6-3z");
}
また、ダイブボールのボタンの部分が、立体的に見えるように、中のボタンにbox-shadowを使い２種類の影を使っています。
２種類の影の影を使うためのbox-shadowは以下のように、1種類の影ごとに,区切ると複数の影を使うことができます。
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 を追加することで、内側になります。
.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を追加します。
.base {
animation: ball-anim 3s ease-in-out infinite alternate;
}
@keyframes ball-anim {
0% {
rotate: -10deg;
translate: 0 6px;
}
33% {
rotate: 3deg;
translate: 0 -3px;
}
66% {
rotate: -3deg;
translate: 0 3px;
}
100% {
rotate: 10deg;
translate: 0 -6px;
}
}
body {
background: linear-gradient(#72f6f5, #152b9b);
background-size:150% 150%;
animation: bg-anim 6s linear infinite alternate;
}
@keyframes bg-anim {
0% {background-position: 0 0;}
100% {background-position: 0 100%;}
}
このような感じに記載することで、
ダイブボールが背景の動きに合わせて、水の中を漂って見えるようなアニメーションが加わり、完成です。
See the Pen ダイブボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、CSSでダイブボールを作ってみました。
このボールを使って、釣りや波乗りなので出現したポケモンをたくさん捕まえてポケモンマスターを目指して行きましょう！
アドベントカレンダーは、今日で16日目が終わり、あと9日です。
段々と複雑なボールを作って投稿するので、是非、カレンダーを購読して、応援していただけると嬉しいです。
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！