CSS3で文字が彫られているように見せる

MacやWindowsでもiTunesなどを使っていると、このように（↓）文字が彫られているような装飾がなされていることがある。

これをCSS3で実現しようというのが今回の内容。

まずは、背景を少し暗めの色にする。
background:#aaa;

そして、文字色は濃い灰色にする。
color:#333;

で、下に明るい影・上に暗い影をつける
text-shadow:#fff 0px 1px 2px, #000 0px -1px 1px;

これを使うと、

CSS3

というようなのが実現できる。

ついでに、:hoverでちょしてみると、【注：「ちょす」とは「いじる」という意味の方言である】

CSS3

こんなことも可能（マウスを乗せると青く点灯する）。

＊Webkit系のブラウザで動作確認済み

【サンプルコード】
●最初の例
background: #aaa; color: #333333; margin: 10px; padding: 10px 20px; text-shadow: #fff 0px 1px 2px, #000 0px -1px 1px;
●:hoverに設定するコード例

color:#2865A6; text-shadow: #fff 0px 1px 2px,#007BFF 0px 0px 3px, #000 0px -1px 1px;