このページの本文へ

text-shadowで作る「見出し」デザインのアイデア (2/4)

2011年02月01日 11時00分更新

文●菊池 崇

  • この記事をはてなブックマークに追加
本文印刷

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の実行画面。春らしい雰囲気になった

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く