blog.yusukenakanishi.com

Saturday, December 20, 2008

Merry Christmas CSS

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でサイトのロゴの部分に使っておられます。

tackback(0)

comment (6)

画像の代替テキストでいいよ!w

> ユースケ さん
ひどい!結構な制作時間かかったのに!
途中で何のためにやってるのかわからなくなりましたよ。。
<span>タグだらけだし何なんでしょうねこの技術。
おもしろいというだけではリスキーな感じです。勉強になりました。

かわいいーと素直に思いましたが・・・

> ノグマイ さん
確かにおもしろいCSSでの表現ではありますよねー。

おもしろいっすよー。これ!見えます、見えますww

> わんだ さん
喜んでもらえて何よりですw
サンタさんの表情に苦労しましたよーw
ま、何にしろ仕事では使うことないと思いますが。。

comment a post




使用できるXHTMLタグ:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>