チョットしたアイコンを様々なカラーで作る場合、都度画像を用意するのが面倒なときや、仮で色をおいてある場合など、後々変更するのが面倒って事が有るかと思います。
ソコで活躍するのがカメレオンアイコンっていうテクニック？です。
---- こっから続き
SAMPLE
やり方は非常に簡単で、色を変えたい部分を透過GIFで作成し、CSSで背景色を指定してあげる。
SAMPLEの場合は直接HTMLに指定しちゃってるんでアレですが、グループ分けや、カテゴリ、分類別、なんたら別に色を分けるような場合便利だと思います。
SAMPLEのソース
<img src="/template/10/icon-01.gif" alt="青SAMPLE" style="background:#00F" />
CSSで指定する場合は、
.chameleon-01 {
background:#00F;
}
<img src="/template/10/icon-01.gif" alt="青SAMPLE" class="chameleon-01" />
のようになりまする。
もうチョットSAMPLEを。
例えば、画像下にちょっと角丸っぽい背景で、説明文を入れたい時などにも。
SAMPLE
SQ Lifeはスピリチュアルな生活を…
SQ Lifeはスピリチュアルな生活を…
今回のSAMPLEで使用した画像セット
http://css-happylife.com/template/10/img.zip
参考：Stylesheet Stylebook：カメレオンアイコン
- 各種SBMに追加
-
