スポンサード リンク

site design 300x145 CSSを使って文字をめっちゃ強く光らせる方法何度か当サイトをご訪問下さっている方はお気づきだと思いますが、昨日当サイト(PC版)のデザインを大幅に変更致しました。

変更前はオレンジを基調とし、背景に紅葉柄を使用した秋仕様でしたが、いい加減秋も終わっただろうということで今度は冬仕様です。   このデザインの中では、クリスマスの電光装飾をイメージして以下の様な装飾表現を多用しています。s pika CSSを使って文字をめっちゃ強く光らせる方法 クリスマスっぽいデザインにしたいと思い、色々試行錯誤をする中で見つた方法です。

スポンサード リンク

基礎知識

これは、CSS3で採用された「text-shadow」というプロパティを使用しています。
(CSS3はIE9以下では対応していないため、それらのブラウザをご使用の方は普通の文字として表示されます)

 

text-shadowは文字に影をつけるためのプロパティで、以下のように指定します。

text-shadow: x方向のズレ量 y方向のズレ量 影のぼかし具合 影の色

例えば「text-shadow: 1px 1px 3px #000;」と指定すると、以下のように表示されます。
(注:IE9以下では無効)

テスト

 

応用

実はtext-shadowを利用して文字が光っているように見せる技法は、色んなサイトで紹介されています。
当サイトでも、以前から少しだけ使っていました。

ですが普通に指定した場合、光っているように見せるには少々影の色が薄すぎました。
ぼかし具合を大きな値に設定すると広範囲に影が広がる代わりに色が薄くなり、小さな値に設定すると色が濃くなる代わりに範囲が狭くなってしまいます。
以下は普通にtext-shadowで黄色の影を付けた場合の表示です。

s pika2 CSSを使って文字をめっちゃ強く光らせる方法背景が黒の場合、普通に指定しただけではぼんやりとしか影を認識できず、ディスプレイの輝度によってはほとんど見えませんでした。

スポンサード リンク

そこで何か方法は無いかと調べていると、text-shadowは複数の指定ができることが分かりました。

方法は「text-shadow: 2px 2px 2px #000 , -2px -2px 2px #440;」というように、コンマで区切って値を記述するだけです。

上記の指定値では以下の表示となります。

テスト

 

これを利用すれば光をもっと強くできるのではないかと思い色々試してみると、どうやら同じ値を複数設定した場合、色が濃くなるようです。

そして、試しに3つ程重ねてみると・・・

s pika CSSを使って文字をめっちゃ強く光らせる方法見事光って見えました!
ちなみに、1つだけしか指定しなかった場合はこんな感じ↓。

s pika2 CSSを使って文字をめっちゃ強く光らせる方法

比べると全然ちがいますね。

更に重ねる数を増やしていくと・・・

s pika3 CSSを使って文字をめっちゃ強く光らせる方法

超サイヤ人ばりに輝いています。
さすがにここまでいくと読み難いのでやりませんでしたが、重ねがけのテクニックは色々と応用できそうですね!

 

以上、ちょっと感動したので記録に残してみました。

それでは。


このエントリーをはてなブックマークに追加


この記事のトラックバック用URL