Используем встроенные фильтры IE. Часть 3

Автор: Topol Понедельник, Апрель 16th, 2012 Нет комментариев

Рубрика: Уроки html

В этой части я закончу описание фильтров. Итак, вот что осталось.

  1. … — смотрите во второй части.
  2. Blur — размытие изображения
  3. Gradient — градиентная заливка
  4. Pixelate — одноимённый фильтр Photoshop
  5. Light — добавление источника света
    1) Подробная установка
    2) Основная конструкция фильтра
    3) Подведём предварительные итоги…
    4) Избегайте этой ошибки!
    5) addAmbient — эффект общего света
    6) addCone — эффект светового конуса
    7) addPoint — точечный источник света
    8) Дополнительные параметры фильтра

 18) Blur — размытие изображения.

Ваш текст. Ваш текст. FILTER: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);
PixelRadius Сила размытия изображения.
MakeShadow Если стоит false, то результат будет как на примере слева. Если true, то объект, к которому вы применяете фильтр, будет полностью залит чёрным цветом и после чего размыт. В случае этого изображения, получился бы размытый чёрный квадрат с размытой стрелкой в верхней части.
ShadowOpacity Этот параметр задаёте, только если в MakeShadow стоит значение true. Он отвечает за прозрачность чёрного цвета. Прозрачность в интервале от 0 (полностью прозрачен) до 1 (полностью непрозрачен). Не забывайте, что в десятичных дробях вместо запятой ставят точку.
В этом примере я не повторялся. Эффект от фильтра blur, описанного ранее (первая часть, номер 2), подобен в Photoshop «Размытию в движении». В нём границы изображения не размыты полностью. В этом же фильтре размывается всё изображение.

 19) Gradient — градиентная заливка.

Ваш текст. Ваш текст. FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#0000ff, endColorStr=#ff8c00);
gradientType Тип градиента. Если 0,то градиент вертикальный, если 1, то градиент будет горизонтальным.
 startColorStr Первый цвет градиента.
endColorStr Второй цвет градиента.
Замена всех цветов на обратные. Одинаково хорошо работает и с текстом и с изображениями.

 20) Pixelate — одноимённый фильтр Photoshop.

Ваш текст. Ваш текст. FILTER: progid:DXImageTransform.Microsoft.Pixelate( maxsquare=10);
maxsquare — размер ячейки в пикселях.

 21) Light — добавление источника света.

Ваш текст. Ваш текст. FILTER:light()
Фильтр light является наиболее сложным фильтром из всех, и поэтому я опишу его последним. Задать его очень легко FILTER:light(). Но вот управлять им можно только используя java script. Ведь если вы просто зададите фильтр какому-нибудь элементу, то он станет чёрным (свет выключен).

А теперь подробная установка.

Ваш текст.

1)     <head>
2)
3)     <style>
4)     <!—
5)     #swet{width:150 ; FILTER:light()}
6)     —>
7)     </style>
8)
9)     </head>
10)   <body>
11)
12)   <div id=»swet«>
13)   <img border=»0″ src=»layers1/logo1.gif» width=»150″ height=»150″>
14)   <p><font face=»Times New Roman» size=»4″ >Ваш текст.</font>
15)   </div>
16)
17)   <SCRIPT language=JavaScript>
18)   if(document.all){
19)   document.all["swet"].filters.light.addAmbient(255,200,50,100)
20)   }
21)   </SCRIPT>
22)
23)   </body>
Вот полный код, который вам следует написать, чтобы получить такое же изображение, как вы видите слева. Провожу его анализ (в левом столбце указаны номера строк).
3-7 В теге <head> мы описываем таблицу стилей, используя конструкцию <style>…<style>, в которой задаём слой (#) с именем swet. Этому слою мы присваиваем фильтр light(), и делаем его [слоя] ширину (width) равной 150.
12-15 Это и есть слой swet.  В нем расположен логотип этого сайта (<img…>) и текст (<font…>Ваш текст</font>). Если бы это был любой другой фильтр, то можно было бы остановиться (при этом не забыв добавить класс к рисунку и тексту: class=»"). Но параметры освещения нужно задать в скрипте.
Filter: имя фильтра(параметры фильтра) — это уже знакомая вам упрощённая схема задания всех фильтров. У фильтра light эта же упрощённая схема выглядит так:

Filter: light()
<SCRIPT language=JavaScript>
задания параметров для элемента, к которому применён фильтр light.
</SCRIPT>
17-19 if(document.all){

}
Эта строчка ява скрипта проверяет какой браузер пришёл на страницу. IE возвращает значение true, а NN (и другие браузеры) — false. Если бы этой проверки не было NN показал бы сообщение об ошибке. Итак, если значение true, то идём дальше, а если false, то останавливаемся.
document.all["swet"].filters.light.addAmbient(255,200,50,100)Объясняю, как понимает эту строку скрипт.

Сначала он находит слой swet (document.all["swet"]). После этого он обращается к массиву всех фильтров, применённых к этому слою* (filters) и ищет среди них фильтр light. Найдя его, он сообщает ему тип освещения, который он должен показать (addAmbient), и параметры этого типа освещения (255,200,50,100).

* К классу, слою, и вообще к любому объекту может быть применено несколько фильтров сразу. Но об этом в следующих частях.

Подведём итоги. Что вам нужно сделать, чтобы к любому элементу добавить слой Light:

  1. Определить слой, к которому вы применяете фильтр light.
  2. Поместить нужные объекты в этот слой.
  3. Определить скриптом параметры освещения.

Есть ещё один важный момент, про который не следует забывать: скрипт помещайте всегда после слоя с объектами. Иначе фильтр может не работать. Вот такая конструкция неверна:

12)   <SCRIPT language=JavaScript>
13)   if(document.all){
14)   document.all["swet"].filters.light.addAmbient(255,200,50,100)
15)   }
16)   </SCRIPT>
17)
18)   <div id=»swet«>
19)   <img border=»0″ src=»layers1/logo1.gif» width=»150″ height=»150″>
20)   <p><font face=»Times New Roman» size=»4″ >Ваш текст.</font>
21)   </div>

