ホーム>HTMLリファレンス(アルファベット検索)>text-shadowプロパティ
text-shadow プロパティ …文字に影をつける
使用プロパティ
|
text-shadow: 値; |
対象となる
要素 |
すべて |
継承 |
しない
|
値 |
色(影の色)、1つ目の長さ(横方向の位置)、2つ目の長さ(縦方向の位置)、3つ目の長さ(影のぼかし範囲) |
|
|
解説
text-shadow プロパティを使えば、テキストに影を付けることができます。
影の色を以下で説明するそれぞれの長さの前後に指定します。
1つ目の長さの値は、影をテキストの右側へずらす横方向の長さを指定します。マイナスの値を指定すると、影をテキストの左側へずらすことができます。
2つ目の長さの値は、影をテキストの下側へずらす縦方向の長さを指定します。マイナスの値を指定すると、影をテキストの上側へずらすことができます。
3つ目の長さの値は、影のぼかし範囲を指定することができます。(省略すると影にぼかしは付かないで表示される)
それぞれの値を半角スペースで区切り、複数指定したい場合は「,」(カンマ)で区切り指定します。
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
p.sample1 {
text-shadow: 5px 5px 3px #aaaaaa ;
}
p.sample2 {
text-shadow: 5px 5px 3px #aaaaaa, -5px -5px 3px #aaaaaa;
}
</style>
</head>
<!--ページの本文-->
<body>
<p class="sample1">home page zero ガイド</p>
<p class="sample2">home page zero ガイド</p>
</body>
</html> |
|
[ブラウザでの表示例(※text-shadow プロパティに対応している Safari にのみ効果が表示されます)]
HOME PAGE ZERO ガイド |
home page zero ガイド
home page zero ガイド
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他