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

エ・ビスコム・テック・ラボ
2009/08/24 15:42

本連載ではFirefox 3.5が対応したCSSの新機能を紹介しているが、今回は文字などに影をつける機能や、1枚の画像で枠を作る機能、段組みの区切り線のデザインを指定する機能を検証する。

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

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

参照記事

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

記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文（必須） :
  • 新着記事
  • 人気記事
  • 特集
  • ブログ
  • 話題のタグ
iPod touch Mozilla Flash Windows java オープンソース Windows 7 Apple Tips Microsoft Windows XP Database 開発環境 ソフトウェア開発 Firefox 3 小技 脆弱性 Opera javascript マイクロソフト クラウド インストール Safari WebKit Webデザイン 仮想化 プログラミング言語 CSS Off Topic iPhone 3G Mac OS X RIA linux アプリケーション Firefox UI ブラウザ Ajax セキュリティ Webサービス iPhone google Windows Vista Internet Explorer php データベース Chrome OS リファレンス HTML
  • 話題のタグを見る »