ポケモンカードのレア度ごとの光り輝き方を忠実に再現した「Pokemon Deckz」

ポケモンカードゲームにはさまざまなレアリティのカードが存在しており、このレアリティやカードの種類によって光り方が微妙に異なります。そんなポケモンカードの見た目を、CSSを使ってウェブサイト上でリアルに表現したのが「Pokemon Deckz」です。

Pokemon Deckz
https://deck-24abcd.netlify.app/

◆コモン(C)・アンコモン(UC)
ポケモンカードゲームの中で最もレアリティの低いコモンとアンコモンは、そもそもカードに光る加工が施されていません。そのため、Pokemon Deckzでも単純なグレア(光沢)効果を施しているのみ。サイト上ではカードをクリックすると拡大表示され、マウスカーソルを動かすとカードの角度をグルグル回転させることができます。

◆かがやくポケモン
かがやくポケモンカードは斜めのグラデーションがクロスするようにかかっているためCSSで再現するのがとても難しかった模様。

◆ポケモンV
Vカードには斜めのグラデーション効果が施されています。

◆ポケモンV(フルイラスト)
フルイラストのポケモンVカードは、ポケモンVカードと同様に斜めにグラデーション効果がかけられています。それだけでなく、特定の角度から見るとカードがメタリックな印象に変わるという特徴あり。Pokemon Deckz上ではホログラフィックの柄がすべて同じものになっていますが、実際のカードはそれぞれ異なるパターンを持っているそうです。

◆ポケモンV(スペシャルアート)
スペシャルアート版のポケモンVカードは、ウルトラレア(UR)とほぼ同じグラデーション効果。ただし、パターンテクスチャが微妙に異なり、アートワークの種類によってもこの効果が多少異なってくるそうです。

◆ポケモンVMAX
ポケモンVMAXのグラデーション効果は背景のグラデーションが大きくゆっくりと動きます。ただし、テクスチャ効果はより顕著。

◆ポケモンVMAX(スペシャルアート)
スペシャルアート版のポケモンVMAXはキラキラ光るパターンテクスチャを持った背景と、線形グラデーションを持ちます。

◆ポケモンVSTAR
ポケモンVSTARカードも斜めのグラデーション効果がウルトラレア(UR)とよく似ています。ただし、一般的にパステルカラーで明るくなっており、グラデーションとテクスチャがURとは異なるそうです。

◆トレーナーカード(フルイラスト)
フルイラストのトレーナーカードは、斜めのグラデーションがテクスチャを重ねるように施されています。トレーナーカードも一般的にはパステルカラーで明るいので、グラデーションとテクスチャがURとは微妙に異なるそうです。

この他にも一部のVMAXカードやVSTARカードである「ポケモンが虹色に輝いているカード」や、カードの縁部分まで金色になっている「ゴールドカード」、「トレーナーとポケモンが一緒に描かれたカード」などもCSSで再現しており、Pokemon DeckzのソースコードはGitHub上で公開されています。

GitHub - simeydotme/pokemon-cards-css
https://github.com/simeydotme/pokemon-cards-css