はじめに
みなさん初めまして。🎅🏻
Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。
今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉
Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。
この記事は、そのカレンダーの21記事目です。
21記事目は、 「【完走賞ゲットだぜ！】CSSでヒールボールを作る！」です。
ヒールボールは、捕まえたポケモンのHPと状態異常を回復するやさしいボールです。
そのため、HPギリギリで捕まえるポケモンや状態異常をかけて捕まえるポケモンに使いたいボールです。
この記事では、CSSで作るヒールボールを紹介しようと思います。
完成形
完成形は↓こちらです。
影やアニメーションを用いて、球体を表現しています。
See the Pen ヒールボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
作成手順
では、早速作って行きましょう！
01. ヒールボールの外形を作る
まずは、↓このようなヒールボールの外形を作って行きましょう！
まず、この外形を作るために linear-gradient を使って作っていきます。
linear-gradientを以下のように記載することで、3色を上から順に
0% ~ 46% ： #EBB1CF
46% ~ 54% ： #65AADD
54% ~ 100% ： #EBB1CF
と塗り分けることができます。
div {
background: linear-gradient(#EBB1CF 46%, #65AADD 46% 54%, #EBB1CF 54%);
}
このようにすることで、以下のような形になります。
See the Pen ヒールボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
02. ヒールボールの内部を作る
次に、↓このようなヒールボールの内側の部分を作って行きましょう！
ヒールボールの内部の模様は、clip-path で↓このようなパスで切り取り、position: absolute;で良き位置に配置させます。
div {
clip-path: path("M51.7993 94.8637C48.5911 92.3868 45.79 90.2241 43.9993 88.3579C35.5 79.5001 32.1661 69.0353 30.9993 56.3579C30 45.5001 33 32.7245 39.5 25.3579C46 17.9912 52.2365 15.2156 57.5 13.3579C60.3787 12.3419 64 10.0003 64 6.00014C64 2 60 0.5 55 0.5C41.5 0.5 29 9 21.5 19C14.5 28.3333 11.5 39 12 49C12.1444 51.8877 12.7112 54.3427 13.3041 56.9107C13.7416 58.8058 14.1933 60.7624 14.5 63C17.5 80.5 15 89.5 8.5 91.3579H0V131.358H74.9993C75.0056 131.325 75.0118 131.292 75.0179 131.259H150V91L141 91.2893C134.5 89.4328 132 80.4396 135 62.9528C135.307 60.717 135.758 58.7618 136.196 56.8682C136.789 54.302 137.356 51.8489 137.5 48.9634C138 38.9709 135 28.3123 128 18.986C120.5 8.99358 107.999 0.5 94.4992 0.5C89.4991 0.5 85.499 1.99887 85.499 5.99599C85.499 9.99312 89.1205 12.3329 91.9992 13.3482C97.2628 15.2045 103.499 17.978 109.999 25.3391C116.5 32.7002 119.5 45.4662 118.5 56.3157C117.333 68.9836 114 79.4405 105.5 88.2916C103.709 90.1564 100.908 92.3174 97.7 94.7925C89.0914 101.434 77.5518 110.337 74.7381 121.844C71.8858 110.372 60.3849 101.493 51.7993 94.8637Z");
}
また、ヒールボールのボタンの部分が、立体的に見えるように、中のボタンに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.
完成. ヒールボールをアニメーションさせる
最後にアニメーションさせたら、完成です。
ヒールボールには、HPバーが現象したり回復したりするようなCSS Animationを追加します。
animation-name と animation-timing-function を複数指定することで、
同じ要素に異なったアニメーションを違ったイージングで表現することができます。
.progress-inner {
animation: 8s infinite;
animation-name: progress-anim, progress-color-anim;
animation-timing-function: linear, steps(1, jump-start);
}
@keyframes progress-anim {
0%{width: 100%;}
80%{width: 0%;}
100%{width: 100%;}
}
@keyframes progress-color-anim {
0%{background-color: #78D85D;}
40%{background-color: #78D85D;}
60%{background-color: #DF9940;}
80%{background-color: #BD405B;}
85%{background-color: #BD405B;}
90%{background-color: #DF9940;}
100%{background-color: #78D85D;}
}
このような感じに記載することで、
ヒールボールの上で、HPバーが現象したり回復したりするようなアニメーションが加わり、完成です。
See the Pen ヒールボール3d by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、CSSでヒールボールを作ってみました。
このボールを使って、HPギリギリで捕まえたポケモンや状態異常をかけて捕まえたポケモンを回復させて、ポケモンマスターを目指して行きましょう！
アドベントカレンダーは、今日で21日目が終わり、あと4日です。
段々と複雑なボールを作って投稿するので、是非、カレンダーを購読して、応援していただけると嬉しいです。
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！