50
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Qiita株式会社Advent Calendar 2022

Day 24

【CSS】ポケモンカードのレアリティを忠実に再現したサイトが凄すぎた。

Last updated at Posted at 2022-12-23

はじめに

画面収録 2022-12-17 22.32.18_4.gif

みなさんは、ポケモンカードのレアリティを忠実に再現したサイトをご存知ですか?
SNSなどでも色々と話題になっているサイトです。 

私がこのサイトを初めて見た時、ポケモンカードのレアリティの表現のクオリティの高さとシンプルなHTML/CSS/JavaScriptで作られていることにとっても感動しました。

そこでこの記事では、
どのようにこのポケモンカードのレアリティを表現しているかをか、
マウスホバーに合わせて、どのように3Dに動いているのかを解説していこうと思います。

レアリティ表現について

image1.png
まずは、ポケモンカードのレアリティを表現がどのような構成でできているかを理解しましょう。

ポケモンカードのレアリティ表現は、↑このように「画像層」「パターン層」「カラー層」「ハイライト層」の4層で作成しています。
これらの層を、blend modesfiltersを使ってそれっぽくしています。

それぞれの役割は↓こんな感じです。

  • 画像層
    • 画像層は、レアリティ表現をしたいポケモンカードの画像が置かれます。
  • パターン層
    • パターン層は、ポケモンカードのホログラムにあうパターン画像が置かれます。
  • カラー層
    • カラー層は、ポケモンカードのホログラムの光を表現するために、複雑なグラデーションが設定されます。
  • ハイライト層
    • ハイライト層は、ポケモンカードにホバーしたところを少し明るくするためのハイライトを作る層です。

基本的な作り方は↓こちらの記事を参考にしてください。

3Dの表現について

image1.png
立体的にアニメーションして見えるような表現は、↑このように transform-style: preserve-3d; で、
X軸とY軸を回転させることで、それっぽくしています。

ただ、transform-style: preserve-3d;だけを動かすと、回転方向がわからなくなるため、
回転に合わせて、translate で画像の位置を少し調整する必要があります。

基本的な作り方は↓こちらの記事を参考にしてください。

レアリティごとの解説

レアリティごとにより詳しくどのように作られているか解説していこうと思います。

カードのイラストは、それっぽく作成しています。

Common と Uncommon

See the Pen Common & Uncommon by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 1.png image2.png image3.png image4.png

CommonとUncommonは、↑このような構造になり、
マウスの動きにあわっせて、カードにハイライトを適用するだけです。

Holofoil Rare

See the Pen Common & Uncommon by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 2.png image5.png image6.png imagelight.png

Holofoil Rareは、↑このような構造になります。
カラー層で、repeating-linear-gradient を使って、パターンを作成しているので、パターンは設定していません。
また、ホログラムがかかるのがポケモンがいる部分だけのため、clip-pathを使って、カラーの範囲を小さくしています。

Galaxy / Cosmos Holofoil

See the Pen Holofoil Rare by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 3.png image8.png image9.png imagelight.png

Galaxy / Cosmos Holofoilは、↑このような構造になります。
ホログラムがかかるのがポケモンがいる部分だけのため、clip-pathを使って、パターン・カラーの範囲を小さくしています。

Radiant Holofoil

See the Pen Galaxy / Cosmos Holofoil by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 4.png image11.png image12.png imagelight.png

Radiant Holofoilは、↑このような構造になります。
カラー層で、repeating-linear-gradient を複数組み合わせて、パターンを作成しています。
また、カラー層の隙間から、カードが光って見えるよう↑このようなパターンが設定されています。

Trainer Gallery Holofoil

See the Pen Radiant Holofoil by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 5.png image14.png image15.png imagelight.png

Trainer Gallery Holofoilは、↑このような構造になります。
マウスホバーに合わせて、カラー層をブレンドされるため、パターン層の設定は ありません。

Pokemon V

See the Pen Trainer Gallery Holofoil by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 6.png image17.png image18.png imagelight.png

Pokemon Vは、↑このような構造になります。
カラーの部分を少しザラザラする見た目にするため、パターン層を使っています。

Pokemon V (Full Art)

See the Pen Pokemon V by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 7.png image20.png image21.png imagelight.png

Pokemon V (Full Art) は、↑このような構造になります。
カラーの部分をパターン層を使って、キラキラ光らせています。

Pokemon V (Alternate Art)

See the Pen Pokemon V (Full Art) by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 8.png image23.png image24.png imagelight.png

Pokemon V (Alternate Art) は、↑このような構造になります。
カラーの部分をパターン層を使って、キラキラ光らせています。

VMax

See the Pen Pokemon V (Alternate Art) by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 9.png image26.png image27.png imagelight.png

VMax は、↑このような構造になります。
カラーの部分をパターン層を使って、キラキラ光らせています。

VMax (Alternate / Rainbow)

See the Pen VMax by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 10.png image29.png image30.png imagelight.png

VMax (Alternate / Rainbow) は、↑このような構造になります。
カラーの部分をパターン層を使って、キラキラ光らせています。

VStar

See the Pen VMax (Alternate / Rainbow) by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 11.png image32.png image33.png imagelight.png

VStar は、↑このような構造になります。
カラーの部分をパターン層を使って、キラキラ光らせています。

Trainer Holo (Full Art)

See the Pen VStar by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 12.png image35.png image36.png imagelight.png

Trainer Holo (Full Art) は、↑このような構造になります。
カラーの部分をパターン層を使って、キラキラ光らせています。

Rainbow Rare (VMax, VStar)

See the Pen Trainer Holo (Full Art) by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 13.png image38.png image39.png imagelight.png

Rainbow Rare (VMax, VStar) は、↑このような構造になります。
カラーの部分をパターン層を使って、キラキラ光らせています。

Secret Rare (Gold)

See the Pen Rainbow Rare (VMax, VStar) by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 14.png image41.png image42.png imagelight.png

Secret Rare (Gold) は、↑このような構造になります。
カラーの部分をパターン層を使って、キラキラ光らせています。

Trainer Gallery (V / VMax)

See the Pen Rainbow Rare (VMax, VStar) by でぐぅー | Qiita (@sp_degu) on CodePen.

画像 パターン カラー ハイライト
Group 15.png image44.png image45.png imagelight.png

Trainer Gallery (V / VMax) は、↑このような構造になります。
カラーの部分をパターン層を使って、キラキラ光らせています。

まとめ

そこでこの記事では、レアリティごとに
どのようにこのポケモンカードのレアリティを表現しているかをか、
マウスホバーに合わせて、どのように3Dに動いているのかを解説しました。

このサイトのポケモンカードのレアリティ表現は、
何重にもグラデーションを重ねて、blend-modefilter を使い尽くして表現をしています。

またマウスに追従して、JavaScriptで CSSのカスタムプロパティを変えて、
カードの位置や回転、レアリティ表現のグラデーションの位置などを変えています。

一個ずつ作ってみて、改めて凄さを実感しました。
この記事を読んて、より勉強になった嬉しいです。


最後まで読んでくださってありがとうございます!

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

50
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
50
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?