css3 текстовая тень в IE9 - PullRequest
Новая
       33

css3 текстовая тень в IE9

52 голосов
/ 02 августа 2011

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

Ответы [ 6 ]

60 голосов
/ 02 августа 2011

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

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

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

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

26 голосов
/ 02 августа 2011

Поскольку 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*/

Вы можете получить очень похожие результаты.

13 голосов
/ 06 декабря 2012

Попробуйте Генератор CSS .

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

text-shadow: 1px 1px 2px #a8aaad;
filter: dropshadow(color=#a8aaad, offx=1, offy=1);
5 голосов
/ 18 июля 2012

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

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

IE Фильтры

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

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

Затем я скомбинировал некоторые элементы, предложенные в useragentman , с фильтрами drophadow.

Собираем все вместе

Этот пример будет черным текстом с белым штрихом. Я использую условные 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;
}
1 голос
/ 16 ноября 2012

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

В моем случае я искал тень для текста с размытием 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/

0 голосов
/ 28 июля 2015

Ответ 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). Обратите внимание, что я не сократил drophadow-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/

...