IEでCSS3のドロップシャドウを使いたい

category-icon

 こんばんは、martinです。CSS3+JavsScriptネタでも。目標は、IEでもCSS3のドロップシャドウ効果が得られるようになること。以下のような感じで、Firefoxとほぼ同等の効果を得ることが出来ます。左がIE8で右がFirefoxです。

[2010/08/04 01:02:25] プログラムアップデート→http://p2b.jp/2010/08/04/IE-compatible-CSS3-dropShadowLink

comparison
影のぼやけた感じも再現。
 CSS3では、テキストにドロップシャドウの効果を付けるtext-shadow定義されていてLink (まだドラフト段階かな)、既にFirefox3.5やSafari, Chrome, Opera10などは対応しています。典型的には、以下のような感じで指定します。
text-shadow: 1px 2px 3px tomato; // 順にx-offset、y-offset、ぼかし半径、影の色。最初に色指定でもOK。

 また、テキストに対する影だけでなく、DIVなどのボックス要素に対するドロップシャドウとして、box-shadowLink というのもあり、これは、FirefoxとSafari、Chromeで先行実装されています(Opera10はまだかな)。指定の仕方は、text-shadowと同様です。ほんとは、spread-radiusというオプションのパラメータもあるのですが、これはなくても良いんじゃないかと思ってます。

   -moz-box-shadow: 1px 2px 3px chocolate; // 順にx-offset、y-offset、ぼかし半径、影の色。
-webkit-box-shadow: 1px 2px 3px chocolate; // Safari, Chrome用の記述。

 また、box-shadow固有の属性として、insetというのがあります。これは、ドロップシャドウをボックスの内側に見せるものです。

   -moz-box-shadow: inset 0 0 1em red;
-webkit-box-shadow: inset 0 0 1em red;

 今のところ、insetオプションを理解するのは、Firefox3.5だけのようです。

 あれっ、ドロップシャドウって、IEが10年ぐらい前から実装してなかったっけ?と思う方もいるでしょう。そう確かにそんなものがありました。IE独自のフィルター機能を使ってそれっぽいことが出来ます。

 これらが紹介された当初はクールだと思いましたが、使い勝手が今イチだったのと、あとは、玉に瑕というか白璧の微瑕(はくへきのびか)だったと思うのは(ここまでいうと誉めすぎですが)、影の「ぼかし」が指定出来なかったことです。キリッとした輪郭の影では折角の魅力も半減です(個人的に)。おそらく、影のぼかしはそれなりにCPUのパワーを必要とするので、当時はまだ難しかったのかもしれません。なので、これらが広くWebサイトで使われるということはなかったです。AjaxのようにまたしてもIEの早すぎた実装だったわけです。

 昨今、パソコンの性能も上がり、IE以外のモダンなブラウザがCSS3のtext-shadowをサポートするようになったせいか、この頃は色んなサイトでドロップシャドウ効果を見かけるようになりました。

 なので、まだまだシェアの大きいIEでも、CSS3に準拠した、それらしいドロップシャドウを付けたいということで考えてみました。基本的な考え方は、上で述べたマイクロソフト独自のFilter BlurLink を用いて、影のぼかしを演出するということです。このBlurは、要素自体をぶれた表現にするので、それを別のレイヤーとして生成して、それを影を付けたい要素の背後に配置するというものです。別のレイヤー生成というと、大げさな気もしますが、ぼやけた感じを出すには、これ以外の方法はない気がしますし、Firefoxにしても、影は別レイヤーなんじゃないんでしょうか、知りませんが。

 とりあえず、それっぽいモノができたのでデモをお見せします。

 

IEでもCSS3のドロップシャドウを実現するデモLink

 text-shadowbox-shadowもカンマで区切った複数の指定が可能なので、これにも対応してみました。

.multi-text-shadow {
 font: bold 3em Arial, sans-serif; color: white;
 padding: 10px;
 text-shadow: 1px 2px 2px #555, 0 0 1em blue, 0 0 0.2em blue; /* ここでは3つ指定している */
}
 上の指定だと、以下のような感じになります。
multi-text-shadow
IE8でのスクリーンショットです。

 また、現時点では、Firefox3.5のみが対応しているinsetオプションも解するようにしてみました。IE8でのスクリーンショットをば。

inset-demo
なかなか良い感じでは。
 で、実際の設置方法ですが、なるべく簡単に設置できるように、外部スクリプトとしました。CSSでの記述は、特別なものは必要ないです。普通に上に挙げたような感じで、text-shadowやbox-shadowの指定をしておけば良いです。後は、ドロップシャドウを効かせたいページで、外部スクリプトを次のように呼び出せばOKです。
