JavaScriptCheckTweetこんばんは、martinです。CSS3+JavsScriptネタでも。目標は、IEでもCSS3のドロップシャドウ効果が得られるようになること。以下のような感じで、Firefoxとほぼ同等の効果を得ることが出来ます。左がIE8で右がFirefoxです。プログラムアップデート→http://p2b.jp/2010/08/04/IE-compatible-CSS3-dropShadow影のぼやけた感じも再現。Opera10などは対応しています。典型的には、以下のような感じで指定します。順にx-offset、y-offset、ぼかし半径、影の色。最初に色指定でもOK。いうのもあり、これは、FirefoxとSafari、Chromeで先行実装されています(Opera10はまだかな)。指定の仕方は、text-shadowと同様です。ほんとは、spread-radiusというオプションのパラメータもあるのですが、これはなくても良いんじゃないかと思ってます。順にx-offset、y-offset、ぼかし半径、影の色。Chrome用の記述。box-shadow固有の属性として、insetというのがあります。これは、ドロップシャドウをボックスの内側に見せるものです。red;今のところ、insetオプションを理解するのは、Firefox3.5だけのようです。あれっ、ドロップシャドウって、IEが10年ぐらい前から実装してなかったっけ?と思う方もいるでしょう。確かにそんなものがありました。IE独自のフィルター機能を使ってそれっぽいことが出来ます。Filterこれらが紹介された当初はクールだと思いましたが、使い勝手が今イチだったのと、あとは、玉に瑕というか白璧の微瑕(はくへきのびか)だったと思うのは(ここまでいうと誉めすぎですが)、影の「ぼかし」が指定出来なかったことです。した輪郭の影では折角の魅力も半減です(個人的に)。影のぼかしはそれなりにCPUのパワーを必要とするので、当時はまだ難しかったのかもしれません。これらが広くWebサイトで使われるということはなかったです。AjaxのようにまたしてもIEの早すぎた実装だったわけです。昨今、パソコンの性能も上がり、IE以外のモダンなブラウザがCSS3のtext-shadowをサポートするようになったせいか、この頃は色んなサイトでドロップシャドウ効果を見かけるようになりました。シェアの大きいIEでも、CSS3に準拠した、それらしいドロップシャドウを付けたいということで考えてみました。用いて、影のぼかしを演出するということです。このBlurは、要素自体をぶれた表現にするので、それを別のレイヤーとして生成して、それを影を付けたい要素の背後に配置するというものです。別のレイヤー生成というと、大げさな気もしますが、ぼやけた感じを出すには、これ以外の方法はない気がしますし、Firefoxにしても、影は別レイヤーなんじゃないんでしょうか、知りませんが。それっぽいモノができたのでデモをお見せします。IEでもCSS3のドロップシャドウを実現するデモtext-shadowもbox-shadowもカンマで区切った複数の指定が可能なので、これにも対応してみました。*/}上の指定だと、以下のような感じになります。IE8でのスクリーンショットです。現時点では、Firefox3.5のみが対応しているinsetオプションも解するようにしてみました。IE8でのスクリーンショットをば。実際の設置方法ですが、なるべく簡単に設置できるように、外部スクリプトとしました。CSSでの記述は、特別なものは必要ないです。普通に上に挙げたような感じで、text-shadowやbox-shadowの指定をしておけば良いです。後は、ドロップシャドウを効かせたいページで、外部スクリプトを次のように呼び出せばOKです。src="path/to/css3shadow.htc"></script>ファイルの名前css3shadow.htcさえ変えなければOKで、それを置いた相対パスを、各自で記述すれば良いです。これ以外の指定方法としては、このスクリプト自体は、完全にIE向けなので、Firefoxその他のブラウザには不要なものです。src="path/to/css3shadow.htc"></script><![endif]-->でも良いと思います。これであれば、Firefoxなどではコメントとして解釈されるので、サーバーからcss3shadow.htcが呼び込まれることはないです。書き上げたばかりなんで、細かいチェックは出来ていませんが、外部スクリプトを呼び込むだけなので、気軽に試して頂けるかと思います。css3shadow.htcを添付しておきます。8KB未満の小さいファイルです。ちなみに、影の色指定ですが、透明度を設定できるrgba方式にも対応しています。これは、通常のRGB形式に加えて、4つめに透明度を指定出来るものです。ゼロで透明、1で不透明となります。*/オフトピですが、RGBって、たまにRBGとタイプミスしたり、あれっ?どっちだっけと混乱するときがありますが、キーボードで、上から順にRGBとなっている、と覚えると良いです。以下、Mozillaの参考サイトを挙げておきます。2010/05/27@20:39:10はじめまして!画像以外でIEでドロップシャドウをしたく、ダウンロードさせていただきました。他のスクリプトとかも使ってみましたが、一番簡単にできました。ありがとうございました。2010/07/28@11:26:08今回の方法では、ドロップシャドウ・テキストシャドウができます。「css3shadow」を利用する方法。css3shadowでできるCSS3機能は以下のとおりです。2010/08/04@07:54:14貴重なご指摘ありがとうございます。2010/08/17@01:34:32IEでもドロップシャドウとっても参考になりました。キレイなシャドウですね。2010/08/18@02:24:57コメントありがとうございました。2010/08/30@12:45:41素敵ですね!!IEでも影をつけたくて、ググったら偶然たどり着きました。お気に入りに登録させていただきました。使わせていただきたいです。2011/10/05@18:28:35背景画像を指定しているとIEでシャドウが表示されませんでした。2012/05/06@00:53:54使いたいのですが、リンクをクリックしても、ファイルが見つかりませんと出て使えません。2012/05/08@03:54:06こんばんは。サポートが追いつかなくて、リンクを切っていたのですが、デモサイトを復活させました。そのファイルとなります。2012/06/01@02:36:25レスありがとうございます。ありがとうございます。2013/03/15@14:58:17IE9ではテキストシャドウが効いていません。URL:設定によりTB元のページに、こちらの記事への言及(この記事へのリンク)がなければ、TB受付不可となりますのであらかじめご了承下さい。名前(ペンネーム)と画像認証のひらがな4文字は必須で、ウェブサイトURLはオプションです。(U):タグは使えません。この非公開機能を使うにはブラウザのクッキーが有効である必要があります。レスを確実に知ることができます。最新10件のコメントmimimimifaghasegawahiroshimartinsarutarosスーパーコピースーパーコピーウブロスーパーコピー時計のブランド時計コピー通販です。弊店のウブロコピー時計等のブランドコピー時計は送料手数料無料で、業界NO.1品質2年無料保証です。全サイト15%OFFキャンペーン実施中です。