RGBaでポップなイメージを！
text-shadowプロパティの影の色はRGBaで指定できる。RGBaをうまく利用してポップなエフェクトを適用してみよう。
■HTML[サンプル1]
<p>SPRING 2011</p>
まず、文字列にソリッドな色と影を指定しよう。サンプルでは「SPRING」のテキストのとおり、春らしい明るい雰囲気を表現してみた。ただこの状態ではまだ少し重たい印象だ。
■CSS[サンプル1]
p {
font-size : 100px;
font-weight : bold;
color : rgb(255, 105, 180);
text-shadow : 5px 5px 0 rgb(30, 144, 255);
text-transform : uppercase;
text-align : center; }
サンプル1の実行画面。明るい色使いだが全体的に少し重い印象だ
次に、テキストの色と影へアルファ値を設定してみよう。アルファ値を設定すると軽快な春らしいイメージになった。
■HTML[サンプル2]
<p>SPRING 2010</p>
■CSS[サンプル2]
p {
font-size : 100px;
font-weight : bold;
color : rgba(255, 105, 180, .6);
text-shadow : 5px 5px 0 rgba(30, 144, 255, .6);
text-transform : uppercase;
text-align : center; }
サンプル2の実行画面。春らしい雰囲気になった
