A-TAK.COM

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

※Amazonのアソシエイトとして、A-TAK.COMは適格販売により収入を得ています
※本サイトではその他アフィリエイトも利用しております。

シェア

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

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


シェア

投稿日

カテゴリー:

投稿者:

カテゴリ一覧