https://github.com/simeydotme/pokemon-cards-151

151 version of Pokemon Card CSS styles
https://github.com/simeydotme/pokemon-cards-151

css holo holographic pokemon svelte sveltejs sveltekit

Last synced: 8 months ago
JSON representation

151 version of Pokemon Card CSS styles

• Host: GitHub
• URL: https://github.com/simeydotme/pokemon-cards-151
• Owner: simeydotme
• License: gpl-3.0
• Created: 2023-09-24T13:37:06.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-08-25T14:20:29.000Z (about 1 year ago)
• Last Synced: 2025-03-17T07:09:55.435Z (8 months ago)
• Topics: css, holo, holographic, pokemon, svelte, sveltejs, sveltekit
• Language: CSS
• Homepage: https://poke-151.simey.me/
• Size: 123 MB
• Stars: 16
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Pokémon 151 Holographic effect in CSS

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

|  | As seen on [css-tricks.com](https://css-tricks.com/holographic-trading-card-effect/) and [codepen](https://codepen.io/simeydotme/pen/abYWJdX) 

| --: | :-- |

| [](https://poke-151.simey.me/) | Demo @ https://poke-151.simey.me/ ⭐ |

| [](https://poke-holo.simey.me/) | SwSH version @ https://poke-holo.simey.me/   |

### 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 151 (Scarlet & Violet) era of Pokemon Trading Cards.

https://github.com/user-attachments/assets/3631e78d-c91f-4590-98c8-95c9ebd8389a

---

#### support / tip  

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

|  | [![£1 One Pound tip](https://user-images.githubusercontent.com/2817396/149629980-08b9a952-bd6a-4c23-be78-05e3fd534352.png)](https://www.paypal.com/paypalme/simey/1) | [£1 tip](https://www.paypal.com/paypalme/simey/1) |

|--|--:|---------|

|  | [![£5 Five Pounds tip](https://user-images.githubusercontent.com/2817396/149629994-3a99770c-d333-46e7-9818-ab6b18ad0202.png)](https://www.paypal.com/paypalme/simey/5) | [£5 tip](https://www.paypal.com/paypalme/simey/5) |

|  | [![£10 Ten Pounds tip](https://user-images.githubusercontent.com/2817396/149630000-95aa4234-ff67-4e7c-a7f4-ffd52f25e6d8.png)](https://www.paypal.com/paypalme/simey/10) | [£10 tip](https://www.paypal.com/paypalme/simey/10) |

---

#### attribution

- Galaxy Holo from [aschefield101](https://www.deviantart.com/aschefield101/art/HoloSheet-2012-313543843)