Demoを見る

もう年内は書かないと言ったのですが、24 waysさんにA Festive Type Follyという面白そうな記事があったのやってみました。後、もっと前にRomán CortésさんがHomer CSSというのをやっていたのを思い出しプラスアルファして上記のリンクに。

以下のように汚いソースを書き、CSSのpositionプロパティを使って絶対配置してるだけなんですねぇ。

タイトルロゴのHTML

<div id="labs-01">
<p><a href="/"><em class="word-01">★
<span>★
<span>★</span></span></em>
<em class="word-02">M
<span>e
<span>r
<span>r
<span>y</span></span></span></span></em>
<em class="word-03">Christmas</em>
<em class="word-04">2008</em>
<em class="word-05">★
<span>★
<span>★</span></span></em></a></p>
</div>

Merry Christmas：サンタクロースのHTML

<div id="labs-02">
<p><a href="/"><em class="word-01">★
<span>★
<span>★</span></span></em>
<em class="word-02">M
<span>e
<span>r
<span>r
<span>y</span></span></span></span></em>
<em class="word-03">C
<span>h
<span>r
<span>i
<span>s
<span>t
<span>mas</span></span></span></span></span></span></em>
<em class="word-04">2
<span>0
<span>0
<span>8</span></span></span></em>
<em class="word-05">★
<span>★
<span>★</span></span></em></a></p>
</div>

使用したCSSはこちら

Safariで見ると画像のように見えますね！サンタクロースは飽きてきたのでクオリティが低いですが見えますよね？やってみたかっただけなので実用的でないとか画像のaltでいいという突っ込みは受け付けません。ではでは、よいクリスマスを！

追記

IE6とMacのSafariで表示が上手くされてないですね。。
例としてはjontangerine.comでサイトのロゴの部分に使っておられます。