CSS3はブラウザの進化とともに昨今では様々なブログや技術系のメディアなどで取り上げられるようになってきました。
今回は,CSS3なのですがCSS2.text-shadow
プロパティについてフォーカスします。
すでにプロパティの名前から何ができるかは予想がつきます。ただ,
text-shadowプロパティの記述方法
まずは,text-shadow
プロパティの記述方法ですが,
セレクタ {
text-shadow: ぼかし色 X方向への距離 Y方向への距離 ぼかしの距離
}
- ぼかし色
- ぼかし色はRGB,
色名にて指定が可能。 #000
はRGBの黒だが,black
でも指定することが可能。ぼかしの色は,text-shadowプロパティの値として一番最初に記述しても, 一番最後に記述しても同じ結果になる。 - X方向への距離
- 右へ陰の距離を指定する。プラスの値だと右方向へ,
マイナスの値だと左方向へ陰が移動する。単位はpxでもemでも使用可能。 - Y方向への距離
- 上下方向への陰の距離を指定する。プラスの値だと下方向へ,
マイナスの値だと上方向へ陰が移動する。単位はpxでもemでも使用可能。 - ぼかしの距離
- 値が大きくなれば,
ぼかし具合が大きくなる。逆に値が小さいくなれば, ぼかし具合は小さくなる。単位はpxでもemでも使用可能。ぼかしの距離が未記述の場合, ぼかしは適用されない。
例えば,
リスト1 text-shadowプロパティを用いたサンプル:sample-simple.
h1{
font-size: 40px;
text-shadow: gray 1px 2px 1px;
}
h1{
margin: 40px;
}
text-shadowプロパティをサポートしたブラウザでは,
text-shadowプロパティは実践的な使い方/可読性の向上
一般的に,
つまり,
例えば,
リスト2 可読性を考えたサンプル:sample-pale.
html{
background-color: #BBfff6;
font-family: Verdana, sans-serif;
}
p{
margin: 40px;
font-size: 40px;
color: #fff;
}
p#with-text-shadow{
text-shadow: black 1px 1px 1px;
}
text-shadowプロパティをサポートしたブラウザでは,
text-shadowプロパティの実践の使い方/アウトライン
text-shadowプロパティを以下のように指定することで陰を複数つけることができるようになります。
リスト3 影を複数つけたサンプル:sample-multiple.
h1{
color: #000;
font-size: 40px;
text-shadow: #green 6px 6px, #red -12px -12px, #yellow 15px 15px;
}
h1{
margin: 40px;
}
text-shadowプロパティをサポートしたブラウザでは,
これを利用すると文字にアウトライン
リスト4 文字にアウトライン
h1{
color: #fff;
font-size: 40px;
text-shadow: #black 0px -1px, #black 1px 0px, #black 0px 1px, #black -1px 0px;
}
text-shadowプロパティをサポートしたブラウザでは,