_X_y_z_のプログラム開発日記とか備忘録だとかCSSだとか。

yaxyz
最近ウェブサイトの方を更新したのでついでに紹介します。ちなみに管理人はこの表現が結構好きだったりします。
彫ったように見えるのは管理人だけかも知れませんが…

主にCSS3のtext-shadowを使うのですが、ここは色が関係してきます。細かいことはyaxyzの方で確認すればわかると思います。

まず、背景は薄すぎず、濃すぎず、です。濃いのは特にやめた方が良いかも知れません。
次に文字色を背景より濃い色にします。
次にCSS3のtext-shadowプロパティで

ul#nav li a{
  text-shadow:0 1px 0 rgba(230,230,230,.7);
}

のように指定します。簡単です。

text-shadowプロパティの値は一つ目、二つ目の値を変えると彫ったように見えなくなってしまうのでいじっても仕方がありません。
三つ目の値は好みです。1pxくらいでも良いと思います。そっちの方が綺麗に見える場合あり。
rgbaの部分は十六進数指定でもOKですが、Alpha値を指定したいときはrgbaです。背景にフィットさせるなら、Alpha値を指定した方がより綺麗に見えるかと思います。rgbの各値は背景に似た、薄い色を使うとよりフィットして綺麗に見えます。

難しいことはやってません。簡単です。