css cards(※1)が面白いですね。「何が面白いのか」といわれても困るのですが、とにかくスタイルシートだけでトランプカードを作り上げているところに興味がそそられます。(最下部のリンクからダウンロードができます。)
index.html には javascript がリンクされているのですが、必要がなく削除可能です。J、Q、K は絵札と呼ばれるくらいですから絵があればもっと良いですね。でも無い分自分で、boku.jpg や mama.jpg、papa.jpg など写真から画像を作って image フォルダーに入れ、master.cssに
.card.jack {background:url(“../image/boku.jpg”);}
.card.queen {background:url(“../image/mama.jpg”);}
.card.king {background:url(“../image/papa.jpg”);}
と追記すればオリジナルのトランプが作れます(画像サイズは200x280pxです)。カードの種類で絵を変えたいときには、例えば前の部分を .card.heart.jack などに入換え、12種類の絵を準備すればでき上がりです。おっと、このままでは私の大好きなJOKERがありません。master.css に一行
.card .middle_joker { top: 110px; text-align:center; width:200px; } を加え、index.html の <br class="clear" /> の前にに次の数行を加えます。
<div class="card joker">
<div class="corner top">
<span class="number">Joker</span>
</div>
<span class="suit middle_joker">Joker</span>
<div class="corner bottom">
<span class="number">Joker</span>
</div>
</div>
ブラウザで index.html を表示し少し丈夫な紙に印刷して切り取れば、家族でどこにも無いトランプが楽しめます。切り取るにはちょっと背景が明るすぎますので、同じく master.css の15行目 #e7e7e7 部分を #000000 と真っ黒にするか分りやすい色にしたほうが良いでしょう。
というようなことが頭に浮かび、冒頭の 「面白いな」です。
(※1) http://zachwaugh.com/helveticards/index.html