photoshopで画像パーツを作り、CSSを記述 その3header要素に背景画像

header要素に背景画像header要素の背景画像として、左図のような縞模様をphotoshopで作成します。それからサンプルページにてcssでbackgroundプロパティとして定義します。背景画像はheader全体のサイズを一つの背景としてではなく、小さなサイズでrepeat値で定義します。ユーザ環境でのテキストサイズ変更などの操作で、header要素内テキストが大きくなった場合、header要素のタテサイズが大きくなる際に単一固定の背景画像だと溢れた部分に背景が適応されないため、レイアウトが崩れます。オーバーフローした部分にも背景を表示させるために、小さいサイズの画像をタテヨコに繰り返し表示させます。

今日の分のサンプルページ
http://boxboa.jp/weblog/sample/css_design20090111.html
今日の分のCSS
http://boxboa.jp/weblog/sample/css/css_design20090111.css cssファイル 3KB
今日の分の画像パーツ
bck_header.gif gifファイル 54B

詳細は以下、「続きを読むRead more…」から

photoshopの作業
headeに縞模様の背景画像

headeに縞模様の背景画像
上の背景画像(gif)をphotoshopで作成します。

  1. カンバスを用意

    カンバスを用意
    1. photoshopを開き、新規カンバスを用意
    2. 9px四方のカンバスサイズ、解像度72pxで作成
      ※縞の間隔を広げるさいはサイズを大きくする
    3. カンバスカラー(背景)は透明
  2. 背景カラーを描画

    背景カラーを描画
    1. 塗りのカラーは#333(黒系)に設定
    2. ツールボックスからバケツツールでベタ塗り
  3. ペンツールで縞を描画

    ペンツールで縞を描画
    1. 縞模様の斜線のカラーを#6f6f6f(グレー系)に設定
    2. ペンツールのペンサイズを1pxで左上から右下へ対角線上に描画

    3. ※対角線上に描画するのは、画像を繰り返した時に縞模様が繋がるようにするため
  4. gif画像に書き出し

    gif画像に書き出し
    1. ツールバー⇒ファイル⇒Webおよびデバイス用に保存を実行
    2. 編集ウィンドウから「GIF128ディザ」を選択
    3. 最適化または元画像を選択し任意のフォルダに書き出し

画像作成はここまで


cssの記述
作成した画像をcssでhtmlに定義

header要素に背景画像として定義
#header{
background:#333 url(../cmn/css_design01/bck_header.gif);
}
  • 背景カラー#333(黒系)も合わせて定義する
  • Posted : カナキ |
  • カテゴリー:csshtml

コメント投稿期間が終了しました。