Pokémon Cards Holographic effect in CSS

This is a repository holder for the Pokemon Cards CSS Holographic effect.

🔥 As seen on css-tricks.com and codepen
🌟 Demo running @ https://poke-holo.simey.me/

Vue implementation of Pokémon Cards Holographic effect in CSS .

from (https://github.com/simeydotme/pokemon-cards-css).

Thanks to the vue implementation of (https://github.com/Maurier/vue-pokemon-cards-css)

$3

---

install

``
npm i vue-pokemon-cards-css
`

Example

`vue






`

$3

`
https://github.com/zzy-life/components-pokemon-cards-css/blob/master/src/assets/data.json
`

options

$3

Card material (supertype and subtype)



| data.json |
| ------------------------------------------------- |
| // basics |
| cards.slice(0, 6), |
| // holos |
| cards.slice(6, 12), |
| // galaxies |
| cards.slice(12, 15), |
| // radiant |
| cards.slice(15, 18), |
| // basicGallery |
| cards.slice(60, 63), |
| // vee |
| cards.slice(18, 21), |
| // veeUltra |
| cards.slice(21, 24), |
| // veeAlt |
| [...cards.slice(27, 30), ...cards.slice(33, 36)], |
| // veeMax |
| cards.slice(24, 27), |
| // veeMaxAlt |
| [cards[36], cards[31], cards[37]], |
| // veeStar |
| cards.slice(39, 42), |
| // trainerHolo |
| cards.slice(42, 48), |
| // rainbow |
| cards.slice(48, 51), |
| // gold |
| cards.slice(51, 60), |
| // veeGallery |
| cards.slice(63, 69), |

$3

small picture

$3

big picture

$3

card back view

Local operation

$3

`
npm install
`

$3

`
npm run serve
`

$3

`
npm run build
``



#### support / tip

If you think this is super cool, or useful, and want to donate a little, then you are also super cool!

| | | |
| ------------------------------------------------------------ | -----------------------------------------------------------: | --------------------------------------------------- |
| |  | £1 tip |
| |  | £5 tip |
| |  | £10 tip |





---

#### attribution

<sub>- Galaxy Holo from aschefield101
- Some backgrounds from Vecteezy</sub>