text-shadow(css3)を使って浮かんだようなエフェクトをつけよう！

はじめに

カスタマイズやテンプレートご利用の方へ！
★記事内で紹介しているカスタマイズやテンプレートはアメブロの仕様変更やブラウザによって正しく表現されない場合がありますので、編集前にメモなどにバックアップをとるなどの対処をオススメ致します。(全てのブラウザでの確認はしていない場合があります)

★ご質問などは、皆さんで共有できるように該当記事のコメ欄かメッセからお願いします。

★ご質問などの返事が遅れる場合がありますがご了承下さい。

text-shadowで作るエフェクトについて

CSS3にてテキストに影を付けるtext-shadowプロパティですが、これを利用して単純な「影」としてだけではなく、様々なエフェクト効果を表現できるので紹介してみたいと思います。

またtext-shadowはどちらかと言えば英語圏の字体のほうがカッコイイのは否めませんが、それは工夫次第で素敵にオシャレに使いたいものです。

背景色とテキスト色の相性などもあり、「使用したのに解りづらい」「イメージと違う」なんてことはよくある事なので、色々と色の組み合わせを試してみるのも楽しいので挑戦してみましょう！
参考にどうぞ→カラーコード一覧

また、テキストを太字<strong>～</strong>やテキストサイズ<font size="数字">～</font>で大きく太くしたほうが解りやすいかもしれません。

※（なお、以下の記事はCSS3に対応したブラウザを対象にしたもので、ブラウザによっては動作しない場合がありますのでご注意ください）

text-shadowのプロパティの基本

.title {
text-shadow: [X] [Y] [B] [C];
}

・「.title」は任意の箇所に変更※最下部にtitle一覧サンプルあります。
・X：水平方向の距離
・Y：垂直方向の距離
・B：影のぼかしの半径
・C：影のカラー

サンプル１

サンプル１CSS

.title {
background: #666;
color: #000;
text-shadow: 0px 1px 1px #fff;
}

サンプル２

サンプル２CSS

.title {
background: #ccc;
color: #ccc;
text-shadow: -1px -1px white, 1px 1px #333;
}

サンプル３

サンプル３CSS

.title {
background: #ccc;
color: #ddd;
text-shadow: 1px 1px white, -1px -1px #444;
}

サンプル４

サンプル４CSS

.title {
background: #fff;
color: #000;
text-shadow: gray 2px 2px 5px;
}

適用させたい箇所title一覧サンプル

/* ▼全体通常文字▼ */
.skinTextColor,.skinBaseTextColor,.skinBlock,body

/* ▼全体リンク文字▼ */
.skinAnchorColor,.skinBaseAnchorColor,.skinBlock a,a

/* ▼skinTitle ブログタイトル文字▼ */
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus

/* ▼skinDescription ブログの説明文字▼ */
.skinDescription

/* ▼skinArticle 記事エリア▼ */
.skinArticle

/* ▼skinArticleHeader 記事タイトルエリア▼ */
.skinArticleHeader

/* ▼skinArticleBody 記事本文エリア▼ */
.skinArticleBody