I do not like this painting, Charlie.
- Frank Reynolds 📺
It's smug aura mocks me.
Technical
The holofoil effect is done using a technique involving mix-blend-move as described by Jonny Scholes in Fudging masks using CSS blend modes along with the mask-image property. The holographic rainbow card name effect is done using the background-clip method described in the CSS-Tricks article How To Do Knockout Text and animating the background-position.
In some devices, you may notice that the size of the card is fairly large. This is because some monitors don't have a high enough pixel density to accurately depict the finer details of the card. If I were to scale it down to around the size of an actual Yu-Gi-Oh card which is 8.6cm x 5.9cm (3.25 inch x 2.25 inch), most of the text will become a messy and illegible blob. I figure that a width of 820 physical pixels gives a decent result where the strokes of the characters are crisp and clean. A script resizes the card appropriately on load based on the pixel density of the monitor.
The effect text is actually an SVG image. In a previous version, it consists of real selectable text but in devices where the operating system or browser enforces a minimum font size, the text becomes larger than intended and this messes up the layout. The ruby text was particularly susceptible to this problem due to its very small font size. It is not possible to scale the rest of the card up so that the smallest font stays above the minimum font size. For example, I've read that Chrome in CJK and Thai locale have a default minimum font size of 12px. The card would need to be around 4x bigger to ensure that even the smallest text is at least 12px big.
A trick I tried to bypass this restriction was by multiplying the font size by 4 and then scaling it down to a quarter of its size using CSS transforms. While this method works, this causes another problem to occur in Safari. Using this trick in Safari causes the text to become noticeably thinner and jarring outline jittering to occur during animations. I think this might be due to subpixel antialiasing being disabled on hardware-accelerated text as this problem doesn't occur if I scale using the zoom CSS property instead. The zoom property, being non-standard, has its own set of problems so I can't use that either.
Since the previous idea failed, I tried making the entire thing an inline SVG and using SVG's text element to render the text. Unfortunately, an issue occurred where the letter spacing is different when displayed in the browser compared to my vector image editing programme, Inkscape. Given more time, I can fix this but at this point I just want to get it over with. Thus I converted the text into SVG paths, embed the SVG image using the img element and set the actual text as the img element's alt attribute. The tradeoff with using this approach is that the text is now no longer user-selectable, I can't take advantage of font hinting and the file size of the webpage is bigger.
On Safari you may encounter a browser bug where the horizontal line of the holofoil stops moving after a hard refresh, just refresh the page again and it should return to normal.
I've tested this project in Firefox and Chrome on Windows 10 and Android, and Chrome and Safari on MacOS Mojave. I've also tested it on monitors with device pixel ratio of 1x, 2x and 3x. It definitely doesn't work on Internet Explorer 11. I wouldn't say it's particularly performant but it runs at an acceptable frame rate on a 2015 MacBook Pro and an 2016 Asus Zenfone 3 although expect warm devices and spinning fans. The total page weight on load is around 2MB gzipped. I did not bother with responsive images but I did subset the font files and optimize the images.
Design
I use the official proxy as well as my own real life secret rare copy as reference. The official proxy is from the Infinity Chasers announcement page. GIMP is used for image editing.
For the card stock, I use Icycatelf's YGO Series 10 Master PSD as my base. I adjusted the brightness, contrast and saturation to match the colors in the official proxy. Next I scaled up the resolution of the official proxy using waifu2x-caffe and transplanted parts of it onto my base cardstock to make it more convincing. By transplant, I basically copy-pasted parts of it and use the smudge tool to blur the edges of the transplanted section. This is most notable on the pillars on the left and right of the artwork and also the space left of the stars.
For the artwork, I use the high resolution full artwork which I think is created by Yugi-Master, not too sure on who's the original artist. Part of the artwork is affected by the holofoil while the other is not so I have to separate the two parts. I decreased the brightness and increased the contrast of the background. The former is to create a darker image so that the shiny parts will stand out more while the latter is to restore the intensity of the highlights so that the image doesn't look dull and washed-out. For the cutout, I increased the brightness, contrast and sharpness of the image to make it stand out more. This difference in brightness of the background and cutout also produces a mild parallax effect during the animation.
The design of this webpage is based on this Madame Verre 9/17 Cute Day Promotional Image.
Translation
| Name | Witchcrafter Mademe Verre |
|---|---|
| Attribute | Light |
| Level | 8 |
| Number | DBIC-JP019 |
| Type | Spellcaster/Effect |
| Effect | During damage calculation, if your Spellcaster monster battles an opponent's monster (Quick Effect): You can reveal any number of Spells with different names in your hand, and if you do, your battling monster gains 1000 ATK/DEF for each card revealed, until the end of this turn. (Quick Effect): You can discard 1 Spell; negate the effects of all face-up monsters your opponent currently controls, until the end of this turn. You can only use each effect of "Witchcrafter Madame Verre" once per turn. |
| Attack | 1000 |
| Defence | 2800 |
| Passcode | 21522601 |
| Copyright | ©Kazuki Takahashi, Studio Dice/Konami |
Thanks
Thanks you to Bushin from the Yugioh Card Maker forums for making avilable the fonts.
- Yu-Gi-Oh! DFG Leisho 4 belongs to DynaLab Inc.
- FOT-Rodin Pro belongs to Fontworks Japan Inc.
- Yu-Gi-Oh! Matrix Small Caps 2 belongs to Emigre Graphics.
- StoneSerif-Semibold belongs to Adobe Systems Inc.
The card stock and star symbol is from Icycatelf's YGO Series 10 Master PSD. Modified it from the original.
The attribute symbol is made by Falzar FZ and sourced from Yugipedia wiki. Modified it from the original.