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 and codepen
🌟 Demo running @ https://poke-holo.simey.me/

Vue implementation of Pokémon Cards Holographic effect in CSS .

from (https://github.com/simeydotme/pokemon-cards-css).

Thanks to the vue implementation of (https://github.com/Maurier/vue-pokemon-cards-css)

A collection of advanced CSS styles, applied with vue.js.

install

npm i vue-pokemon-cards-css

Example

<!--
 * @Author: 时不待我 [email protected]
 * @Date: 2022-12-17 22:18:59
 * @LastEditors: 时不待我 [email protected]
 * @LastEditTime: 2022-12-18 13:16:53
-->

<template>
  <div class="showcase" @click="active = null">
    <div>
      <div class="slice">
        <vue-pokemon-cards-css
          v-for="card of slices"
          @click.native.stop="active = active === card ? null : card"
          :key="card.id"
          :name="card.name"
          :img="card.images.large"
          :number="card.number"
          backimg="https://tcg.pokemon.com/assets/img/global/tcg-card-back-2x.jpg"
          :supertype="card.supertype"
          :subtypes="card.subtypes"
          :rarity="card.rarity"
          :gallery="card.gallery"
          :active="active === card"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
//导入
import VuePokemonCardsCss from "vue-pokemon-cards-css";

//导入渲染的数组
let cards = require("@/assets/data.json");
//数组进行处理
cards = cards.map((card) => {
  return {
    ...card,
    rarity: card.rarity.toLowerCase(),
    supertype: card.supertype.toLowerCase(),
    subtypes: Array.isArray(card.subtypes)
      ? card.subtypes.join(" ").toLowerCase()
      : card.subtypes.toLowerCase(),
    gallery: card.number.startsWith("TG"),
  };
});
export default Vue.extend({
  name: "ServeDev",
  components: {
    VuePokemonCardsCss,
  },
  data() {
    return {
      active: null,
      slices:
        cards.slice(0, 6),
    };
  },
});
</script>

<style lang="scss" scoped>
.showcase {
  padding: 4rem;
}

.slice {
  margin-bottom: 4rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 4rem;
}

hr {
  opacity: 0.35;
  border-bottom: 1px solid #000;
  margin-bottom: 3rem;
}
</style>

data.json

https://github.com/zzy-life/components-pokemon-cards-css/blob/master/src/assets/data.json

options

subtypes && rarity

Card material (supertype and subtype)

| data.json | | ------------------------------------------------- | | // basics | | cards.slice(0, 6), | | // holos | | cards.slice(6, 12), | | // galaxies | | cards.slice(12, 15), | | // radiant | | cards.slice(15, 18), | | // basicGallery | | cards.slice(60, 63), | | // vee | | cards.slice(18, 21), | | // veeUltra | | cards.slice(21, 24), | | // veeAlt | | [...cards.slice(27, 30), ...cards.slice(33, 36)], | | // veeMax | | cards.slice(24, 27), | | // veeMaxAlt | | [cards[36], cards[31], cards[37]], | | // veeStar | | cards.slice(39, 42), | | // trainerHolo | | cards.slice(42, 48), | | // rainbow | | cards.slice(48, 51), | | // gold | | cards.slice(51, 60), | | // veeGallery | | cards.slice(63, 69), |

images.small

small picture

images.large

big picture

backimg

card back view

Local operation

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

support / tip

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

| | | | | ------------------------------------------------------------ | -----------------------------------------------------------: | --------------------------------------------------- | | | | £1 tip | | | | £5 tip | | | | £10 tip |

attribution

- Galaxy Holo from aschefield101
- Some backgrounds from Vecteezy