ポケモンカードゲームにはさまざまなレアリティのカードが存在しており、このレアリティやカードの種類によって光り方が微妙に異なります。そんなポケモンカードの見た目を、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