blog/2010-05-14


Total: 1521 / Today: 1 / Yesterday: 1

クロスブラウザで角丸半透明ボックスにドロップシャドウ(w

クロスブラウザで、角丸ボックスにグラデーションを入れて、さらにドロップシャドウをかけると言うクレイジーな企画である。IEはCSS3を全然サポートしていない、Firefox、Safari/Chromeは独自企画、正式にサポートしているのはOperaだけときた。この難題をどうするか?

結局こうなった。

.rounded_gradient_dropshadow{
	/* CSS3 (Opera) */
	opacity:0.9;
	border-radius: 3px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
	/* IE */
	filter:
		alpha(opacity=90)
		progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=white,EndColorStr=gainsboro)
		progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999') !important;
	/* FireFox */
	-moz-opacity:0.9;
	-moz-border-radius: 3px;
	-moz-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
	background: -moz-linear-gradient(top, white, gainsboro);
	/* Safari / Google Chrome */
	-webkit-border-radius: 3px;
	-webkit-box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.6);
	background: -webkit-gradient(linear, left top, left bottom, from(white), to(gainsboro));
	/* Others */
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAYAAABHLFpgAAAAiUlEQVQYlWXERw6DMBRAQe5/RoppNr0ZMGAg2XwpT8osJnjf9xP8ep6H3ffNvPfsui7pPE92HAdzzrF939m2bWxdV2atlZZl+WueZ2maJjaOIxuGgfV9z7quk9q2ZU3TsLquWVVVzBjDtNasLEtWFIWU5znLsoylacqUUixJEhbHMYuiSArDEH0BTjt5gLTGwUIAAAAASUVORK5CYII=");
	background-repeat:repeat-x;
	background-color:gainsboro;

解説

とはいっても、実質IEとその他だけだが、IEではフィルタ機能を使っている。このフィルタと言う機能は結構歴史があり、少なくとも、自分がMacでIE5を使ってた頃からあった。当時のHTML参考書によると、IE4.5でも使えたらしい。要は、IEからDirectXの機能を叩けるというものらしいが、当時使われてたサイトをほとんど見たことがなかった。で、入れてあるサイトに限って表示が極端に重い。しかも、同じIEでもMacでは反映されないと言うとんでもないシロモノ。(そのくせ、PNGはMac版では正常に表示されるのにWindowsではちゃんと表示されない中途半端さ)

もっとも、当時は、ポップアップメニューを使うサイトでさえ重いと感じたんだから仕方がないね。かくいう自分もそういうサイトを作っていた→http://pro.logue.be/tf/

この他にも、画像を切り替えるときにフェードイン、フェードアウトなどのトラジションがあったりと、結構奥が深い。

話はずれたが、IEではこのフィルタ機能をフルに使っている。しかし、ドロップシャドウの機能がないので、Shadowフィルタで代用している。これは斜めにグラデーションをつけているだけだが、このさいだから、仕方がない。もちろん、ie-css3.htcを使えば可能だが、例えば、スクリプトでフキダシを出すような処理をさせると、ちゃんと動かない。おそらく、この処理とかち合っているのだろう。あれは動的にCSSを書き換えてアニメーションさせているので、対応させるにはそのスクリプトも書き換えなければならないだろう。

したがって、IEでは角丸にならない。

FireFox

これも実は曲者で、この-moz-linear-gradientがサポートされたのはつい最近。3.6からである。それ以前のバージョンで見ると間抜けな事になる。

結局まともに表示出来るのは、OperaとSafari/Chrome(WebKit)だけである。

その他のブラウザは?

その他のブラウザではしかたがないので、グラデーションのpngを背景にしてある。これは、Gradient CSS Generatorを用いて生成した。このバイナリは何?というと、dataスキーマーで作った24bitアルファチャンネルいりのPNGファイルである。これを横に並べることで擬似的にグラデーションが掛かっているように見ることができる。

ただし、画像という都合上、上の方法と比較してボックスの大きさが変化してもグラデーションの位置が変わらないと言う欠点がある。

IEでも、dataスキーマーサポートしてれば、JavaScriptだけで画像などといったバイナリを書いたりすることができるんだが・・・。

どうなるの?

IE
ie.jpg
Firefox
firefox.jpg
Safari(WebKit)
webkit.jpg

Last Modified: 2010-05-14 10:01:00