ＣＳＳでちょっと堀り文字

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


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


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

text-shadow: 0px 1px #fff;


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


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

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






・　・　・




蛇足ですが、


ちなみに、１つめのパラメータは横（左右）方向、２つめは、縦（上下）方向です。

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

こんな風に指定します。　


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

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


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

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


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

たぶん。＾＾；