<script type="text/javascript" src="path/to/css3shadow.htc"></script>
 ファイルの名前css3shadow.htcさえ変えなければOKで、それを置いた相対パスを、各自で記述すれば良いです。

 これ以外の指定方法としては、このスクリプト自体は、完全にIE向けなので、Firefoxその他のブラウザには不要なものです。なので、その分のトラフィックを減らしたいということであれば、IE向けの条件コメントを使って、

<!--[if lt IE9]>
<script type="text/javascript" src="path/to/css3shadow.htc"></script>
<![endif]-->

でも良いと思います。これであれば、Firefoxなどではコメントとして解釈されるので、サーバーからcss3shadow.htcが呼び込まれることはないです。

 まだ、書き上げたばかりなんで、細かいチェックは出来ていませんが、外部スクリプトを呼び込むだけなので、気軽に試して頂けるかと思います。css3shadow.htcを添付しておきます。8KB未満の小さいファイルです。

 ちなみに、影の色指定ですが、透明度を設定できるrgba方式にも対応しています。これは、通常のRGB形式に加えて、4つめに透明度を指定出来るものです。ゼロで透明、1で不透明となります。

rgba(123, 100, 125, 0.3); /* 透明度30%の指定 */

 オフトピですが、RGBって、たまにRBGとタイプミスしたり、あれっ?どっちだっけと混乱するときがありますが、キーボードで、上から順にRGBとなっている、と覚えると良いです。

 以下、Mozillaの参考サイトを挙げておきます。

添付ファイル: css3shadow.htcattachedIcon 

— posted by martin at 12:35 pm   commentComment [12]  pingTrackBack [1]

この記事に対するコメント・トラックバック [13件]

scrollUp1. nob Website — 2010/05/27@20:39:10

はじめまして!
画像以外でIEでドロップシャドウをしたく、ダウンロードさせていただきました。
他のスクリプトとかも使ってみましたが、一番簡単にできました。ありがとうございました。これからも勉強させていただきます(^^)

2. ダリの雑記:WEBプログラム版 Website — 2010/07/28@11:26:08

今回の方法では、ドロップシャドウ・テキストシャドウができます。   「css3shadow」を利用する方法。(参考サイト:ppBlogさんのサイト) css3shadowでできるCSS3機能は以下のとおりです。 -moz-box-shadow または -webkit-box-shadow : ドロップシャドウ text-shadow : テキストシャドウ css3shadowのIE用ドロップシャドウでは「box-shadow」ではなく、「-moz-box-shadow」または「-webkit-box...
続き »

3. juner Website — 2010/08/02@13:14:46

text-align:center;
をするとIE7以下で影が変なところに飛ぶのですが、対策方法とか無いでしょうか?

Owner Comment martin Website  2010/08/04@07:54:14

貴重なご指摘ありがとうございます。とりあえず対処してみました。

5. Nori Website — 2010/08/17@01:34:32

IEでもドロップシャドウ:P
とっても参考になりました。
とてもキレイなシャドウですね。。。

scrollUpOwner Comment martin Website  2010/08/18@02:24:57

コメントありがとうございました。分かりやすい、綺麗なサイトですね8-)

7. 通りすがり — 2010/08/30@12:45:41

素敵ですね!!
IEでも影をつけたくて、ググったら偶然たどり着きました。
お気に入りに登録させていただきました。
ぜひ使わせていただきたいです。
ありがとうございました!!!

8. 使いたいが — 2011/10/05@18:28:35

背景画像を指定しているとIEでシャドウが表示されませんでした。

scrollUp9. yumikori — 2012/05/06@00:53:54

使いたいのですが、リンクをクリックしても、
ファイルが見つかりませんと出て使えません。

もう公開していないのでしょうか?

Owner Comment martin Website  2012/05/08@03:54:06

こんばんは。サポートが追いつかなくて、リンクを切っていたのですが、デモサイトを復活させました。ソースを見れば分かりますが、http://p2b.jp/js/css3shadow.htcLink がそのファイルとなります。

11. yumikori — 2012/06/01@02:36:25

レスありがとうございます。
助かりました。ありがとうございます。

12. mori — 2013/03/12@16:19:41

IE9には対応していないですかね?

13. reo — 2013/03/15@14:58:17

IE9ではテキストシャドウが効いていません。新バージョンはございますでしょうか?

この記事に対する TrackBack URL:

設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。

コメントをどうぞ。 名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。

ウェブサイト (U):

タグは使えません。http://・・・ は自動的にリンク表示となります

:) :D 8-) ;-) :P :E :o :( (TT) ):T (--) (++!) ?;w) (-o-) (**!) ;v) f(--; :B l_P~

     
T: Y: ALL: Online:
Created in 0.0327 sec.
prev
2016.7
next
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31