DN*BLOG

CSS3 – text-shadow

テキストに影を付ける事が出来ます。
text-shadowはSafariと最新のFirefoxが対応しています。

text-shadow:x y ぼかし #666;

text-shadow

text-shadowの例です。Safari、最新のFirefox(現3.5.4)で見てください。

CSSソース

.text-shadow {
	text-shadow:2px 2px 3px #666;
}

「x y」で影の方向です。
シンプルなのでわかりやすいと思います。

text-shadow

text-shadowその2の例です。Safari、最新のFirefox(現3.5.4)で見てください。

.text-shadow {
	text-shadow:4px 4px 6px #FF3366;
}

影に色を付けて、ぼかしを増やし、距離を倍にしました。
box-shadow同様、きれいな影ですね。

Return to the page