Subscribe:

2012/01/29

CSSスプライトの適用メモ

style.css
.bk-img {
  background: url(sprite-image.png) no-repeat top left;
  }
h3 {
  font-size: 16px;
  margin: 0.2em 0.3em;
  text-indent: 20px;
  }
.sprite-add-outline{
  background-position: 0 -66px;
  width: 16px; height: 16px;
  } 
index.html

test

リストマーカーにCSSスプライトを適用する場合
ul li {
list-style-type: none; // デフォルトマーカーを非表示に
line-height: 110%;
background: url(sprite-image.png) no-repeat top left;
background-position: 0 -61px;// スプライト位置を指定
margin-left: -0.5em;// マーカーを非表示にしているのでズレを修正
padding-left: 1.2em;
}
CSSスプライトジェネレーター http://ja.spritegen.website-performance.org/ものすごく便利

0 件のコメント: