A website has been launched that recreates the sparkling holographic effect of Pokémon cards using CSS.
Rare cards in card games often have unique textures or glows that change depending on the angle you look at them, making it difficult to fully convey their rarity digitally. Web developer Simon Gellner has created a website that uses CSS to recreate the glow and texture of high-rarity Pokémon cards, sharing the details on GitHub.
Pokémon Cards CSS Holographic Effect
GitHub - 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
It can be difficult to convey the appeal of rare cards on a screen. For example, the image below shows a close-up of a particularly rare 'SR' card from the 'Card List' section of the official Pokémon card website . While you can see the coolness of the illustration covering the entire card and the different texture from regular cards, the unique shine of rare cards is not conveyed.
Gellner's 'pokemon-cards-css' site recreates the holographic effect of rare cards using CSS. On his
You can also click on the card to enlarge it.
Some real cards even have holographic effects on the text, revealing patterns when illuminated at different angles, and Gellner's site recreates the effect of these cards.
When you change the angle of a card with a rarity of 'R', you can see that light is shining in the illustration.
Cards featuring differently colored Pokémon, such as
When I hovered my mouse over it and changed the angle, I could see how cool the rare card was with the diagonal glow.
The 'SR' cards are attractive because of their full-coverage illustrations and beautiful glow.
You can also enjoy the texture of rare cards, which shine in different ways.
Pokemon cards are popular not only for Pokemon but also for trainer character cards. Rare trainer cards have a different and attractive glow than Pokemon cards, so you can look at them carefully as if you were looking at the actual cards.
In addition, the following is a rainbow-colored 'HR' card. Even among rare cards, it is difficult to convey the charm of the real thing on the screen, but you can see its beautiful shine by changing the angle.
You can also search for card names in the search box. The search range is all cards in the Pokémon Card Game Sword & Shield, and you must enter the name in English. Enter 'Zacian,' the English name of Zacian, the flagship Pokémon in Sword & Shield.
Then, all types and rarities of Zacian cards were displayed.
You can also search by trainer name, but it must match the English character name.
Details of 'pokemon-cards-css' are available on GitHub.
Related Posts:
in Software, Web Service, Review, Game, Posted by log1e_dh