Japanese "Witchcrafter Madame Verre" Yu-gi-oh! OCG card.
ウィッチクラフトマスター・ヴェール
光属性
カードアートワーク：毛皮をアクセントにした白いドレスを着た青ピンクのロングヘアの自信に満ちた少女が、魔法の杖を持ち、クリスタルの玉座に座っている。
DBIC-JP019
【魔法使い族／効果】このカード名の①②の効果はそれぞれ１ターンに１度しか使用できない。①：自分の魔法使い族モンスターが相手モンスターと戦闘を行うダメージ計算時に発動できる。カード名が異なる手札の魔法カードを任意の数だけ相手に見せ、その自分のモンスターの攻撃力・守備力をターン終了時まで、見せた数×１０００アップする。②：自分・相手ターンに、手札から魔法カード１枚を捨てて発動できる。相手フィールドの全ての表側表示モンスターの効果をターン終了時まで無効にする。
ATK/1000
DEF/2800
21522601
© 高橋和希 スタジオ・ダイス／集英社
偽造防止ホログラム

Hover over the card to see the visual effect.

Yu-Gi-Oh! OCG Secret Rare Effect with CSS

Background

This project was first published in January 2021. In March 2025, I re-evaluated my past projects and found this one to be the most in need of a revamp.

Remembering Simon Goellner's amazing Pokémon Cards Holographic Effect in CSS from 2022, I decided to explore and apply his technique.

If you have any suggestions for improvements, do leave a comment on the Github Repo.

Spotlight Layer

The Spotlight layer features a white-to-transparent radial gradient. It blends with the content below using the Plus-Lighter blend mode. Plus-Lighter sums the pixel values of the top and bottom layers.

This Plus-Lighter vs Color Dodge vs Screen Output Comparison Graph compares Plus-Lighter with other similar blend modes.

Plus-Lighter can simulate a bright light even at low strength, which preserves contrast and thereby details. It does so by enforcing a value floor and allowing overexposure. The former delineates the light spot and the latter conveys brightness.

Holographic Foil Layer

In the Holographic Foil layer, a rainbow linear gradient blends with a black-white layer mask using the Color blend mode. The output has the former's hue and saturation, and the latter's lightness.

This output is then blended with the content below using the Color Dodge blend mode. Color Dodge works like a highlighter. It brightens the bottom layer based on the top layer's values. If the top layer is black, the bottom layer stays the same.

Name and Hologram Layer

The shininess of the Name and Hologram is created by applying a CSS mask to an element containing a white-to-transparent radial gradient.

Challenges

On Safari 18.2 and earlier, 2 bugs were encountered:

  1. Blending with Color failed between elements on different composition layers. Since CSS transform promotes elements to their own composition layers, CPU-heavy background position changes were used for animations instead. Bug report on Webkit Bugzilla.
  2. Elements on composition layers that underwent tiling also failed to blend. Tiling is the process by which browsers split layers into distinct regions to be rendered progressively. This issue was happening to the rainbow gradient; setting it to no-repeat solved the problem. Bug report on Webkit Bugzilla.

On the latest version of Firefox, 2 different bugs were encountered:

  1. On Intel GPUs, blending with Color Dodge wrongly output a dark color when the top layer was white and had a specific opacity. In my case, the issue occurred only at 90% opacity; sidestepping this value avoided it. Bug report on Mozilla Bugzilla.
  2. Perspective-transformed elements can appear blurry from being rendered at an incorrectly low internal resolution. To fix this, the card was made 25% larger and scaled back to the intended size using CSS transform. Bug report on Mozilla Bugzilla.

The Japanese text was meant to be real text instead of SVG images. Because browsers avoid blurring text for legibility, the small font sizes made it harsh and overly bold: Comparison of 9px text (top) vs image (bottom). Also, Chrome 117 and earlier have a default minimum font size of 10px for Japanese. The card would need to be huge to accommodate such a minimum.

Other Implementation Details

For raster images, the WebP and AVIF formats are used. To balance file size and quality, an SSIMULACRA 2 score above 90 is maintained to ensure images are visually lossless.

The Official Proxy from the Infinity Chasers announcement page is used as a reference. For fans, I also found an official Madame Verre 9/17 Cute Day Promotional Image.

Accessibility

I've tested this webpage with NVDA (Non-Visual Desktop Access) and found all text and key elements to make sense to screen-reader users.

This webpage should be compatible with major browsers released in the last year or older. The oldest browser I have available for testing is Safari 15.4, released in March 2022.

Credits