Monopoly Deal Cards with CSS3

I've been learning some CSS techniques. And I thought it would be good to continue using CSS on something I can show to others. So, here's a rough attempt to render Monopoly Deal cards with CSS3.

Thanks to the creative team of Edwin and Renee for teaching me and answering some of my questions. Also thanks to Sofia for letting me borrow some Monopoly Deal cards. And the Hong Kong edition looks great too.

What's next? Can we add some JavaScript and make an online game with this?

WARNING: Only tested on Firefox 20+.

My apologies for not explaining the CSS behind this. Perhaps, if I get enough time (and requests), I'll write about it. Besides, I'm sure I'm not the first to attempt this. For now, use your favorite HTML/Browser tool to checkout the CSS behind it.

4

4

4

Boardwalk

4

(No. of properties owned in set)			RENT
1				3
1 2				8
FULL SET

New York
Avenue

2

(No. of properties owned in set)			RENT
1				1
1 2				3
1 2 3				5
FULL SET

North
Carolina Avenue

4

(No. of properties owned in set)			RENT
1				2
1 2				4
1 2 3				7
FULL SET

太平山
Victoria Peak

4

(No. of properties owned in set)			租金 RENT
1				3
1 2				8
全套 FULL SET

DISCLAIMER: I still don't know how to play the game.

Update (Dec 2013): Thanks to Jason for asking. Here's an action card.

3

ACTION CARD SLY DEAL Steal a property from the player of your choice. (Cannot be part of a full set.) Play into center to use.

3