ホームページ・Web制作
CSS3の知識・困った解決のページ

テキスト文字に影をつける

テキスト文字に影をつける例

2色

Sample サンプル

テキスト文字に影をつけるコード

2色

#sample {
padding: 1em;
background: whitesmoke;
text-align: center;
font-size:200%;
text-shadow: aqua 10px 10px 30px,red 5px 5px 3px;
}

解説

CSS3では文字に影を設定することができます。

色の指定のあとのひとつ目の値は、右方向へのずらし、ふたつ目は下方向へのずらし、3つめはぼかす範囲の値です。

作成日: