Css3 text-shadow в IE9

Ответ 1

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

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

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

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

Ответ 2

Поскольку IE9 не поддерживает CSS3 text-shadow, я бы просто использовал свойство filter для IE. Пример в реальном времени: http://jsfiddle.net/dmM2S/

text-shadow:1px 1px 1px red; /* CSS3 */

можно заменить на

filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/

Результаты могут быть очень похожими.

Ответ 3

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

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

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

Ответ 4

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

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

Фильтры IE

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

Дэвид Хьюитт ответ включал добавление фильтров тени в комбинации направлений. 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/

Ответ 6

Ответ 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 - он работает, но тени затем разрезаются на размеры элемента (заметны с большими тенями, попытайтесь установить смещения по меньшей мере на 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/