Иногда бывает нужно сделать тень под текстом. В большинстве современных браузеров это делается указанием 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
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
Бонус-трек
У описанного выше метода есть еще одно интересное применение: создание свечения вокруг картинок.
Делается это так:
-
Кладем копию картинки под исходную со сдвигом вверх и влево, равным значению
pixelradius фильтра Blur (или их суммы, если фильтров несколько).
-
Если фон темный, то первым фильтром к копии добавляем
Wave(freq=100, lightStrength=100, strength=0, add=1). Это, по сути, сделает картинку в 2 раза ярче.
-
Размываем по вкусу.
-
Чтобы сгладить углы свечения, добавляем фильтр
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). И, пожалуй, самое главное — для других браузеров универсального решения пока нет.
/pw.gif)
/pl.gif)
Для просмотра этого примера необходим IE./cc4.gif){kind=small}
/cc1.gif){kind=small}
/cc3.gif){kind=small}
/cc2.gif){kind=small}
