Oct 28, 2022 16:00:00

'Pokemon Deckz' faithfully reproduces the way Pokemon cards shine depending on their rarity.

There are cards of various rarities in

the Pokemon card game , and the way they shine differs slightly depending on the rarity and type of card. `` Pokemon Deckz '' uses CSS to realistically express the look of such Pokemon cards on a website.

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

◆Common (C)/Uncommon (UC)
Commons and uncommons, which have the lowest rarities in the Pokemon card game, do not have any glitter processing applied to them in the first place. Therefore, even Pokemon Deckz only has a simple glare (shiny) effect. On the site, you can click on a card to enlarge it, and move the mouse cursor to rotate the angle of the card.

◆

Shining Pokemon
It seems that it was very difficult to reproduce the shining Pokemon card with CSS because the diagonal gradation crosses.

◆Pokemon V
The V card has a diagonal gradient effect.

◆Pokemon V (full illustration)
The fully illustrated Pokemon V card has a diagonal gradation effect, just like the Pokemon V card. Not only that, but the card also has a unique feature that when viewed from a certain angle, the card takes on a metallic appearance. All the holographic patterns on Pokemon Deckz are the same, but each actual card seems to have a different pattern.

◆Pokemon V (Special Art)
The special art version of Pokemon V cards have almost the same gradation effect as Ultra Rare (UR). However, the pattern texture is slightly different, and the effect seems to vary depending on the type of artwork.

◆Pokemon VMAX
The gradation effect in Pokemon VMAX has a large background gradation that moves slowly. However, the texture effect is more pronounced.

◆Pokemon VMAX (Special Art)
The special art version of Pokemon VMAX has a background with a glittering pattern texture and a linear gradient.

◆Pokemon VSTAR
Pokemon VSTAR cards also have a diagonal gradation effect that is very similar to Ultra Rare (UR). However, it is generally brighter with pastel colors, and the gradation and texture seem to be different from UR.

◆Trainer card (full illustration)
The fully illustrated trainer card features diagonal gradation that overlaps the texture. Trainer cards are also generally pastel colored and bright, so the gradations and textures seem to be slightly different from UR.

In addition, there are some VMAX and VSTAR cards such as ``cards with rainbow-colored Pokemon'', ``gold cards'' where the edge of the card is gold, and ``cards where the trainer and Pokemon are drawn together''. The Pokemon Deckz source code is also available on GitHub.

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