CSSのみで袋文字を実現する - CSS3で遊んでみる3

カテゴリ:CSS3関連 2010年1月29日 10:46

袋文字のサンプル画像

今回も CSS3 で遊んでみるシリーズです。
"今回のネタは、CSS3 で袋文字を作る"、です。

いちおう、WebKit では -webkit-text-strokeというそのものズバリなプロパティがありますが、そもそも WebKit しか対応していないこと、また微妙に縁がテキストにかぶるので(現状のままだと)使いづらい、というのがあります。

今回のネタは、見栄えはよくないですが、いちおう IE にも対応させてあります。
ただ、やっぱりネタなので実践で使うには「?」ですが、こんなこともできるよーという感じでご覧下さいw

ちなみに、色々なサイズを見られるように JavaScript を使って境界線の太さを調整できるようにしてあります。また、使う人がいるか分かりませんが 設定したものを CSS として書き出すようにしてあります。

▼EntryMore▼

解説

今回のネタは、ズバリtext-shadowです。
実はこのプロパティ、値を複数指定してシャドウの部分をいくつも作れるのです。
それを利用して、円状に微妙にずらしたシャドウをいくつも指定することで袋文字を実現している、というわけです。

なので見てもらうと分かりますが、かなりの量のコードを吐きますw
実際これを組み込むのは骨だよなーと思ったのが「ネタ」という位置づけにした理由です。
いちおう JavaScript で自動で生成しているのでそれをコピペすればそれほど大変ではありませんが、負荷的にどうなのかとか、そのへん一切考えていないのでやはり微妙かなと。
ただ、"text-shadow の値を複数指定する" というのは意外と使い道があったりするのかなーというのもあって、今回ネタを考えてみました。

それといちおう、filter プロパティを使って IE にも対応させています。 ただ、正直 IE での表示はきれいなものとは言えませんw なので使うときは自己責任で・・・。

この記事のカテゴリー一覧を見る⇒CSS3関連

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/174