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 as 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 dark noise texture over 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 on an element containing a white-to-transparent radial gradient.

Challenges

On Safari 18.2 and earlier, 2 bugs were encountered:

  1. Blending with Color fails between elements on different composition layers. Since CSS transform promotes elements to their own composition layer, CPU-heavy background position changes were used for animations instead. Bug report on Webkit Bugzilla.
  2. Elements on composition layers that underwent tiling also fail to blend. Tiling is when browsers split layers into distinct regions to be rendered progressively. This issue was happening to the rainbow gradient, setting it 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 outputs a dark color when the top layer is white and has a specific opacity. In my case, the issue occurs only at 90% opacity, sidestepping this value avoids the issue. 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 texts were meant to be actual text instead of SVG images. Because browsers avoid blurring text for legibility, the small font sizes made them harsh and overly bold: Comparison of 9px text (top) vs image (bottom). Also, Chrome 117 and earlier have a 10px minimum font size default 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 SSIM score above 0.99 is targeted.

The Official Proxy from the Infinity Chasers announcement page is used as 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 non-screen users.

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

Credits