背景画像とPhotoshop@10月11日

HTML&CSS Photoshop

body背景の設置

background-repeat: repeat; /* 画像の繰り返し */
background-repeat: no-repeat; /* 画像の繰り返さない */
background-repeat: repeat-x; /* X軸方向に画像の繰り返し */
background-repeat: repeat-y; /* Y軸方向に画像の繰り返し */

画像のトップ制作

◎backgroundで移動、微調整
◎background-position←基準点は左上から
◎#header_inner等を指定して文字を重ねる

リスト・ビュレット

listに付く●を画像に変える
◎background-positionでマークをセンターに微調整

background-image: url(flmark.png); /* 画像の置いてある場所 */
background-repeat: no-repeat; /* 画像の繰り返し */
background-position: 0 2px; /* 画像の表示する左上からの距離 */
padding: 4px 0 4px 24px; /* 画像とリストの文字との空き */

CSS SPRIT

背景画像は１つで、「background-position」により、見える部分を変化させる。
◎高さ60pxの画像を作り、ボタンは高さ30pxだと
#nav li a:hover {
background-position: 0 -40px; /* ボタン画像のずれる距離 */}

画像置き換え

◎visibility: hidden;で余計な文字を消せる

つまづいてボタン画像が出て来ません？？
きっと、前のcssを写し損なったのかも・・．明日検証！
【検証結果】#nav li #btn1 a{←liと＃の間の半角空きが原因だった。ダメなのね。それ位見逃して欲しい・・。

photoshop

CS5凄そうだな〜。
基本操作しか知らない＆テキストを読んで挫折しているので、楽しみです。
今日も技をいろいろ覚えました。
マスク機能がよく分かってないので、覚えたいです。