Oct 28, 2022 16:00:00

'Pokemon Deckz' faithfully reproduces the way the Pokemon card shines for each rarity

There are cards of various rarities in the

Pokemon card game , and the lighting differs slightly depending on the rarity and card type. `` Pokemon Deckz '' is a realistic expression of the appearance of such Pokemon cards on the website using CSS.

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

◆Common (C)/Uncommon (UC)
Commons and uncommons, which are the lowest rarities in the Pokemon card game, are not processed to shine on the cards in the first place. Therefore, even Pokemon Deckz only has a simple glare (gloss) effect. Clicking on the card on the site will enlarge it, and you can rotate the angle of the card by moving the mouse cursor.

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

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

◆ Pokemon V (full illustration)
The full-illustration Pokemon V card has a diagonal gradation effect similar to the Pokemon V card. Not only that, but when viewed from a certain angle, the card has the characteristic of turning into a metallic impression. All the holographic patterns are the same on Pokemon Deckz, but the actual cards seem to have different patterns.

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

◆ Pokemon VMAX
The gradation effect of Pokemon VMAX has a large background gradation and 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 glitter pattern texture and a linear gradient.

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

◆ Trainer card (full illustration)
The fully-illustrated trainer card features a diagonal gradient layering texture. Trainer cards are generally bright pastel colors, so the gradation and texture are slightly different from UR.

In addition to this, there are some VMAX cards and VSTAR cards, such as ``cards with Pokemon shining in rainbow colors'', ``gold cards'' where the edges of the cards are gold, and ``trainers and Pokemon drawn together''. Cards' etc. are also reproduced with CSS, and the source code of Pokemon Deckz is published on GitHub.

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