CSS Drop Shadows II

COMPUTER

2009.05.022022.06.09

最近、 Dreamweaver CS4 まで買い込んでスタイルシートを書いてます。スタイルシートはちゃんと勉強したことがなかったのですが、まぁ、ゼロからですよ。スタイルシートっていろんなことができるんですね。僕は Flash は作ったことがないんですが、 Javascript とスタイルシートで大半のことは出来てしまうんですね、という驚き。

T5B のスタイルシートをいじっている時間はないのですが、最近、買ったものの記事ばかりなのを反省して、ご参考テク。イメージに写真のように白枠とうっすらシャドウを付けるスタイルシートテクニック、CSS Drop Shadows II を紹介。詳しくはサイトを読んで欲しいのですが、簡単に導入できます。

まず、このサイトにある３つのファイル（下記）をダウンロードします。好きなところにアップして配置して下さい。

shadow.gif
shadow2.gif
shadow2.png

HTML 側では下記のように記述します。

<div class="alpha-shadow">
<div>
<img src="img/test.jpg" alt="just a test" />
</div>
</div>

class=”alpha-shadow” を宣言して、<div> を多段にしてあげます。次に CSS 側を下記のように記述します。サイトにある CSS の記述は一部誤りがあります。 shadow1.gif ではなく、 shadow.gif です。まぁ、ファイル名を揃えてやって下さい。

.alpha-shadow {
float: left;
background: url(img/shadow.gif) »
no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.alpha-shadow div {
background: url(img/shadow2.png) »
no-repeat left top !important;
background: url(img/shadow2.gif) »
no-repeat left top;
padding: 0px 5px 5px 0px;
}
.alpha-shadow img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
}

はい、これでイメージに小粋な装飾が出来ました。写真のイメージをひとつひとつ加工する必要はありません。最高。

ですが、例によって Internet Explorer 6 までの IE ではうまくいきません。透過 PNG を処理できないからです。このクソ IE のためには AlphaImageLoader を使って実現してあげましょう。 IE ハックです。

* html .alpha-shadow div {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='img/shadow2.png', sizingMethod='crop');
background: none;
}

スタイルシートの解釈ではグダグダの IE ですが、少なくともシェアが高い IE 6 が手元にないとスタイルシートの変更を確認できませんよね。僕も BootCamp の Windows は Vista ですから IE 7。困った！そんな時は netrenderer で IE のレンダリング結果を確認すればオーケー。世の中進んでますね。

コメント

SEARCH