WebCorp.ru - Центр Интернет-разработчиков

  Перейти на главную WebCorp.ru  Посмотреть карту сайта  Написать письмо админу    
  Новичкам
  HTML, скрипты
  Продвижение
  Интернет-экономика
  Партнёрские программы
  Программирование
  XML
  Графика
  Разное
  Шрифты
  Фильтры
  Музей ошибок
 
 
 
 

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

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

  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 - абсолютной.




<< предыдущая || следующая >>

Автор: Дмитрий М.
 easy-web.narod.ru
   

Администратор: admin
© WebCorp 2004-2009
 		 . Черная магия. Форум магия также Любовный приворот. Приворожить любимого.   Заказать mercedes vito в Москве.