Использование фильтров в IE

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Дмитрий Харченко

11 ноября 2010


Для просмотра этого примера необходим IE.

Задача.

Сделать красивую тень под текстом и свечение для картинок в IE.

Иногда бывает нужно сделать тень под текстом. В большинстве современных браузеров это делается указанием CSS-свойства text-shadow, и не представляет никаких сложностей. Для IE, который этого свойства не поддерживает (в бета-версии IE 9 его по-прежнему нет), приходится прибегать к ухищрениям.

В Эксплорере предусмотрен целый ворох фильтров для разных эффектов. К сожалению, специально предназначенный для создания теней фильтр Shadow дает результат, далекий от приемлемого. Спасает небольшая хитрость: эффекты фильтров можно накладывать друг на друга.

Хозяйке на заметку

Для того чтобы это работало, CSS-свойство filter нужно записывать так:
filter: progid: DXImageTransform.Microsoft.[название фильтра 1]()
progid: DXImageTransform.Microsoft.[название фильтра 2]().

По новой спецификации Microsoft, формат записи такой:
-ms-filter: "progid: DXImageTransform.Microsoft.[название фильтра1]()". Впрочем, бета версия девятого Эксплорера все равно некорректно отображает эту страницу, если не указать режим эмуляции IE 7.

Если писать просто filter: [название фильтра 1]() [название фильтра 2](), то применен будет только один.


Решение

В статье «(Almost) Cross Browser Text-Shadow» Килиана Вальхофа описано, как, используя фильтры Glow и Blur, сделать более-менее приличную тень в IE. Суть способа состоит в том, что с помощью Glow сначала создается ореол вокруг текста, который размывается фильтром Blur. Полученная таким образом тень подкладывается под текст при помощи абсолютного позиционирования. Приемлемо, но немного грубовато, особенно если тень будет сдвинута относительно текста (этот и следующие примеры вживую нужно смотреть в IE):

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

Тень с использованием Glow и Blur

CSS при этом будет выглядеть так:

01
02
03
04
05

06

07

08
09
10
11
12

13

14 
.shadowed .shadow-1
{
	left: -7px;
	top: -7px;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
}

.shadowed .shadow-2
{
	left:-5px;
	top:-5px;
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=5, enabled='true')";
}

Виноват в этом, как выяснилось, фильтр Glow. Чтобы было совсем красиво, уменьшаем его силу до 1, меняем цвет на черный (вариант — заменить Glow на dropShadow, у которого более понятные параметры) и добавляем еще один фильтр — Alpha. Получается вот так (слева — с Glow, справа — с dropShadow, невооруженным глазом различия малозаметны, и при желании их можно свести к нулю):

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

Облагороженная тень

CSS для этого случая такой:

01
02
03


04


05
06
07
08
09
10
11
12


13


14
15
16
17 
.shadowed .shadow-3
{
	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)
	progid:DXImageTransform.Microsoft.Alpha(opacity=25)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1.0)"
	"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=1.75, enabled='true')";
	color: #111111;
	top: -2px;
	left: -2px;
}

.shadowed .shadow-4
{
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)
	progid:DXImageTransform.Microsoft.Alpha(opacity=25)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.dropShadow(color=#000000,offX=1,offY=1)"
	"progid:DXImageTransform.Microsoft.Alpha(opacity=25)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=2.15, enabled='true')";
	color: #111111;
	top: -2px;
	left: -2px;
}

Аналогичным образом можно создавать свечение вокруг текста. Живой пример — в меню на сайте «Мрии». Забавно, что такое можно было делать еще в пятом IE, когда о text-shadow еще ничего не слышали.

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

A quick brown foxA quick brown fox

Свечение текста

Бонус-трек

У описанного выше метода есть еще одно интересное применение: создание свечения вокруг картинок.

Эффект свечения вокруг картинок

Делается это так:

  1. Кладем копию картинки под исходную со сдвигом вверх и влево, равным значению pixelradius фильтра Blur (или их суммы, если фильтров несколько).
  2. Если фон темный, то первым фильтром к копии добавляем Wave(freq=100, lightStrength=100, strength=0, add=1). Это, по сути, сделает картинку в 2 раза ярче.
  3. Размываем по вкусу.
  4. Чтобы сгладить углы свечения, добавляем фильтр Alpha(opacity=100, finishopacity=30, style=2). Параметр style равный 2 означает, что прозрачность будет изменяться от центра (opacity) к краю картинки (finishopacity). Подробнее о возможностях этого и других фильтров можно почитать на сайте, посвященном яваскрипту.

CSS для примера выше:

01
02
03
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35



36



37
38
39
40
41

42

43 
.ambient-image
{
	position: relative;
	width: 320px;
	height: 240px;
	margin: 30px auto;
}

.ambient-image img
{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}

.ambient-image img.blurred,
.ambient-image img.blurred-light
{
	display: block;
	position: absolute;
	width: 116%;
	height: 112%;
	top: -6%;
	left: -8%;
	margin-top: -30px;
	margin-left: -30px;
	z-index: -1;
	zoom: 1;
}

.ambient-image img.blurred
{
	filter: progid:DXImageTransform.Microsoft.Wave(freq=100, lightStrength=100, strength=0, add=1)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=20, enabled='true')
	progid:DXImageTransform.Microsoft.Blur(pixelradius=10, enabled='true')
	progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=30, style=2);
	-ms-filter: "progid:DXImageTransform.Microsoft.Wave(freq=100, lightStrength=100, strength=0, add=1)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=20, enabled='true')"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=10, enabled='true')"
	"progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=30, style=2)";
}

.ambient-image img.blurred-light
{
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=20, style=2)
	progid:DXImageTransform.Microsoft.Blur(pixelradius=30, enabled='true');
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100, finishopacity=20, style=2)"
	"progid:DXImageTransform.Microsoft.Blur(pixelradius=30, enabled='true')";
}

В случае с картинками есть три существенных недостатка. Во-первых, скорость прорисовки: при наличии большого изображения со свечением даже на достаточно мощной машине браузер будет мучительно тормозить. Во-вторых, свечение рисуется по-разному на разных видеокартах (фильтр использует DirectX). И, пожалуй, самое главное — для других браузеров универсального решения пока нет.