CSSでちょっと堀り文字



メニューやボタンに使うテキストを、「ちょっと掘った感じ」にしたいときに使うCSSのメモ。


実際は、テキストに影をつけるだけです。
イメージ(画像)で作れば良いんでしょうけど、商品名なんかの場合、どんどん変えたかったり、DB+PHPなどで、生成したりしたいときありますよね。変更の多いお客様のときも重宝しますね。


◆文字の色が暗いときは、明るい色を下に。(例では白 #fff)

text-shadow: 0px 1px #fff;


◆文字の色が明るいときは、暗いを上に。(例ではグレー #333)


text-shadow: 0px -1px #333;

陰の色も、真っ白よりちょっと暗めにした方が良い場合など、調整してみてくださいませ。






・ ・ ・




蛇足ですが、


ちなみに、1つめのパラメータは横(左右)方向、2つめは、縦(上下)方向です。

実は、3つ目のパラメータがあって、ぼかし具合が指定できます。

こんな風に指定します。 


  text-shadow: 1px 1px 3px #000; (右下にぼかし3の黒い影)

これだと、掘り文字 じゃなくて、影(ドロップシャドウ)になります。


さらに、カンマ区切りで同じテキストにいくつでも追加できるのですが…ややこしいなぁ。

  text-shadow: -1px -1px  #aaa, 1px 1px 3px #444;


これで、左上に白っぽい輝き、右下にぼかし3のグレーの影 が出るはずです。

たぶん。^^;

コメント

このブログの人気の投稿

グーグルグループのメーリングリストの返信先が個人になってしまう

Googleカレンダー埋め込みの詳細をメモる。

google ドライブが windowsのエクスプローラーで検索できない!?