RSS-лента

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

Автор: Андрей Краснокутский

Дата: 2009-10-05

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

В прошлом уроке "Фильтры применяемые к тексту в 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.

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

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

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

Фильтр Blur.

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

Синтаксис: STYLE="filter:Blur(Add='Add', Direction='Direction', Strength='Strength')"

Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия

Листинг 20.2.

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

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

Фильтр Invert.

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

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

Листинг 20.3.

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

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

Фильтр Gray.

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

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

Листинг 20.4.

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

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

Фильтр Chroma.

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

Синтаксис: STYLE="filter:Chroma(Color='Color')"

Color - цвет выделения в шестнадцатиричном виде (напр. #000000) или название цвета на английском, например, Black, Red, Blue, Green. В данном случае цвет указан для фона.

Листинг 20.5.

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

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

Фильтр Xray.

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

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

Листинг 20.6.

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

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

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

Читайте так же:

Спецсимволы в HTML.

Как вставить горизонтальную линию на HTML странице.

Заголовок HTML-документа. Что в нем может быть интересного?

Как изменить внешний вид курсора.

"Прячем" счетчики с помощью CSS.

Просмотров: 9408

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Добавить Ваш комментарий:

Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео Курс по созданию Информационного Бизнеса в Интернете Узнать сейчас >>> Хотите заработать? 2-х Уровневая Партнерская программа! Присоединяйтесь.

Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT