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

## はじめに
![画面収録 2022-12-17 22.32.18_4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/14cb49b0-71f1-252c-e765-f3abe461b09c.gif)

https://deck-24abcd.netlify.app/?ref=sidebar

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

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

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

## レアリティ表現について
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d0e711db-8c4e-2fa5-854b-52f93bca78f3.png)
まずは、ポケモンカードのレアリティを表現がどのような構成でできているかを理解しましょう。

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

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

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

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

https://qiita.com/degudegu2510/items/1821047debbd58384117

## 3Dの表現について
![image1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7028c2d6-a82c-3a1a-a349-59074b45481f.png)
立体的にアニメーションして見えるような表現は、↑このように `transform-style: preserve-3d;` で、
X軸とY軸を回転させることで、それっぽくしています。

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

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

https://qiita.com/degudegu2510/items/a0ad925aaf09181a5390

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

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


### Common と Uncommon
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poZzqao" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/poZzqao">
  Common &amp; Uncommon</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c916dacf-da94-55db-5b9a-4c399ff6fa8f.png)|![image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5b60a141-c972-be3d-4e3c-ad3a3d425c7b.png)|![image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/4307d168-e325-31a5-1485-fd58e7a8ded1.png)|![image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f730c611-7482-bb6a-b54b-f857b407b3c3.png)|

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

### Holofoil Rare
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="OJwLrYG" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/OJwLrYG">
  Common &amp; Uncommon</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ccea9ae2-6e66-1df6-da57-cdb7e49fb3a9.png)|![image5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5ef20860-7e50-3257-ece0-a54bd20263a5.png)|![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/125a2417-fb50-9137-8ae7-c4dcd95e10b3.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6617de53-4d4e-c4b1-ce0e-3e3d35f17337.png)|

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


### Galaxy / Cosmos Holofoil
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="LYBPajE" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/LYBPajE">
  Holofoil Rare</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/f3350b8c-e923-31b4-b119-1bf76bffbccf.png)|![image8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a6078d0b-0889-99c9-653d-d950fbd2c347.png)|![image9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0178fee0-4bd3-a27a-a793-7da6e5a4c53d.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/a5cad4b9-f5c1-a178-950d-684f26f69763.png)|

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

### Radiant Holofoil
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="vYaBPzg" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/vYaBPzg">
  Galaxy / Cosmos Holofoil</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c803316c-9a87-6c62-f1d5-54ce02e35aec.png)|![image11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1f165ba3-cb6b-dda3-f5e0-863c195f3b2f.png)|![image12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/22dfd382-56db-5fcc-e7c7-b247ba3407a3.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/50488734-d955-9947-d616-84d0ca38c656.png)|

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

### Trainer Gallery Holofoil
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="mdjbgJq" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/mdjbgJq">
  Radiant Holofoil</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c5750946-b333-6baf-ff30-9ab4d2161aef.png)|![image14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/6b71695b-a02e-9fa6-7457-158bafcb4614.png)|![image15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7ebe6730-0f22-3465-a5b9-b2b0fc78e4c9.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/35b2abe0-56ed-b060-752c-87746b04257c.png)|

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

### Pokemon V
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="gOjYyGj" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/gOjYyGj">
  Trainer Gallery Holofoil</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/3bc7440d-eac5-b3b2-0808-477c8bbe6676.png)|![image17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/51764d19-48f4-2073-b558-e6b8dce233b6.png)|![image18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/57130fa1-5e98-f687-ebbc-8ea1bde15b41.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e82a2a3b-a130-f4d1-aec8-cae8b3492c61.png)|

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

### Pokemon V *(Full Art)*
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="qByWeEN" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/qByWeEN">
  Pokemon V</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/64a01325-aecf-99d2-8270-bcf20a54c509.png)|![image20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5b89c2b1-ce87-6659-9e32-3ee74d50d6ea.png)|![image21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/173a6853-43b6-b6da-0226-f87e10dc4d76.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8f29229f-559e-5602-724b-1a10dd857706.png)|

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

