立体化(その１)

Nikon D200+Ai AF Zoom Nikkor 24-85mm F2.8-4D
久しぶりにスキン編集です。
今回は、メニューバーやコメント欄の立体化についてです。
比較的分かりやすいメニューバーの立体化について紹介します。



　　
■　まず、私のスキンのメニューバーの部分のCSSを紹介します。

DIV.MNTTL {
border-top:1px #595857 solid;
border-left:1px #595857 solid;
border-bottom:1px #2b2b2b solid;
border-right:1px #2b2b2b solid;
PADDING : 2PX 10PX;
MARGIN : 40PX 0PX 10PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND:#432f2f;
FONT-FAMILY : TAHOMA;
LETTER-SPACING : 2PX;
}

黄色い部分が立体化させている文字列です。
この４行によって、top（上部）とleft（左側）に１PX分の灰色の線、bottom（下部)とright（右側）に１PX分の黒っぽい線を描いています。
こうすると、その部分が浮き上がって見えます。
ちなみに、#595857(灰色)と#2b2b2b(黒っぽい色)を入れ替えると凹んで見えます。


■　なお、これだけだとカレンダーのタイトルバーが立体化されませんから、カレンダーの部分も以下のように修正します。

DIV.CAL_TOP {
border-top:1px #595857 solid;
border-left:1px #595857 solid;
border-bottom:1px #2b2b2b solid;
border-right:1px #2b2b2b solid;
PADDING : 2PX;
PADDING-LEFT : 10PX;
MARGIN-TOP : 25PX;
MARGIN-BOTTOM : 10PX;
BACKGROUND : #432f2f;
FONT-FAMILY : TAHOMA,;
LETTER-SPACING : 2PX;
}

黄色い部分が立体化させている文字列です。


■　さらに、カレンダーの今日の部分を朱色にして凹ませるために、以下の修正を加えています。

.CAL_TODAY {
border-top:1px #250d00 solid;
border-right:1px #d57c6b solid;
border-bottom:1px #d57c6b solid;
border-left:1px #250d00 solid;
FONT-FAMILY : VERDANA;
FONT-SIZE : 7PT;
FONT-WEIGHT : BOLD;
BACKGROUND : #9e3d3f ;
COLOR :#BBB;
TEXT-ALIGN : CENTER;
}

黄色い部分が立体化させている文字列です。
#9e3d3fが朱色の四角形です。
気に入らなければお好みで替えて下さい。
ただし、立体化の部分の１PXの枠の色(#250d00と#d57c6b)は朱色に合わせていますので、修正が必要になります。


一応こんな感じです。分かって頂けましたでしょうか？
コメント欄等の立体化もこの方法の応用です。
色々と試してみると面白いですよ。
ただし、失敗するとぐちゃぐちゃになるので、あらかじめバックアップをとることをオススメします。
まぁ、失敗しても最初からやり直せば良いだけのことですけどね。
以上、参考になれば幸いです。