Pokemon Cards V2
A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards. The cards use 3d transforms, filters, blend modes, css gradients and interactions to provide a unique experience when taking a closer look!
Click on a Card to take a Closer look!
I'm using SvelteJS to handle interactivity and state; assigning values to css custom properties (variables) which in-turn drive the effects and 3d transforms.
Source code is in the repository.
Browse cards below, Or search for your favourite!
Common & Uncommon
All cards get a 3d rotation with CSS based on the cursor position.
The default basic non-holo cards simply apply a flare/glare effect to the card which follows the mouse.
Reverse Holo non-rares
Reverse holo cards come in many shapes and sizes (trainer, stage1, and different energy types).
Therefore there are a few examples here to show the different variations. The background uses a foil and a mask layer along with a glare. I also clip the glare into the image window to treat the image and the holofoil differently.
Holofoil Rare
Holo cards have an additional vertical beam holo effect.
This uses a combintation of repeating gradients and filters, with clip-path to mask the holo areas for each stage. To get the holo effect to change while rotating the card I set the background-position of each gradient layer based on cursor.
Galaxy/Cosmos Holofoil
Similar to the Holofoil, but this uses a special image background of a galaxy effect with a gradient rainbow set to color-dodge & color-burn on top.
An instant classic for any PTCG fan!
Holofoil Amazing Rare
Amazing Rare cards have a very unique shiny foil that extends past the frame and is much shinier than a regular holo effect, and textured. We achieve this by using a mask and applying a glitter effect with a lighten filter.
Radiant Holofoil
The newest holofoil added to the series!
The radiant effect proved very difficult to emulate without crazy math, so I settled with a criss-cross linear gradient pattern that moves across the card.
Trainer Gallery Holofoil
The effect for Trainer Gallery holofoils gives it a kind of metallic effect with iridescent shine. This is achieved with a large color dodge linear gradient, and a hard-light radial gradient on top, at the cursor position, to give the shimmer.
Pokemon V
V cards have a diagonal holographic effect which that appears to travel in opposite directions when you tilt the card into the light.
This effect is achieved with multiple background gradients and I change the background positions based on the cursor x/y. The gradients are set to color-dodge, and there's a subtle svg noise effect.
Pokemon V (Full Art)
Similar to the Pokemon V effect, Full-Art cards use diagonal gradients, but they have additional texture when looked at from certain angles. This is achieved with an additional background image with an exclusion filter. The effect is also more vibrant which adds to the metallic look.
The texture effect is not identical to reality as the real cards each have a unique pattern that follows the art.
Pokemon V (Alternate Art)
Alternate Art Pokemon V cards have practically the same holo effect as the Ultra Rare (Full Art) cards. The only difference is the pattern texture.
The effect looks somewhat different though due to the type of artwork.
VMax
The gradient effect of Pokemon VMax is more subtle, using a larger background gradient which moves more slowly. But the texture effect is more pronounced.
VMax (Alternate/Rainbow)
There's some VMax cards that show a full, or alternate artwork. These are classed as "rainbow rare" and have a similar effect to the rainbow cards. It's a really vibrant and glittery overlay.
This is achieved with a background image of glitter/sparkles, and a texture pattern background image, sandwiching the usual linear gradients.
VStar
Again back to the diagonal gradients overlaying a texture, VStar are quite similar to the Ultra Rare (Full/Alt) cards. The cards are generally brighter with a pastel hue, though, which makes the gradient and texture more subtle.
Trainer Holo (Full Art / Trainer Gallery)
Again back to the diagonal gradients overlaying a texture, VStar are quite similar to the Ultra Rare (Full/Alt) cards. The cards are generally brighter with a pastel hue, though, which makes the gradient and texture more subtle.
Rainbow Rare (VMax, VStar)
The Rainbow Rare is a super glittery effect on top of pastel gradients. This is achieved with a background image of glitter/sparkles and a color-burn/hard-light background blend for some pastel gradients.
Secret Rare (Gold)
GOLD! Here we apply two glitter layers on top of each other with a overlay effect and slide the two layers in opposite directions. We also mask the foil image with a gadient so that foil and glitter layers are mutually exclusive. The resulting effect is a shimmering glitter layer!
Trainer Gallery (V / VMax)
The V and VMax cards in the Trainer Gallery are generally quite similar to the normal V and VMax cards, so here I've just tweaked the values a little and added a different background texture.
Shiny Vault (Basic / Stage 1 / V / VMax)
Shiny Vault cards have quite a unique effect in whereby the foil background is a shiny silver color. To achieve this we apply the foil image with some radial gradients to darken the foil over the background. This creates a slightly silver effect on top of the white card background. This effect works best in Firefox.