• RSS

[CSS]テキストに影を落とすCSS3 のプロパティ「text-shadow」

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

テキストに影を落とすCSS3 のプロパティ text-shadow についてまとめました。

前回紹介させていただいた、ボックスに影を付ける box-shadow プロパティと使い方は似ています。

text-shadow の記述方法

以下、text-shadow の基本的な使い方です。
p	{
	-moz-text-shadow:5px 5px 5px #ccc;
	-webkit-box-shadow:5px 5px 5px #ccc;
	box-shadow:5px 5px 5px #ccc;
}
※Firefox向け、Safari や Chrome向けのベンダープレフィックスも付けておきます。

text-shadow の値

text-shadow の値は以下のようになります。
1番目  水平方向に指定。1pxで右方向に影、-1px で左方向に影です。
2番目  垂直方向に指定。1pxで下方向に影、-1px で上方向に影です。
3番目  ぼかしの半径を指定。
4番目  色を指定。


text-shadow のサンプル

以下、text-shadow を使った簡単なサンプルです。

text-shadow のサンプル1

.box	{
    /*ボックスのデザイン*/
    padding:15px;
    border:1px solid #ccc;
    text-align:center;
    font-size:22pt;
    font-weight:bold;
}

.box p	{
    /*text-shadow*/
	-moz-text-shadow:5px 5px 5px #ccc;
	-webkit-text-shadow:5px 5px 5px #ccc;
	text-shadow:5px 5px 5px #ccc;
}
水平方向、垂直方向ともに 5px と「正」の値なので、影の方向は 右下になります。
ぼかしの距離は 5px にして色は #ccc でグレーの影を落としている、という感じです。

text-shadow のサンプル1



text-shadow のサンプル2

今度は影の方向を内側(垂直,水平方向を負の値)にして、テキストの内側に影を落とします。
※分かりやすいように、ボックスの背景とテキストの色をグレーにします。

.box	{
    /*ボックスのデザイン*/
    padding:15px;
    text-align:center;
    font-size:22pt;
    font-weight:bold;
    color:#777;
    background:#313131;
}

.box p	{
    /*text-shadow*/
	-moz-text-shadow:-1px -1px 1px #000;
	-webkit-text-shadow:-1px -1px 1px #000;
	text-shadow:-1px -1px 1px #000;
}
水平方向、垂直方向ともに -1px と「負」の値なので、影の方向は 左上になります。
ぼかしの距離は 1px にして色は #000 で、微妙に黒の影を落としています。

text-shadow のサンプル2



text-shadow のサンプル3 – カンマ区切りで複数指定

box-shadow 同様に値をカンマ区切りで複数指定することができます。

.box	{
    /*ボックスのデザイン*/
    padding:15px;
    text-align:center;
    font-size:22pt;
    font-weight:bold;
    color:#777;
    background:#313131;
}

.box p	{
    /*text-shadow*/
	-moz-text-shadow:-1px -1px 1px #111, 1px 1px 1px #000;
	-webkit-text-shadow:-1px -1px 1px #111, 1px 1px 1px #000;
	text-shadow:-1px -1px 1px #111, 1px 1px 1px #000;
}
以下のサンプルのように、テキストの左上と右下に黒色の影を落とすことができます。

text-shadow のサンプル3



IE8 以下への対応について

text-shadow はCSS3 のプロパティなので、IE6、IE7、IE8 の下位バージョンのIE では動きません。

IE下位バージョンへの対応については、IE-CSS3.htc ファイルを使うと実現できることはできますが、影の調整などがかなり難しいです。
(わたしは断念したのでIEでは text-shadow は使わないです。)



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

コメント

Webmemo » 0410−CSS3まとめ にコメントする コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください