この記事では、1つの画像を使用して任意の色のRSSアイコンを作成する方法を説明します。
アイデアは
、背景が.png画像で、要素の背景色がアイコンの色になる要素を使用することです。 この形式の透明度を保持するプロパティを使用するために、PNG画像を正確に取得します。
アイコンは次のようになります。
写真が白い背景とマージしないように、具体的には黒のバッキングを作成しました。 ここでオリジナルを取ることができます 。
HTMLコード：
CSS：
a.rssicon32 {
display:block;
width:32px;
height:32px;
background:#ff6600 url(rss32.png); /* */
}
a.rssicon32:hover {
background-color:#0096ff; /* , */
}
結果は
ここで見ることができ
ます。IE6で正しく表示するために、次のコードが使用されます。
* html a.rssicon32 {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='rss32.png', sizingMethod='scale');
background-image:none;
}
間違いなく、このRSSアイコンの表示はユーザーを引き付けるでしょう。 より大きな効果を得るには、Artemy Lebedev StudioのWebサイトで
ロゴを強調表示する方法と同様の操作を行います。サイトの右側にあるバーコード
ロゴを数回ポイントします。
ただし、実装には欠点があります。検索エンジンには画像が表示されず、リンクにはアンカーがありません。 それを修正しましょう。 これを行うには、トリックの1つを使用し
て画像をtextに
置き換えます 。たとえば、text-indentプロパティを使用して負の値に設定します。
text-indent: -9999px;
さて、検索エンジンはアンカー付きのリンクを読み取ります。これにより、アイコンが損なわれることはありません。
Onyx Design Blog経由
ウェブマスター向けのクロスポスト
ブログ