Firefox 3.5のCSS新対応：text-shadow、-moz-box-shadow、-moz-border-image、-moz-column-rule

エ・ビスコム・テック・ラボ
2009-08-24 15:42:01
本連載ではFirefox 3.5が対応したCSSの新機能を紹介しているが、今回は文字などに影をつける機能や、1枚の画像で枠を作る機能、段組みの区切り線のデザインを指定する機能を検証する。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　前回の「Webフォント、メディアクエリ、セレクタ編」に続き、Firefox 3.5が対応したCSSの新機能についてまとめていく。

　今回は、文字などに影をつける機能（text-shadow、-moz-box-shadow）や、1枚の画像で枠を作る機能（-moz-border-image）、段組みの区切り線のデザインを指定する機能（-moz-column-rule）を見ていきたい。

文字に影をつける text-shadow

　text-shadowプロパティをサポートしたことにより、文字に簡単に影をつけることができるようになった。text-shadowプロパティはCSS 3の草案「Text」で提案されている。

　たとえば、次のサンプルは青色の文字にグレーの影をつけて表示したものだ。なお、青色の文字は前回の記事で紹介したWebフォント（ダウンローダブルフォント）を利用して表示している。

Firefox 3.5の表示 Firefox 3.5の表示 
h1{
text-shadow: 5px 5px 10px gray;
}

Cascading Style Sheets
※ブラウザで表示を確認する

参照記事

ボックスに影をつける -moz-box-shadow

  • 新着記事
  • 特集
  • ブログ