CSS3でテキストシャドー(文字に影)を付ける方法｜【ネットでお小遣いを稼ぐ】の詳細。

ネット対応HP作り方

CSS3で文字に影

CSS3ではテキストシャドー(文字に影)を付ける事ができます。
「CSSでボタン作成」で説明した箇所については説明を省いています。

HTML側の記述

<a class="btn" href=""/>ＢＵＴＴＯＮ</a>

↓コピーする↓

CSS側の記述

.btn {
width: 80%;
margin: 0 auto;
padding: 10px 15px;
display: block;
font-size: 15px;
text-align: center;
text-shadow: 1px 2px 3px #CCCCCC;
background: #E4E4E4;
color: #000000;
border: 1px solid #CCCCCC;
}

↓コピーする↓

text-shadow

「text-shadow」は文字に影を付ける指定です。

「1px 2px 3px #CCCCCC;」左から順に、「X方向への距離(1px)「Y方向への距離(2px)」「影のぼかし度(3px)」「影の色(#CCCCCC)」となります。

「text-shadow: 1px 2px 3px #CCCCCC, -1px -2px -3px #CC0000」と間に「,」を付けることで複数の影を付ける事も可能です。

アドバイス

「text-shadow」はボタン型に作成したリンクだけでなく、テキストであれば何にでも影を付ける事が可能です。「p/strong/h1など」

CSS3で文字に影を付ける