IE9でcss3 text-shadow
を動作させる簡単な方法はありますか?少なくとも1つのテキストシャドウがあればいいでしょう。理想的にはIE8もサポートされていると思います。要素のtext-shadow cssプロパティを調べてIE9用に実装する単純なjqueryプラグインまたは.htcファイルがあることを期待しています。
はい、しかしあなたが想像する方法ではありません。 caniuse (非常に優れたリソース)によると、IE9にtext-shadow
サポートを追加するためのサポートとポリフィルはありません。ただし、IEには独自の独自のテキストシャドウがあります( 詳細はこちら )。
Webサイトから取得した実装例(IE5.5〜IE9で動作):
p.shadow {
filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}
ブラウザー間の互換性とコードの将来性を保証するために、CSS3標準のtext-shadow
プロパティも使用することを忘れないでください( 詳細はこちら )。これは、IE10が レガシーdxフィルターのサポートを削除 への意図を公式に発表したことを考えると、特に重要です。今後、IE10 +はCSS3標準text-shadow
のみをサポートします。
IE9はCSS3 text-shadow
、IEの代わりにフィルタプロパティを使用します。ライブの例: http://jsfiddle.net/dmM2S/
text-shadow:1px 1px 1px red; /* CSS3 */
に置き換えることができます
filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/
結果は非常によく似ています。
CSS Generator を試してください。
値を選択して、オンラインで結果を確認できます。次に、クリップボードにコードを取得します。
これは生成されたコードの一例です。
text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);
背景画像にオーバーレイしたときに機能するクロスブラウザのテキストストロークソリューションを探していました。 IE7-9で追加のマークアップやjsを使用せず(6はテストしていません)、エイリアシングの問題を引き起こさない解決策があると思います。
これは、IE( http://caniuse.com/#search=text-shadow )を除く良いサポートがあるCSS3 text-shadowの使用の組み合わせです。 IEのフィルターの組み合わせを使用するCSS3テキストストロークのサポートは、現時点では不十分です。
IEフィルター
グローフィルター( http://www.impressivewebs.com/css3-text-shadow-ie/ )はひどく見えるので、私はそれを使用しませんでした。
David Hewittの答え 方向の組み合わせでドロップシャドウフィルターを追加する必要がありました。その後、ClearTypeが残念ながら削除されるため、テキストのエイリアスが不適切になります。
次に、 seragentman で提案された要素のいくつかをドロップシャドウフィルターと組み合わせました。
一緒に置く
この例は、白いストロークの黒いテキストです。私はターゲットIE( http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither / )。
#myelement {
color: #000000;
text-shadow:
-1px -1px 0 #ffffff,
1px -1px 0 #ffffff,
-1px 1px 0 #ffffff,
1px 1px 0 #ffffff;
}
html.ie7 #myelement,
html.ie8 #myelement,
html.ie9 #myelement {
background-color: white;
filter: progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ffffff,offX=-1,offY=-1);
zoom: 1;
}
上記のフィルターを試してみましたが、作成された効果は非常に嫌いでした。また、プラグインは基本的な効果のように見えるため、読み込み時間を遅くするため、プラグインを使用したくありませんでした。
私の場合、0pxブラーのテキストシャドウを探していました。つまり、シャドウはテキストの正確なレプリカですが、オフセットと背後にあるだけです。この効果はjqueryで簡単に再現できます。
<script>
var shadowText = $(".ie9 .normalText").html();
$(".ie9 .normalText").before('<div class="shadow">' + shadowText + '</div>');
</script>
<style>
.ie9 .shadow { position: relative; top: 2px; left: -3px; }
</style>
これにより、下のcss3 text-shadowと同じ効果が作成されます。
text-shadow: -3px 2px 0px rgba(0, 0, 0, 1.0);
これが実際の例です(メインバナー画像の上に大きな白いテキストが表示されます) http://www.cb.restaurantconnectinc.com/
crdunstの答えは非常にきちんとしていて、私が見つけた最良の答えですが、使用方法についての説明はなく、コードは必要以上に大きくなっています。
必要な唯一のコード:
#element {
background-color: #cacbcf;
text-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
filter: chroma(color=#cacbcf) progid:DXImageTransform.Microsoft.dropshadow(color=#60000000, offX=2, offY=2);
}
最初に[〜#〜] must [〜#〜]background-color
-要素を透明にする必要がある場合は、親の背景色をコピーするか、継承させます。クロマフィルターの色は、テキストの周囲のアーティファクトを修正するために背景色と一致する必要があります(ただし、ここでは色をコピーする必要があり、inherit
は記述できません)。私はdropshadow-filterを短縮していないことに注意してください-それは動作しますが、影は要素の寸法にカットされます(大きな影で顕著です;オフセットを少なくとも4に設定してみてください)。
TIP:透明度(アルファチャンネル)で色を使用したい場合は、#AARRGGBB表記、ここでAAは不透明度の16進値を表します-01からFEまで、FFおよび皮肉にも00は透明度を意味しないため、役に立たないためです.. ^^これは、影が柔らかくなく、同じアルファ値がより暗く表示されるためです。 ;)
IE(JavaScript、コンソールに貼り付けるだけ)のアルファ値を変換する素敵なスニペット:
var number = 0.5; //alpha value from the rgba() notation
("0"+(Math.round(0.75 * number * 255).toString(16))).slice(-2);
問題:テキスト/フォントは、影が適用された後、画像のように動作します。ズームインするとピクセル化されぼやけてしまいます...しかし、それはIEの問題であり、私の問題ではありません。
シャドウのライブデモ: http://jsfiddle.net/12khvfru/2/