ЭКСПЛОРЕР ВМЕСТО ФОТОШОПА:
визуальные фильтры в HTML 4.0

Pony (pony@xakep.ru)

Спецвыпуск Xakep, номер #027, стр. 027-054-2

Пример:

filter:blur(add=true, direction=90, strength=6);

Фильтр Сhroma

Фильтр Chroma делает заданный цвет прозрачным. Незаменим во многих ситуациях, в особенности, когда у тебя на странице есть чужая картинка, которая лажает весь дизигн, например, счетчик посещений. И даже, в принципе, все в нем ОК за исключением мерзкой зеленой обводки. Натравив на него этот фильтр, ты можешь сделать любой отвратный цвет прозрачным. Более того, фильтр можно применять даже к картинкам типа .jpg, что иногда бывает очень кстати.

Синтаксис:

filter:Chroma(Color=color)

где:

Color - любой именованный цвет или заданный как #RRGGBB

Пример:

filter: chroma(color="#C8A1A1")

Фильтр Dropshadow

Фильтр Drop Shadow создает эффект подвешенности в воздухе. Можно намутить великолепные эффекты и при этом не извращать саму картинку.

Синтаксис:

filter:DropShadow(Color=color, OffX=pixels, OffY=pixels, Positive=true|false)

где:

Color - цвет тени, любой именованный цвет или заданный как #RRGGBB;

OffX - смещение тени по Х;

OffY - смещение тени по Y;

Positive - принимает значение true или false;

Пример:

filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);

Фильтры Flip Horizontal и Flip Vertical

Фильтр Flip Horizontal зеркально отражает объект по горизонтали, Flip Vertical - по вертикали.

Синтаксис:

filter:FlipH() для Flip Horizontal

filter:FlipV() для Flip Vertical

Фильтр Glow

Фильтр Glow создает эффект свечения.

Синтаксис:

filter:Glow(Color=color, Strength=1-255)

где:

Color - цвет свечения, любой именованный цвет или заданный как #RRGGBB;

Strength - интенсивность свечения.

Пример:

filter:glow(color=#ff0000, strength=5);

Фильтр Gray

Фильтр Gray Scale представляет изображение черно-белым. Незаменимый фильтр, если тебе вдруг взбрело в голову сделать версию для печати на своей паге. Еще этот фильтр иногда полезен для приведения атцтойных счетчиков в соответствие с твоим дизайном :).

Синтаксис:

filter:Gray()

Фильтр Invert

Фильтр Invert инвертирует цвета и значения яркости, что делает объекты похожими на негатив.

Синтаксис:

filter:Invert()

Фильтр Light

Фильтр Light добавляет световые эффекты. Очень специфический фильтр, так как простое его применение делает объект черным, но при определенной доле смекалки с его помощью можно творить настоящие шедевры.

Синтаксис:

filter:light()

Пример:

Чтобы заставить фильтр Light, нормально работать, нужно заюзать один из следующих методов:

AddAmbient(R,G,B,strength) - добавляет "окружающий" источник света к изображению. Этот вид света является не направленным и освещает все изображение.

Синтаксис:

object.filters.light.addAmbient(R,G,B,strength)

где R, G и B - значения от 0 до 255, определяющие цвет света, и strength - значение, определяющее количество света, то есть его силу.

Пример:

Для того чтобы заставить это работать, нашу тестовую страничку нужно дополнить кодом:

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

function (){

divFilter.filters.light.addAmbient(255,200,50,100)

}

</SCRIPT>

<form>

<input type="Button" value="Дать Свет" onclick="addAmbient()">