カテゴリー
サイト構築

Web2.0っぽくグラデーションを入れてみた

Web2.0風

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ドットぐらい(目分量)で切り抜いて背景に設定しました。
意外と特に苦労することにもなく、それでいて全体のイメージはなかなか洗練された感じがするようになりました。これはいいです。

トップページの真ん中部分も予想外にグラデがかかってしまったのですが、なんか面倒なのでそのままにしておきます(笑)

この記事を書いた人: A-tak

A-tak.com(えいたっく どっとこむ)の管理人。
Apple野郎なおっさんでしたが、ちょっと最近のAppleには飽き気味。
A-tak.comは2002年2月から運営(前身のサイトは1999年3月から)。今年で18年目!

Twitter
Mastodon
Facebook