3

小さなポリフィル ( https://github.com/heygrady/textshadow ) を取得して Internet Explorer にテキスト シャドウ効果を追加しようとしていますが、それを機能させる方法がわかりません。これは私が使用しているコードです:

<script src="@Url.Content("~/Scripts/modernizr.custom.61772.min.js")" type="text/javascript"></script>
<script>
    Modernizr.load({
        test: Modernizr.textshadow,
        nope: ['/Content/jquery.textshadow.css', '/Scripts/jquery.textshadow.js'],
        complete: function () {
            $('h1').textshadow('1px 1px 2px #111')
        }
    });
</script>

効果は得られますが、すべてが間違っているように見えます。元のテキストとまったく同じ書式設定で、元の見出しテキストをもう一度やり直すだけですが、行の高さの半分だけ下に向かってオフセットされます。

編集：いくつかの実験の後、JavaScriptに頼るのではなく、クラスのCSSルールを手動で作成することで、少なくともシャドウ効果を得ることができることがわかりました。

h1 .ui-text-shadow-copy 
{
    color: #111; /* color */
    filter:
        progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=2); /* blue */
    left: 0px; /* left - blur */
    top: 0px; /* top - blur */
}

しかし、ポジショニングはまだ台無しです。左 0px と上 0px で、影はテキストの半行下に配置されます。それ以外の場合、影の部分はページ全体に広がっています。

4

4 に答える 4

2

私はそれを機能させましたが、.textshadow メソッド内の css スタイルをオーバーライドして、正しく表示する必要がありました。これが私のために働いたものです：

text-shadow をサポートするブラウザーの CSS:

.ts {
  text-shadow: 2px 2px 2px #111111;
  -moz-text-shadow: 2px 2px 2px #111111;
  -webkit-text-shadow: 2px 2px 2px #111111;
}

Modernizr.load:

Modernizr.load([
    {// load jquery
       load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
       complete: function () {
            if (!window.jQuery) {
                Modernizr.load('/TimeTracker/Scripts/jquery-1.7.1.min.js');
            }
    }
    },
    {//other scripts that depend on jquery, including jquery ui
        load: ['some.js','some.other.js']
    },
    {
       test: Modernizr.textshadow,
       nope: ['/url/to/jquery.textshadow.css','/url/to/jquery.textshadow.js']
    },
    '/url/to/file/that/contains/document.ready.js'
]);

document.ready.js:

var m = window.Modernizr;

function loadJqueryTextshadow() {
    $('.ts').textshadow('2px -12px 2px #111111');
}

$(function(){
    if (!m.textshadow) {
        loadJqueryTextshadow();
    }
}

最終結果は、大多数のユーザーが IE、Chrome、および Firefox の違いをまったく知らないほど十分に近いものです。

于 2012-04-09T19:16:50.093 に答える
0

そのためにMicrosoftcssDropShadowフィルターを使用してみてください。

h1 .ui-text-shadow-copy {
  filter: progid:DXImageTransform.Microsoft.DropShadow(Color=#111111, OffX=1, OffY=1);
}

どこ：

  • 色は影のRGB値です
  • Offx -xによるシャドウオフセットのピクセル
  • Offy -yによってオフセットされたシャドウのピクセル
于 2011-09-16T12:36:00.467 に答える
-1

Css3Pie を text-shadow と border-radius に使用できます:

http://css3pie.com/ 

Modernizr.load([
{
test: Modernizr.borderradius && Modernizr.boxshadow,
nope: 'PIE.htc' }
]); /*fine load modernizr*/
于 2012-01-26T16:22:01.233 に答える