Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Фильтры применяемые к изображению в HTML

Viktor | 24.02.2014 | нет комментариев

Изменяем изображение с помощью фильтров.

В прошлом уроке “Фильтры применяемые к тексту в HTML” мы с Вами изменяли текст на HTML странице с помощью фильтров. Язык гиперразметки (HTML) позволяет применять фильтры не только к тексту, но и к изображениям. Давайте рассмотрим какие фильтры работают в HTML и разберем эффекты, достигаемые с помощью фильтров. Все фильтры описанные в данной статье, будут применяться к этому Оригинальному изображению:

Во всех фильтрах прменяются следующие параметры:

  • Размер изображения: 200px X 200px
  • WIDTH=”Ширина изображения”
  • HEIGHT=”Высота изображения”
  • SRC=”Имя изображения”

Оригинальное фото (foto.jpg)

Фильтр Alpha.

Осветляет изображение.

Синтаксис: 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

“Играясь” с цифровыми значениями, можно варьировать степень осветленности всего изображения или его отдельных участков.

Фильтр Blur.

Размывает изображение в определенную сторону.

Синтаксис: 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

Фильтр Invert.

Инверсия изображения

Синтаксис: STYLE=”filter:Invert”

Листинг 20.3.

<P><IMG STYLE=”filter:Invert” SRC=”foto.jpg” WIDTH=”200″ HEIGHT=”200″></P>

Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Invert

 

Фильтр Gray.

Делает изображение черно-белым

Синтаксис: STYLE=”filter:Gray”

Листинг 20.4.

<P><IMG STYLE=”filter:Gray” SRC=”foto.jpg” WIDTH=”200″ HEIGHT=”200″></P>

Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Gray

Фильтр Chroma.

Определенный цвет делается прозрачным.

Синтаксис: 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

Фильтр Xray.

Негативное изображение

Синтаксис: STYLE=”filter:Xray”

Листинг 20.6.

<P><IMG STYLE=”filter:Xray” SRC=”foto.jpg” WIDTH=”200″ HEIGHT=”200″></P>

Вот как выглядит изображение на web-странице после применения фильтра:

фото после применения фильтра Xray

Использовать фильтры удобно когда нет возможности изменить оригинальное изображени и закачать на сервер, или для достижения определенного художественного эффекта.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB