~ モバイル版(スマートフォン)の操作 ~
左右にスワイプすると、前後の投稿へ移動します。
← 前の投稿 | 次の投稿 →
日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年5月22日木曜日

text-shadowで文字に明るい影を付けると輝いて見える


スポンサーリンク

スタイルシートの text-shadow を使用することで、文字に影を付けることができます。



CSS:text-shadowを使用し、文字に影や縁取りをする | raining
http://raining.bear-life.com/css/text-shadow%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%80%81%E6%96%87%E5%AD%97%E3%81%AB%E5%BD%B1%E3%82%84%E7%B8%81%E5%8F%96%E3%82%8A%E3%82%92%E3%81%99%E3%82%8B


黒い影

例えば、次のように記載すると文字の右下に黒い影を付けることができます。

CSS : 

text-shadow: 1px 1px 1px #000000;

結果 : 

 テスト用の文字列


明るい影

逆に、暗い背景のページで明るい文字に明るい影を付けると次のようになります。

CSS : 

text-shadow: 0px 0px 8px #ffffff;

結果 : 


 テスト用の文字列



文字が輝いて見えるようになりました。

但し、上の例だと少しわかりづらいので、同じ text-shadow の CSS をもう少し広範囲に適用してみました。

text-shadow: 0px 0px 8px #ffffff; を広範囲に適用


text-shadow で効果を付けることで、今までは画像を使うことでしか表現できなかったこともテキストデータで表現できるようになります。


スポンサーリンク

コメントを投稿

コメント投稿機能について