css3 текст-тень в IE9

есть ли простой способ иметь css3 text-shadowработает в IE9? По крайней мере, один текст тени было бы здорово. Я думаю, в идеале IE8 также поддерживается. Я надеюсь, что есть простой плагин jquery или .файл htc, который просто смотрит на свойство CSS text-shadow элемента и реализует его для IE9.

6 52
css css3 internet-explorer-9 css3pie

6 ответов:

да, но не так, как Вы себе представляете. Согласно caniuse (очень хороший ресурс) там нет поддержки и нет polyfill доступны для добавления text-shadow поддержка IE9. Однако,IE имеет свою собственную собственную тень текста (подробнее здесь).

пример реализации, взятый с их сайта (работает в IE5.5 через IE9):

p.shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

для кросс-браузерной совместимости и будущей проверки кода, не забудьте также использовать CSS3 standard text-shadow собственность (подробнее здесь). Это особенно важно, учитывая, что IE10 официально объявила о своем намерении drop поддержка устаревших фильтров dx. Идя вперед, IE10+ будет поддерживать только стандарт CSS3 text-shadow.

60

как 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

попробовать генератор CSS.

вы можете выбрать значения и посмотреть результаты онлайн. Затем вы получаете код в буфер обмена.
Это один из примеров сгенерированного кода:

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

Я искал кроссбраузерное текстовое решение, которое работает при наложении на фоновые изображения. думаю, у меня есть решение для этого, которое не включает дополнительную разметку, js и работает в IE7-9 (я не тестировал 6) и не вызывает проблем с псевдонимами.

это комбинация использования CSS3 text-shadow, которая имеет хорошую поддержку, кроме IE (http://caniuse.com/#search=text-shadow), затем с помощью комбинации фильтров для IE. CSS3 text-stroke support is poor в данный момент.

фильтры, т. е.

светофильтр (http://www.impressivewebs.com/css3-text-shadow-ie/) выглядит ужасно, поэтому я не использовал это.

ответ Дэвида Хьюитта включает в себя добавление фильтров dropshadow в комбинации направлений. ClearType затем удаляется к сожалению, так что мы в конечном итоге с плохо сглаженным текстом.

затем я объединил некоторые элементы, предложенные на useragentman с dropshadow фильтр.

вместе

этот пример будет черным текстом с белым штрихом. Я использую условные классы html по пути к целевой 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

я попробовал фильтры, упомянутые выше, и сильно не понравился эффект, который он создал. Я также не хотел использовать какие-либо плагины, так как они замедлят время загрузки для того, что кажется таким основным эффектом.

в моем случае я искал текстовую тень с размытием 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: -3px 2px 0px rgba(0, 0, 0, 1.0);

вот рабочий пример (см. Большой белый текст над основным изображением баннера) http://www.cb.restaurantconnectinc.com/

1

ответ 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);
}

сначала ты должны указать background-color - Если ваш элемент должен быть прозрачным, просто скопируйте цвет фона родителя или позвольте ему наследовать. Цвет на Цветном фильтре должен соответствовать цвету фона, чтобы исправить эти артефакты вокруг текст (но здесь вы должны скопировать цвет, вы не можете написать inherit). Обратите внимание, что я не сократил dropshadow-filter - это работает, но тени затем обрезаются до размеров элемента (заметно с большими тенями; попробуйте установить смещения по крайней мере 4).

совет: если вы хотите использовать цвета с прозрачностью (альфа-канал) пишите на #нотация была aarrggbb, где AA обозначает шестнадцатеричное значение непрозрачности - от 01 до FE, потому что FF и по иронии судьбы также 00 означает отсутствие прозрачности и поэтому бесполезно.. ^^ Просто идите немного ниже, чем в нотации rgba, потому что тени не мягкие, и тогда то же самое значение альфа будет казаться темнее. ;)

хороший фрагмент для преобразования Альфа-значения для 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