はじめに
みなさん初めまして。🎅🏻
Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。
今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉
Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。
この記事は、そのカレンダーの5記事目です。
5記事目は、 「【完走賞必ずゲットだぜ！】CSSでマスターボールを作る！」です。
ポケモントレーナーに必要なものの1つは、マスターボールですよね。(間違えない。)
マスターボールがあれば、どんなポケモンだって必ず捕まえられます！
そのため、マスターボールを使うタイミングは、個性が出るものです！
この記事では、CSSで作るマスターボールを紹介しようと思います。
完成形
完成形は↓こちらです。
影やアニメーションを用いて、球体を表現しています。
See the Pen マスターボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
作成手順
では、早速作って行きましょう！
01. マスターボールの外形を作る
まずは、↓このようなマスターボールの外形を作って行きましょう！
まず、この外形を作るために linear-gradient を使って作っていきます。
linear-gradientを以下のように記載することで、上から順に
0% ~ 46% ： #512a8b
46% ~ 54% ： Black
54% ~ 100% ： White
と塗り分けることができます。
div {
background: linear-gradient(#512a8b 46%,black 46%,black 54%, white 54%);
}
この linear-gradient を使い以下のように記載するとマスターボールの色を表現します。
また、position: absolute;を使い左右の出っ張りをいい感じの位置に持って行けば、
以下のような感じにマスターボールの外形を作ることができます！
See the Pen マスターボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
02. マスターボールの内部を作る
次に、↓このようなマスターボールの内側の部分を作って行きましょう！
マスターボールのボタンが立体的に見えるように、中のボタンに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で２種類の影を使い、ボタン部分を作成することができます。
また、Mの部分をいい感じの位置にもってくると 以下のようなマスターボールになります。
フォントは、それっぽさを求めて、century-gothicをつかっております！
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 と rotate で左右に揺れるアニメーションを作成して行きます！
div {
animation: swing-anim 1.5s ease-in-out alternate infinite;
}
@keyframes swing-anim {
30% {
translate: 0px;
rotate: 0deg;
}
40% {
translate: 20px;
rotate: 25deg;
}
60% {
translate: -20px;
rotate: -25deg;
}
70% {
translate: 0px;
rotate: 0deg;
}
100% {
translate: 0px;
rotate: 0deg;
}
}
また、同じフレームで、ボタンが点滅しているように見えるアニメーションを作成します。
div {
animation: blight-anim 1.5s ease-in-out alternate infinite;
}
@keyframes blight-anim {
30% {
background-color: #f5f5f5;
}
40% {
background-color: #FFE666;
}
60% {
background-color: #FFE666;
}
70% {
background-color: #f5f5f5;
}
}
このような感じに記載することで、マスターボールは、捕まえている途中のアニメーションになり、完成です。
See the Pen マスターボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、CSSでマスターボールを作ってみました。
これで、どんなポケモンでも必ず捕まえるようになりました。
スカーレット・バイオレットでは、どんなポケモンにマスターボールを使いましたか？
アドベントカレンダーは、今日で５分の１が終わりました。
アドベントカレンダー完走を目指して、あと20日ありますが、引き続き投稿するので、
是非、カレンダーを購読して、応援していただけると嬉しいです。
これからも、色々なものをどんどん作って行きます！
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！