.menu_title{
↑サイドバーのクラスを指定
color:#fff;
↑サイドバータイトルの文字色
text-align:center;
↑真ん中に寄せてみる
border:1px #fff solid;
↑タイトルの外枠の色指定
font-weight:normal;
↑そのままだと文字が太くなっちゃうので普通でいいよ。と。
background:#333;
↑背景のグラデーションが効かない
background:-webkit-gradient(linear, left top, left bottom,from(#666),to(#333));
↑ChromeやSafari用に背景のグラデーションを指定
background:-moz-linear-gradient(top, #666, #333);
↑Firefox用に背景のグラデーションを指定
line-height:30px;
↑文字の高さを指定。heightで高さを指定してpadiingやmarginで位置を指定するのが一般的だけど色々バグとかあるのでめんどくさい。line-heightで指定すると文字の縦位置が真ん中になるから楽。
※文字が2行になった時に死ぬほどカッコ悪くなるので注意。
text-shadow:0px 0px 2px #fff;
↑文字に同じ色（白）で、縦位置、横位置を0pxでして2pxぼかしてちょっと光ってるように見せてる。
-webkit-box-shadow: 0 0 2px rgb(0,0,0);
↑ChromeとかSafari用にボックスシャドーを指定。
-moz-box-shadow: 0 0 2px rgb(0,0,0);
↑Firefox用にボックスシャドーを指定。
box-shadow: 0 0 2px rgb(0,0,0);
↑近い将来バックスシャドーはこれだけで済むようになるはず。
-moz-border-radius:5px;
↑Firefox用に角を5px丸く。
-webkit-border-radius:5px;
↑ChromeとかSafari用に角を5px丸く。
border-radius:5px;
↑近い将来角丸はこれだけで済むようになるはず
}
Chromeで見た場合はこんな感じ。
画像を一切使用していないのがびっくりでしょ？
全体的にはこんな感じ。
ヘッダーの背景やブログタイトルとかにちょっとCSS3を使ってみたり。。。