web-dev-qa-db-ja.com

IE9のcss3テキストシャドウ

IE9でcss3 text-shadowを動作させる簡単な方法はありますか？少なくとも1つのテキストシャドウがあればいいでしょう。理想的にはIE8もサポートされていると思います。要素のtext-shadow cssプロパティを調べてIE9用に実装する単純なjqueryプラグインまたは.htcファイルがあることを期待しています。

cssinternet-explorer-9css3piecss3
52
at.

はい、しかしあなたが想像する方法ではありません。 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のみをサポートします。

60
Moses

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*/

結果は非常によく似ています。

26
tw16

CSS Generator を試してください。

値を選択して、オンラインで結果を確認できます。次に、クリップボードにコードを取得します。
これは生成されたコードの一例です。

text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);
13
thom_s

背景画像にオーバーレイしたときに機能するクロスブラウザのテキストストロークソリューションを探していました。 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;
}
5
crdunst

上記のフィルターを試してみましたが、作成された効果は非常に嫌いでした。また、プラグインは基本的な効果のように見えるため、読み込み時間を遅くするため、プラグインを使用したくありませんでした。

私の場合、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/

1
tbradley22

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/

0
Dennis98