はじめに
みなさん初めまして。🎅🏻
Qiita株式会社でUI/UXデザイナーとして、情報設計、体験設計(UX)、UIデザイン、フロントエンドまで携わっている @degudegu2510 です。
今年のQiita Advent Calenar 2022では、1つのアドベントカレンダーに1人で25記事を投稿しきった方 全員 に完走賞がおくられる企画を開催しています。🎉 🎉
Qiita運営として、ユーザー様だけに25記事完走してもらうのは、とても忍びないので、私も25記事完走しようと思います。
この記事は、そのカレンダーの2記事目です。
2記事目は、 「【完走賞ゲットだぜ！】CSSでプレミアボールを作る！」です。
プレミアボールは、モンスターボールを10個買うと付いてくるプレミアなボールです。
効果はモンスターボールと一緒なので、ポケモントレーナーに必要なものの1つで間違えないですよね！？
(異論は認めません。)
そのため、この記事ではCSSで作るプレミアボールを紹介しようと思います。
完成形
完成形は↓こちらです。
影やアニメーションを用いて、球体を表現しています。
See the Pen プレミアボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
作成手順
では、早速作って行きましょう！
01. プレミアボールの外形を作る
まずは、↓このようなプレミアボールの外形を作って行きましょう！
この外形を作るために linear-gradient を使って作っていきます。
linear-gradientを以下のように記載することで、上から順に
0% ~ 46% ： White
46% ~ 54% ： Red
54% ~ 100% ： White
と塗り分けることができます。
div {
background:linear-gradient(white 46%, red 46%, red 54%, white 54%)
}
この linear-gradient を使い以下のように記載するとプレミアボールの外形を作ることができます。
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で２種類の影を使い、以下のように記載するとボタン部分を作成することができます。
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 にを6秒で移動させます。
.base {
animation: move-anim 6s ease-out infinite;
}
@keyframes move-anim {
0% {
translate: -100vw;
rotate: 0deg;
}
100% {
translate: 100vw;
rotate: 900deg;
}
}
このように記載することで、プレミアボールが転がるアニメーションが完成です。
See the Pen プレミアボール 3d by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
この記事では、CSSでプレミアボールを作ってみました。
旅の中で、プレミアボールを何個もらったかで、お買い物上手だか決まります！
アドベントカレンダーは、まだまだ2日目です。
アドベントカレンダー完走を目指して、あと23日分投稿するので、
是非、カレンダーを購読して、応援していただけると嬉しいです。
どんどん色々なものを作って行きます！
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！