# simeydotme/pokemon-cards-css **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/simeydotme-pokemon-cards-css).** 7,692 stars · 752 forks · CSS · GPL-3.0 ## Links - GitHub: https://github.com/simeydotme/pokemon-cards-css - Homepage: https://poke-holo.simey.me/ - awesome-repositories: https://awesome-repositories.com/repository/simeydotme-pokemon-cards-css.md ## Topics `blend-modes` `css` `filter` `gradient` `holo` `holographic` `pokemon` `svelte` `sveltejs` `transform` ## Description This project is a CSS collectible card framework and holographic effect library designed to create interactive trading card faces. It provides a system for rendering complex artwork and card components entirely through CSS stylesheets without the use of external image assets. The framework specializes in simulating physical materials such as iridescent shimmers, metallic glares, and holographic foils. It utilizes blend modes and gradients to produce specialized surface finishes, including glitter and galaxy patterns, which react dynamically to the user's cursor position. The system further implements a three-dimensional display through perspective-driven depth mapping and coordinate-based transforms. This allows for interactive card tilting and rotations that simulate the physical movement of a collectible card. ## Tags ### User Interface & Experience - [Holographic Effect Rendering](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/canvas-visual-effects/css-filter-effects/holographic-effect-rendering.md) — Simulates realistic holographic foil patterns on cards using CSS transforms, gradients, blend-modes, and filters. ([source](https://cdn.jsdelivr.net/gh/simeydotme/pokemon-cards-css@main/README.md)) - [Holographic Effects](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling/holographic-effects.md) — Creates realistic shimmering and foil effects on digital trading cards using advanced CSS gradients and blend modes. - [CSS Effect Renderers](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/canvas-visual-effects/css-filter-effects/css-effect-renderers.md) — Utilizes CSS transforms, blend modes, and filters to produce complex effects like iridescence and depth. - [Holographic Effect Libraries](https://awesome-repositories.com/f/user-interface-experience/background-effects/background-visual-effects/canvas-visual-effects/css-filter-effects/holographic-effect-libraries.md) — Ships a set of visual styles that simulate iridescent shimmers and metallic glares using CSS gradients. - [3D](https://awesome-repositories.com/f/user-interface-experience/card-components/3d.md) — Implements a UI element that uses CSS transforms to simulate the physical tilting and perspective of a card. - [Card Styling](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling.md) — Provides advanced styling for collectible trading card faces using high-fidelity material simulations. - [3D Perspective Transforms](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling/3d-perspective-transforms.md) — Implements interactive 3D tilting and perspective rotations that simulate the physical movement of a collectible card. ([source](https://poke-holo.simey.me/)) - [CSS Frameworks](https://awesome-repositories.com/f/user-interface-experience/css-frameworks.md) — Provides a comprehensive framework of styles for creating interactive trading cards with holographic effects. - [Blending Utilities](https://awesome-repositories.com/f/user-interface-experience/element-masks/blending-utilities.md) — Implements advanced blending modes to create holographic and iridescent surface effects on card faces. - [Cursor-Driven Visual Effects](https://awesome-repositories.com/f/user-interface-experience/interaction-effects/cursor-driven-visual-effects.md) — Creates dynamic glare and iridescent shimmers that react fluidly to the user's cursor position. ([source](https://cdn.jsdelivr.net/gh/simeydotme/pokemon-cards-css@main/README.md)) - [CSS Art Collections](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling/css-art-collections.md) — Showcases a curated collection of card faces created entirely with advanced CSS visual effects. - [Trading Card Aesthetics](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling/trading-card-aesthetics.md) — Recreates the distinctive visual style of Pokémon trading cards, including foil treatments and layouts. - [Digital Collectible Displays](https://awesome-repositories.com/f/user-interface-experience/digital-collectible-displays.md) — Provides an interactive system for viewing digital collectible cards with realistic material effects in a browser. ### Part of an Awesome List - [Pure CSS Renderers](https://awesome-repositories.com/f/awesome-lists/devtools/cards/pure-css-renderers.md) — Creates detailed card face visuals using pure CSS without JavaScript or image dependencies. - [Shimmer Effects](https://awesome-repositories.com/f/awesome-lists/devtools/animation-and-transitions/loading-animations/shimmer-effects.md) — Implements shimmering surfaces and holographic patterns using moving gradients and transforms. ### Graphics & Multimedia - [3D Coordinate Transformations](https://awesome-repositories.com/f/graphics-multimedia/3d-coordinate-transformations.md) — Calculates real-time 3D rotations and perspective shifts based on cursor coordinates to simulate card tilting. - [CSS-Only Artworks](https://awesome-repositories.com/f/graphics-multimedia/css-only-artworks.md) — Renders complex card artwork and surface textures using pure CSS without any external image assets. - [Artistic Texture Simulation](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/gradient-renderers/css-gradient-graphics/artistic-texture-simulation.md) — Employs complex CSS gradients to simulate physical materials like metallic foils and shimmering glitter. - [Perspective Warping](https://awesome-repositories.com/f/graphics-multimedia/perspective-warping.md) — Applies CSS perspective properties to create a three-dimensional depth effect during interactive tilting. - [Material Texture Simulation](https://awesome-repositories.com/f/graphics-multimedia/surface-effect-rendering/material-texture-simulation.md) — Renders specialized surface finishes like glitter and galaxy patterns using CSS filters and blend modes. ([source](https://poke-holo.simey.me/)) - [CSS-Based Generative Art](https://awesome-repositories.com/f/graphics-multimedia/generative-art-toolkits/css-based-generative-art.md) — Builds visually complex artwork that reacts to user input using exclusively CSS properties. - [Artistic Color Filtering](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/dynamic-color-filters/artistic-color-filtering.md) — Uses CSS filters to manipulate hue and brightness for realistic light interaction on reflective surfaces. - [Pure CSS Illustrations](https://awesome-repositories.com/f/graphics-multimedia/pure-css-illustrations.md) — Showcases complex visual designs rendered entirely with CSS filters and animations. ### Development Tools & Productivity - [Collection](https://awesome-repositories.com/f/development-tools-productivity/metadata-generators/collection.md) — Implements a digital display for asset collections featuring physical material simulations. ### Game Development - [Trading Card Game Interfaces](https://awesome-repositories.com/f/game-development/trading-card-game-interfaces.md) — Designs the layout and visual aesthetic of collectible card game faces for web galleries. ### Web Development - [CSS Animation Patterns](https://awesome-repositories.com/f/web-development/css-animation-patterns.md) — Provides a system for creating visually rich artwork and animations using pure CSS techniques.