CSS Archive

CSSの指定だけで透過PNG画像をIE６で適用できる情報が、CSS TIPSさんで掲載されていたので引用メモ。

透過pngは便利な機能なのですが、IE6が対応していない為、通常のやり方では使用できません。

IE6とその他のモダンブラウザで透過pngを表示する方法は以下のようになります

記述するcssコード

div.alpha{
	width:100px;
	height:200px;
	background:url("alpha.png");
}
* html div.alpha{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
	background:none;
}

div.alphaの記述はすべてのブラウザに対して適応されます。

その後にスターハックを使用して透過pngをサポートしていないＩＥ６のみに適応するスタイルを記述します。（ＩＥの独自拡張フィルタを使用しています）

これでほぼすべてのモダンブラウザで透過pngを表示する事ができます。

実際のサンプルなどはCSS TIPSさんのページに掲載されてます。

またヨモツネットさんにも、CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にするの記事ですごい詳しく書かれてあります。

…続きを読む >>

Popularity: 40% [?]

JSを使わずにCSSで画像リンクをつくることはたくさんありますが、オンマウス時の指定はいろいろあると思います。
自分がよく使うのは、オフマウス時とオンマウス時の画像をつなげて１つの画像にし、a要素の背景画像の設定をして、a要素の高さを 0 にして、代わりにpaddingを上方向に指定するやり方をしてます。

■HTML

<a id="link01" href="#">ここのテキストはCSSの指定で隠れます</a>

■CSS

a#link01 {
display: block;
overflow: hidden;
width: 100px;
height: 0 !important;
height /**/:33px;
padding-top: 33px;
background-image: url(/images/link.gif);
}

/*オフマウス時*/
a#link01 { background-position:  0     0; }

/*オンマウス時*/
a#link01:hover { background-position:  0     -33px; }

上の例では高さ33pxの画像を上下につなげて、合計の高さ66pxの一つの画像になり、それをCSSのa要素の指定で、高さを0にし、padding-top: 33pxで、overflow: hidden;にすることであふれる高さを表示しないようになってます。

…続きを読む >>

Popularity: 54% [?]