Archive of published posts on 2012.6月

text-shadowプロパティについて

Posted by specterant on 2012.06.26

CSSでテキストに影をつけられるtext-shadowプロパティについてのメモです。
現在、text-shadowプロパティが機能するブラウザについて調べた結果、以下のようです…。

・Safari 3〜
・Google Chrome 2〜
・Firefox 3〜
・Opera 9.6〜

やはり、IEはダメなんですね…。
ダメでも、IEに対応させたいのであれば、下記を参考していただけたらと。

IEでCSS3のドロップシャドウを使いたい
asamuzaK.jp : IE9で(ついでにIE7、IE8でも)text-shadow

※現在、検証してません…。今度検証してみます。検証したらまたご報告します。>自分…

そんな訳で、text-shadowプロパティの基本的な使い方を、これまた、私用でコピペできるようにメモです。

//ちなみに各オプションはデフォルト値を記述しています。
セレクタ {
	text-shadow: <X方向への距離> <Y方向への距離> <影のぼかし半径> <影のぼかし色>;
}

//<影のぼかし色>をカラーネームで指定してもOK(例えば、redとかblueなど)
セレクタ {
	text-shadow: <X方向への距離> <Y方向への距離> <影のぼかし半径> <影のぼかし色>;
}

//また、<影のぼかし色>をRGBAカラーモデルで指定してもOK(例えば、rgba(255, 255, 255, 0.5)みたいに)
セレクタ {
	text-shadow: <X方向への距離> <Y方向への距離> <影のぼかし半径> rgba(<影のぼかし色>);
}

//カンマ「,」で複数の影をつけることも可能です。
セレクタ {
	text-shadow: <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>, 
				 <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>, 
				 <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>;
}

//ちなみに<影のぼかし色>は一番最初に記述してもOK
セレクタ {
	text-shadow: <影のぼかし色> <X方向への距離> <Y方向への距離> <影のぼかし半径>;
}

そして、サンプルコード。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>text-shadow test</title>
<style>
	* {
		margin: 0;
		padding: 20px;
		font-size: 16px;
		font-family: Helvetica;
	}
	#text-shadow1 {
		text-shadow: 5px 5px 5px #000;
	}
	#text-shadow2 {
		text-shadow: #000 5px 5px 5px;
	}
	#text-shadow3 {
		text-shadow: 5px 5px 5px blue;
	}
	#text-shadow4 {
		text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5);
	}
	#text-shadow5 {
		text-shadow:
			-5px -5px 0 #ff0000, /*--- 赤(一番上)---*/
			5px -5px 0 #0000ff,  /*--- 青(二番目)---*/
			-5px 5px 0 #00ff00,  /*--- 緑(三番目)---*/
			5px 5px 0 #ffff00;   /*--- 黄(一番下)---*/
	}
</style>
</head>
<body>
	<div id="text-shadow1">text-shadowプロパティのサンプル1</div>
	<div id="text-shadow2">text-shadowプロパティのサンプル2</div>
	<div id="text-shadow3">text-shadowプロパティのサンプル3</div>
	<div id="text-shadow4">text-shadowプロパティのサンプル4</div>
	<div id="text-shadow5">text-shadowプロパティのサンプル5</div>
</body>
</html>
ちなみに、私が検証し機能したブラウザは以下です。

【Mac】
・Safari 3.2.1、4.0.5、5.1.7
・Google Chrome 19.0.1084.56
・Firefox 3.6、13.0.1
・Opera 12.00

※Safari 3.2.1は、複数設定出来ませんでした。ちなみに、一つ目の設定のみ機能してました。


【Windows】
・Safari 5.1.7
・Google Chrome 19.0.1084.56
・Firefox 3.6.20、12.0
・Opera 11.64



詳しくは、下記の参考にさせていただいたサイトを見ていただけたらと。

参考にさせていただいたサイト
text-shadow-CSS3リファレンス
CSS3 text-shadow box-shadow の使い方 | CSS Lecture
text-shadow|プロパティ|CSS HappyLife ZERO

No Comments