かよきせきデザイン|千葉のホームページ制作>kayokiseki-designブログ

IE10~でもfilterを効かせるには


巷で話題の東京オリンピックエンブレム。酷似していると言われる「リエージュ劇場」を検索してみました。

さすが!海外のホームページは進んでいますね♪レスポンシブデザインで素敵だなぁと思ったので、じっくり拝見しておりました。するとちょっと気になった仕掛けがありました。いや元々あったんですが、わたしが使っていなかっただけです(汗)。CSSのfilter:grayscale;です。

 

IE8までIEは独自路線で進んでいたのでfilter:gray;で対応したものの、IE10からfilter自体使えなくなって、クリエーターになんの恨みがあるのか…IE。そんな皆様にわたしの迷ントリーがお役に立ちますように。


ぜひリエージュ劇場のホームページへアクセスしてみてください。

最初はchromeで見てみましょう。

リエージュ劇場 http://theatredeliege.be/


この関連企業のリンクの仕掛けがとても気に入りました。transform: translate3dで縦スライドさせて、グレーのロゴマークがマウスオーバーでカラーに変わるというこのモバイルファーストの時代でも問題なく機能しそうなシンプルな仕掛け!(マウスオーバーアニメーションは面白いのですがブラウザ間でバグりすぎるのが問題)なのでこういうシンプルCSSで魅せる工夫は本当に貴重、ぜひパクらせて勉強させていただこうと思いました。


ソースを見ると

-webkit-filter: grayscale(100%);
filter: grayscale(100%);

となっていますので、そのようにわたしもやってみたところIEでは反映しないので、再び劇場のホームページを今度はIEで見てみました。


やはり効いていません、オールカラー。これだと関連企業リンクスペースが主張しすぎて、上の劇場イベント部分のフラットデザインの美しいカラーリングを殺してしまっています。あぁそうか…IEだからfilter: grayか(チッ)…とやってもグレーにならないので調べたところ、冒頭で書いたような理由だったわけですが、調べるとIE10以降CSS3filterは標準準拠するようにしたので、IE9までさんざん手間をかけさせていたDXフィルターをなくしたよ、ということなんですね。しかしならなぜ反映しないのか?!



DX フィルターがサポートされなくなった |Microsoft

ん?Alpha(透明度)/AlphaImageLoader(透過PNG表示)/Gradient(グラデ)/DropShadow(影)/Matrix(3D変形)だけは準拠したよ!という話でそれ以外はSVGで対応してね、ということなんですね。あぁそうですか…さすがIE(遠い目)。

よく使いそうなAlpha/Gradient/DropShadowだけ、IE10、11でちょっと見てみましょう。いかがでしょうか、ちゃんと対応していますね!

■opacity:0.5;

■background : linear-gradient(to bottom, #fff, #000);

■box-shadow: 10px 10px 10px rgba(0,0,0,0.3);


ということで、わたしがいいなと思ったfilter:grayscale;はSVGで書くことになるんですね。ちなみにSVGはHTML5から宣言がいらないことになっています。

■HTML

<svg width="100%" height="150" id="svg">
<defs>
<filter id="gray">
<fecolormatrix type="saturate" values="0">
</filter>
</defs>
<image x="0" y="0"(画像の配置xy軸) width="150" height="130"(画像サイズ) xlink:href="画像パス1"/>
<image x="150" y="0"(画像の配置xy軸) width="150" height="130"(画像サイズ) xlink:href="画像パス2"/>
<image x="300" y="0"(画像の配置xy軸) width="150" height="130"(画像サイズ) xlink:href="画像パス3"/>
</svg>

■CSS

#svg image{-webkit-filter: grayscale(1);filter: gray; filter: grayscale(1);filter: url(#gray);}
#svg image:hover{-webkit-filter: grayscale(0);filter: none !important※; filter: grayscale(0);}


ところでグレースケールですが、上のサンプルの左のわたしのロゴマークの黒や、真ん中の「BLOG」のグレーもいわゆるグレー系カラーは色変更しません。社名ロゴだと著作権上色を変更するのは困難ですが、リンクバナーなどでしたら右の「かめのみせ」の背景色(緑を入れている)や文字(赤を入れている)のようにほんの少しグレーにカラーをプラスしてあげるとhoverしたときの変化をはっきりできて楽しいと思います。

モバイルだとhoverの楽しみはないんですけれど、これくらいで実装できるなら楽しい仕掛けがあった方がいいですよね!

【修正箇所】2017/01/10 ※部分に「!important」を追加しました。