### Pokemon V *(Alternate Art)*
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="zYLOgwq" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/zYLOgwq">
  Pokemon V (Full Art)</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/804fbfda-88bb-d604-cde9-415f8187083c.png)|![image23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/862eb997-75a9-ad88-927a-e4b335d90dd4.png)|![image24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/26443c9b-c1ec-601b-814a-811bcb447847.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/242cf605-4cea-61ca-75f6-9182dd9d11d6.png)|

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

### VMax
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExpYqbg" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/ExpYqbg">
  Pokemon V (Alternate Art)</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2f440089-8c33-8979-c1f2-458dd3bc6b07.png)|![image26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1c2b9a79-3dd8-5cba-f7d7-d362277a4c79.png)|![image27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8f3d9965-0321-5007-360d-26fc8da2c7e9.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7dfe59f5-6b49-6d68-9f12-1f915d2b4084.png)|

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

### VMax *(Alternate / Rainbow)*
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ExpYqpZ" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/ExpYqpZ">
  VMax</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b4607163-6b3e-2197-4344-c159ece72183.png)|![image29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/fccd749d-d5b9-eef3-9cc4-e804b0937470.png)|![image30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/32f4c6f0-af7e-7171-a903-7d611b1e5f42.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0375dd28-b1a4-dc51-d192-515719c94d2c.png)|

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

### VStar
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjBPggO" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/JjBPggO">
  VMax (Alternate / Rainbow)</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/ed095b22-a7ff-5540-0fb5-d9521bc11061.png)|![image32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/cd683f02-766f-ffe9-5e0c-ebefa72693fc.png)|![image33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/1c3c14f0-ca9e-bb1d-0662-e8e1d1c01124.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/cfd199a1-c5b9-be89-a7a5-74bb125bb868.png)|

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

### Trainer Holo *(Full Art)*
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="yLqLBVV" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/yLqLBVV">
  VStar</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8cd22cef-eab2-3b3d-d4cd-72e3b1bd97d6.png)|![image35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/c8aabf5f-6e15-1d01-8d91-8ddeb86cfb59.png)|![image36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0d679bab-41c9-f260-ec2d-017b26304fda.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/491d85cd-8bb7-17fb-f228-1b5490dfc92d.png)|

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

### Rainbow Rare *(VMax, VStar)*
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="poZozrR" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/poZozrR">
  Trainer Holo (Full Art)</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/decf6e32-61d2-626e-7668-c6b23dc2d761.png)|![image38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/d4f2431a-2911-3368-1890-090521d877bd.png)|![image39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9e8ba05e-ad8a-f66e-75c3-039c99f815a6.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/445c34a8-60ed-4126-03e7-7aa36298e2ba.png)|

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

### Secret Rare *(Gold)*
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="abjboYK" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/abjboYK">
  Rainbow Rare (VMax, VStar)</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/b3dd427e-4116-b6b4-d82f-3d25c888cc81.png)|![image41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/97c7c5f9-46eb-37c4-2f33-2196550bb133.png)|![image42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/420d4697-d293-43b3-8d5e-b93038260809.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e44750b5-2033-4a48-83f7-49815d15e17c.png)|

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

### Trainer Gallery *(V / VMax)*
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="BaPaBbz" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/BaPaBbz">
  Rainbow Rare (VMax, VStar)</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

|**画像**|**パターン**|**カラー**|**ハイライト**|
|:--:|:--:|:--:|:--:|
|![Group 15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/179dcca1-1510-9658-204a-e6aef47257f4.png)|![image44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/51a60b5f-7564-94da-70bc-ffe12cda9f2b.png)|![image45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e47f150b-e8ee-36aa-270c-1bd9e16ca3c2.png)|![imagelight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/2cceea9b-590a-4cdb-75a8-2de6c4ecd592.png)|

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

## まとめ

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

https://deck-24abcd.netlify.app/?ref=sidebar

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

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

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

---

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

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

https://twitter.com/degudegu2510