Теперь осталось только описать какие типы и параметры освещения бывают.

Ваш текст.
Ваш текст.

addAmbient(255,200,50,100) — значения примера слева.
addAmbient(R, G, B, strength) — общий случай.
R, G, B Это цвет освещения. Каждое из значений находится в интервале от 0 до 255
 strength Интенсивность освещения (от 0 до 100).
Этот метод создаёт эффект общего света. Вся картинка освещается равномерно.

 

Ваш текст.
Ваш текст.

addCone(75,165,10,    75, 0,    50,100,50,    100,30) — значения  примера слева.
addCone(x0,y0,R,    x1,y1,     R,G,B,     strength,angle) — общий случай.
x0,y0 Координаты источника света. Задаются в пикселях относительно верхнего левого угла изображения.
R Сопряжение прямых. Если стоит 0, то угол будет без сопряжения (обыкновенных угол). Если больше 0, то угол будет «закруглённым».
x1,y1 Координаты конца биссектрисы угла. А попросту — координаты конца освещения.
R, G, B Это цвет освещения. Каждое из значений находится в интервале от 0 до 255
 strength Интенсивность освещения (от 0 до 100).
angle Угол освещения. Он задаётся не в градусах!
Этот параметр фильтра создаёт конусное освещение.

 

Ваш текст.
Ваш текст.

addPoint(75,75,30, 200,250,100, 100) — значения  примера слева.
addPoint(x0,y0,R,    R,G,B,    strength) — общий случай.
x0,y0 Координаты источника света. Задаются в пикселях относительно верхнего левого угла изображения.
R Радиус освещённого круга.
R, G, B Это цвет освещения. Каждое из значений находится в интервале от 0 до 255
 strength Интенсивность освещения (от 0 до 100).
Создание точечного источника света — своеобразного светящегося круга.

Это все типы освещения, которые доступны фильтру light. Но у него есть ещё параметры, которые больше нужны не для освещения, а для анимации. В этой статье я не буду подробно на них останавливаться, а лишь кратко опишу.

Метод

Результат

Параметры

ChangeColor Изменяет цвет освещения light — номер светового эффекта (может быть несколько)
R,G,B — цвет
absolute — интенсивность эффекта
ChangeStrength Изменяет интенсивность источника света light — номер светового эффекта (может быть несколько)
strength — новое значение силы.
absolute — значение false этого параметра увеличивает интенсивность на заданное значение strength, true явно заменяет ее на указанное значение
Clear Устраняет все предыдущие эффекты фильтра light.
moveLight Передвигает источник света light — номер светового эффекта (может быть несколько)
x, y, z — новые координаты
absolute — значение false этого параметра делает систему координат относительной, true — абсолютной.

Источник: webcorp.ru

Оставить комментарий

Чтобы оставлять комментарии Вы должны быть авторизованы.

Похожие посты