カテゴリー:
CSS
タグ:
 css text-shadow

このエントリーをはてなブックマークに追加
更新日時:
2013年02月18日(月)
作成日時:
2013年02月18日(月)

前の記事 / 次の記事

text-shadowを使うと文字に影を付けられる。

影がつくと言うよりも一つの文字が複数の表示位置を持てるようになることによって
結果として影が付いたように見える。

.shadow{
  text-shadow: 2px 4px 2px rgba(0,0,0,0.5);
}

元々の文字から指定された値だけずれた位置に表示される。

1番目の値は、 右方向への距離
2番目の値は、 下方向への距離
3番目の値は、 ぼかしの程度
4番目の値は、 影の色とその透明度

また、複数の影を持たせることが出来る。

.shadow{
  text-shadow: 
    2px    4px 2px rgba(0,   0,   0,   0.5),
    4px  204px 2px rgba(255, 0,   0,   0.6),
    8px  404px 2px rgba(0,   255, 0,   0.7),
    16px 604px 2px rgba(0,   0,   255, 0.8);
}

サンプルは、ない。