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

エ・ビスコム・テック・ラボ
2009-08-24 15:42:01
  • このエントリーをはてなブックマークに追加

 前回の「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

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