pie chart

Accurate Card Styles (for anyone to use!)

Unknown*

Wihito

Land (69)

Planeswalker (22)

Artifact (20)

Creature (41)

Instant (29)


I've been wanting to implement my own custom CSS for decks for a long time, and when I noticed that card links on Tappedout have meta-data that describes their supertypes, colors and costs I decided to make them look like they do on actual cards.

This deck is a testing grounds for covering all kinds of possible card meta-data combinations, and thus also a way for me to show you what it does.

Today

It should:

  • Color all cards correctly (not tokens though, they don't have color meta-data on tappedout)
  • Add distinguishable styles to Masterpieces (Expeditions, Inventions & Invocations)
  • Display quantity in style with the cards
  • Replace flip with transform icon to all cards that transform, the icon transforms on hover
  • Replace foil icon with animated foil on the cards name and hover overlay
  • Replace alter icon with an icon that "activates" on hover
  • Replace flag icons with much nicer and round versions

All parts of this except the animated foil are vector graphics.

Plans, bugs, help and testing

See GitHub project issues for plans and bugs, you might even be able to help!

You can try testing some things yourself by commenting card links! The css works in comments as well!

Use it yourself

Copy the content here

Paste it into your decks description and you'll get the latest updates automatically. If it doesn't do anything, make sure that each code row is surrounded by empty rows. If it still doesn't do anything, you need to ask scotchtapedsleeves or yeago for coding permission.

Thanks

AbyssusDraconem for work on Invocations and preloading flip icons

Sources and links

Transform icons

Flag icons

Font

GitHub project

jsDelivr

Suggestions

Comments View Archive

Attention! Complete Comment Tutorial! This annoying message will go away once you do!

Hi! Please consider becoming a supporter of TappedOut for $3/mo. Thanks!


Important! Formatting tipsComment Tutorialmarkdown syntax

Please login to comment