カメレオンなアイコン

チョットしたアイコンを様々なカラーで作る場合、都度画像を用意するのが面倒なときや、仮で色をおいてある場合など、後々変更するのが面倒って事が有るかと思います。

ソコで活躍するのがカメレオンアイコンっていうテクニック？です。

SAMPLE

青SAMPLE 黒SAMPLE 赤SAMPLE 緑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

SQLife 　SQ Lifeはスピリチュアルな生活を…

今回のSAMPLEで使用した画像セット
http://css-happylife.com/template/10/img.zip