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

A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards.
https://github.com/simeydotme/pokemon-cards-css

blend-modes css filter gradient holo holographic pokemon svelte sveltejs transform

Last synced: 28 days ago
JSON representation

A collection of advanced CSS styles to create realistic-looking effects for the faces of Pokemon cards.

• Host: GitHub
• URL: https://github.com/simeydotme/pokemon-cards-css
• Owner: simeydotme
• License: gpl-3.0
• Created: 2022-06-20T17:34:46.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-03-09T17:09:56.000Z (over 1 year ago)
• Last Synced: 2024-09-30T19:01:29.309Z (about 1 month ago)
• Topics: blend-modes, css, filter, gradient, holo, holographic, pokemon, svelte, sveltejs, transform
• Language: CSS
• Homepage: https://poke-holo.simey.me/
• Size: 116 MB
• Stars: 5,375
• Watchers: 32
• Forks: 497
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://css-tricks.com/holographic-trading-card-effect/) and [codepen](https://codepen.io/simeydotme/pen/abYWJdX)  

🌟 Demo running @ 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 Sword and Shield era of Pokemon Trading Cards.



---

#### 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)  

- Some backgrounds from [Vecteezy](https://www.vecteezy.com/free-photos)