はじめに
みなさん初めまして。🎅🏻
Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。
今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉
Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。
この記事は、そのカレンダーの7記事目です。
7記事目は、 「【完走賞ゲットだぜ！】CSSでヘビーボールを作る！」です。
ヘビーボールは、体重の 重い ポケモンが 捕まえやすくなる特別なボールです。
金銀世代(HGSS)で登場して以来サンムーン以降で再登場した少しエモいボールです。
この記事では、CSSで作るヘビーボールを紹介しようと思います。
完成形
完成形は↓こちらです。
影やアニメーションを用いて、球体を表現しています。
See the Pen ヘビーボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
作成手順
では、早速作って行きましょう！
01. ヘビーボールの外形を作る
まずは、↓このようなヘビーボールの外形を作って行きましょう！
まず、この外形を作るために linear-gradient を使って作っていきます。
linear-gradientを以下のように記載することで、上から順に
0% ~ 46% ： #778184
46% ~ 54% ： black
54% ~ 100% ： White
と塗り分けることができます。
div {
background: linear-gradient(#778184 46%, black 46%, black 54%, white 54%);
}
また、ヘビーボールの耳の部分は、
60px x 30pxの長方形を border-radius: 30px 30px 0 0;で半球の形にして。
position: absolute;とtransform: rotateZ(-45deg); いい感じの場所・角度に配置します。
このようにすることで、以下のような形になります。
See the Pen ヘビーボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
02. ヘビーボールの内部を作る
次に、↓このようなヘビーボールの内側の部分を作って行きましょう！
ヘビーボールの内側の青い部分は、円をposition: absolute;でいい感じの位置に配置しています。
また、ヘビーボールのボタンが立体的に見えるように、中のボタンに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 を追加することで、内側になります。
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 と キーフレームを調整して 、ヘビーボールの重さを伝えていきます。
div {
animation: ball-anim ease-in-out 2s alternate infinite;
}
@keyframes ball-anim {
0%{
translate: 0;
}
80%{
translate: 0 -150px;
}
84%{
translate: 0;
}
86%{
translate: 0 -10px;
}
88%{
translate: 0;
}
}
また、影もヘビーボールのアニメーションにあわせて、動かして行きます！
div {
animation: shadow-anim ease-in-out 2s alternate infinite;
}
@keyframes shadow-anim {
0%{
scale: 100%;
}
80%{
scale: 150%;
}
84%{
scale: 100%;
}
86%{
scale: 105%;
}
88%{
scale: 100%;
}
}
このような感じに記載することで、ヘビーボールに、重さを感じられるようなアニメーションが加わり、完成です。
See the Pen ヘビーボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、CSSでヘビーボールを作ってみました。
ヘビーボールを使えば、体重の重いポケモンを捕まえるのは簡単になります！
ですが、くさむすびを使われると、威力が高くなるので、ご注意ください！
アドベントカレンダーは、今日で7日目が終わりました。
アドベントカレンダー完走を目指して、あと18日ありますが、引き続き投稿するので、
是非、カレンダーを購読して、応援していただけると嬉しいです。
これからも、色々なものをどんどん作って行きます！
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！