discover · compare · collections · requirements · contribute · feed · watching · stats · help with your tokens
simeydotme/pokemon-cards-css · source
Snapshot 0 · 2026-11-04T12:47:27Z · CSS · GPL-3.0
Content fingerprint
7d449000b1ce9b8715f08ae1a29f2cb1f50c40091c4eab76af6e365d105d8d27GitHub description at capture
A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards.
README at capture
# Pokémon Cards Holographic effect in CSS This is a repository holder for the Pokemon Cards CSS Holographic effect. | <img src="https://github.com/user-attachments/assets/ca493541-57bb-48c3-b40c-925f7203a933" width=80> | As seen on [css-tricks.com](https://css-tricks.com/holographic-trading-card-effect/) and [codepen](https://codepen.io/simeydotme/pen/abYWJdX) | --: | :-- | | [<img src="https://github.com/user-attachments/assets/fd862cc7-2f30-4a35-9dbc-778edcc369f3" width=80>](https://poke-holo.simey.me/) | Demo running @ https://poke-holo.simey.me/ | | [<img src="https://github.com/user-attachments/assets/f1c9d376-0948-4b96-826e-f016e6584736" width=80><img src="https://github.com/user-attachments/assets/8137f0c8-6bc2-4f22-90c9-03cb8332b6f1" width=25>](https://poke-151.simey.me/) | 151 version @ https://poke-151.simey.me/ ⭐ | <br><br> ----- > [!TIP] > I've published a component which can help with getting you a similar effect to this, without much effort; > https://github.com/simeydotme/hover-tilt --- ### A collection of advanced CSS styles, applied with SvelteJS. Uses CSS Transforms, Gradients, Blend-modes and Filters to simulate the various Holofoil effects found in the Sword and Shield era of Pokemon Trading Cards. <img src="public/pokemon-cards-demo.gif" /> --- > [!NOTE] > Please [read `#issues/19` before asking / requesting any help](https://github.com/simeydotme/pokemon-cards-css/issues/19) or advice on the Project. Thank you. --- #### support / tip If you think this is super cool, or useful, and want to donate a little, then you are also super cool! | | | | |--|--:|---------| | <img src="https://user-images.githubusercontent.com/2817396/149629283-6002944f-9253-4e35-917d-89b476deae4e.png" width=20> | [](https://www.paypal.com/paypalme/simey/1) | [£1 tip](https://www.paypal.com/paypalme/simey/1) | | <img src="https://user-images.githubusercontent.com/2817396/149629283-6002944f-9253-4e35-917d-89b476deae4e.png" width=20> | [](https://www.paypal.com/paypalme/simey/5) | [£5 tip](https://www.paypal.com/paypalme/simey/5) | | <img src="https://user-images.githubusercontent.com/2817396/149629283-6002944f-9253-4e35-917d-89b476deae4e.png" width=20> | [](https://www.paypal.com/paypalme/simey/10) | [£10 tip](https://www.paypal.com/paypalme/simey/10) | --- #### attribution <sub>- Galaxy Holo from [aschefield101](https://www.deviantart.com/aschefield101/art/HoloSheet-2012-313543843)</sub> <sub>- Some backgrounds from [Vecteezy](https://www.vecteezy.com/free-photos)</sub>