Tuesday, July 9, 2013

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

3 comments:

  1. I am trying to make an expansion of Monopoly Deal for home use since my family loves playing. I plan on using your cards as a template. Any chance you could provide a template for an Action Card? They have a circle in the middle.

    http://3.bp.blogspot.com/-guFE5S5dGP4/TxkAVLl2mJI/AAAAAAAAEG0/OjWr4l1VGmw/s1600/monopoly+deal+cards.jpg

    I have dozens of ideas for new cards but limited ability to create them! Looks like I need to either learn CSS or Photoshop!

    Thanks!

    ReplyDelete
    Replies
    1. Thanks for asking Jason. I've updated my post to include an action card. It's a bit rough though. Good luck on your expansion of Monopoly Deal for home use.

      Delete
    2. Beautiful, thanks!

      PS - You really should learn to play the game!

      Delete