Web2.0ってのは、なんだかすごい曖昧で、今までは無くて、今流行っているものは全部Web2.0と言うみたいなことをどっかに書いてありました。デザインで言うとグラデーションを多用するとWeb2.0っぽいデザインだと言うことらしいです。
前からデザインは変えたくて、このWeb2.0っぽいデザインってのは、いいなーと思っていたのですが、Ajaxも一部導入したことですので、やる気出して挑戦することにしました。
方法はこちらを参考にさせていただきました、というかベースが同じ無彩色系なのでほぼ同じ仕上がりになってます(汗)
こんな感じで、background-imageを指定しています。画像はタイトルの高さ分、幅は1ドットにします
td#leftcolumn div.blockTitle {
padding: 3px;
background-color: #dddddd;
color: #639ACE;
font-weight: bold;
background-image: url(“/xoops/images/title-bg.gif”);
border: 1px solid #dddddd;
}
自分はGIMPというフリーのグラフィックソフトでグラデーション作って、縦1ドットぐらい(目分量)で切り抜いて背景に設定しました。
意外と特に苦労することにもなく、それでいて全体のイメージはなかなか洗練された感じがするようになりました。これはいいです。
トップページの真ん中部分も予想外にグラデがかかってしまったのですが、なんか面倒なのでそのままにしておきます(笑)