【CSS3】text-shadowを使って文字に様々な影を付けてみよう!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は、CSS3のtext-shadow
プロパティを使って、
文字に様々な影を付けてみたいと
思います。

text-shadowの影の位置の数値を変えていく
ことで、様々な表現をすることが出来ます。

text-shadowの設定は

text-shadow:(横方向のずれ)(下方向のずれ)(ぼかし具合) (影の色);

という順番になっています。
カンマ「,」区切りで複数指定することが出来ます。

では、text-shadowのサンプルをいくつかご紹介します。

コードはこちらでも見ることが出来ます。
CSS3 text-shadow Effects

text-shadow①

textshadow1
影の長さが長めで躍動感ある表現になってます。

text-shadow②

textshadow2
背景を暗めの色にすることで、
文字が浮かんでるような効果が出ますね。

text-shadow③

textshadow3
文字の内側に影が付いているので奥行きがあるように感じますね。

text-shadow④

textshadow4
複数の影を設定して表現しています。

こちらにデモページを設定しましたので
良かったらご確認下さい。
デモページ

では、また来週お会いしましょう。

●3年ぶりに帰ってきた「藤田哲也の個別コンサルティング」

 ⇒ http://www.japan-forum.jp/sp/kojin.htm

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