Урок 20. Фильтры применяемые к изображению в HTML.
Автор: Андрей Краснокутский
Дата: 2009-10-05 Изменяем изображение с помощью фильтров.
В прошлом уроке "Фильтры применяемые к тексту в HTML" мы с Вами изменяли текст на HTML странице с помощью фильтров.
Язык гиперразметки (HTML) позволяет применять фильтры не только к тексту, но и к изображениям.
Давайте рассмотрим какие фильтры работают в HTML и разберем эффекты, достигаемые с помощью фильтров. Все фильтры описанные в данной статье, будут применяться к этому Оригинальному изображению:
Во всех фильтрах прменяются следующие параметры:
-
Размер изображения: 200px X 200px
-
WIDTH="Ширина изображения"
-
HEIGHT="Высота изображения"
-
SRC="Имя изображения"
Оригинальное фото (foto.jpg)
Осветляет изображение.
Синтаксис: STYLE="filter:Alpha(Opacity='Opacity', FinishOpacity='Finishopacity', Style='Style', StartX='X', StartY='Y', FinishX='X', FinishY='Y')"
Opacity - степень осветления (0-100. 0 светло, 100 темно).
FinishOpacity - конечная степень осветления (0-100. 0 светло, 100 темно).
Style - метод осветвления (число: 0(без осветвления), 1(линия) 2(круг) 3(прямоугольник)
StartX, StartY, FinishX, FinishY - координаты осветвляемой области
Листинг 20.1.
<P><IMG STYLE="filter:Alpha(Opacity='90',FinishOpacity='45',Style='2')" SRC="foto.jpg" WIDTH="200" HEIGHT="200"></P>
|
Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Alpha
"Играясь" с цифровыми значениями, можно варьировать степень осветленности всего изображения или его отдельных участков.
Размывает изображение в определенную сторону.
Синтаксис: STYLE="filter:Blur(Add='Add', Direction='Direction', Strength='Strength')"
Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия
Листинг 20.2.
<P><IMG STYLE="filter:Blur(Add='1',Direction='310',Strength='10')" SRC="foto.jpg" WIDTH="200" HEIGHT="200"></P>
|
Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Blur
Инверсия изображения
Синтаксис: STYLE="filter:Invert"
Листинг 20.3.
<P><IMG STYLE="filter:Invert" SRC="foto.jpg" WIDTH="200" HEIGHT="200"></P>
|
Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Invert
Делает изображение черно-белым
Синтаксис: STYLE="filter:Gray"
Листинг 20.4.
<P><IMG STYLE="filter:Gray" SRC="foto.jpg" WIDTH="200" HEIGHT="200"></P>
|
Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Gray
Определенный цвет делается прозрачным.
Синтаксис: STYLE="filter:Chroma(Color='Color')"
Color - цвет выделения в шестнадцатиричном виде (напр. #000000) или название цвета на английском, например, Black, Red, Blue, Green. В данном случае цвет указан для фона.
Листинг 20.5.
<P><IMG STYLE="filter:Chroma(Color='#330300')" SRC="foto.jpg" WIDTH="200" HEIGHT="200"></P>
|
Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Chroma
Негативное изображение
Синтаксис: STYLE="filter:Xray"
Листинг 20.6.
<P><IMG STYLE="filter:Xray" SRC="foto.jpg" WIDTH="200" HEIGHT="200"></P>
|
Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Xray
Использовать фильтры удобно когда нет возможности изменить оригинальное изображени и закачать на сервер, или для достижения определенного художественного эффекта.
Читайте так же:
Спецсимволы в HTML.
Как вставить горизонтальную линию на HTML странице.
Заголовок HTML-документа. Что в нем может быть интересного?
Как изменить внешний вид курсора.
"Прячем" счетчики с помощью CSS.
Просмотров: 11438
Я использую Google Chrome. Ни графические, ни текстовые фильтры не работают.
А при просмотре Вашего сайта всё отображается правильно.
В Explorer-е вначале блокируются, появляется информационная
панель: "В целях безопасности....", после разрешения всё работает.
Ваш сайт отображается правильно.
|