グラデーション効果で読まれる見出しをつくろう

グラデーションには、視線の流れを左から右へ促す効果があります。
このサンプルでは背景色のグラデーションが施してある画像を見出しの背景に設定し、表示位置を右側にして境目がなじむようなデザインにしてあります。背景画像を指定するbackgrond-positionプロパティを使って表現してみましょう。

もちろん、文字や中身の増減にも対応しており、見出し以外の要素でもこのプロパティは使えます。
たとえば文字を入れるコンテンツエリアに対して適応しようとした場合、background-repeatでrepeat-y（縦軸）を指定すれば、画像が縦軸にリピートするので、中身が増えてもきちんと背景が表示されます。

デザインサンプル

リストで横並びのメニューを作ろう

サンプルCSSコード

h2 {
　　background-color: #00b8e7;
　　background-image: url(img/gura02.gif);
　　background-position: right;
　　background-repeat: repeat-y;
　　color: #fff;
　　font-weight: bold;
　　font-size: 15px; padding: 5px;
　　width: 500px;
}

＊サンプルでは２種類ありますが、画像と背景色が違うだけでスタイルシートは一緒です。

スタイルシートデザインガイド