Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

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.

<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

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

 

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

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

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

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

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

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

 

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


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


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

Комментарии добавил(а): В.Тим
Дата: 2011-06-07

Я использую Google Chrome. Ни графические, ни текстовые фильтры не работают. А при просмотре Вашего сайта всё отображается правильно. В Explorer-е вначале блокируются, появляется информационная панель: "В целях безопасности....", после разрешения всё работает. Ваш сайт отображается правильно.

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

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

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


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


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

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

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

Книги

Украшения

Сайт от А до Я

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

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

Охрана труда

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

PHP УРОКИ

Услуги

Скрипты

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

SEO

jQuery

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

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

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

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

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Заработай в Интернете
и осуществи свою МЕЧТУ
"Как?"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


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

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

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

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

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

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

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

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

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

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

Деревянные дома от СПК "Ванда"

Наши ссылки

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

QR код сайта www.LuksWeb.ru

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


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

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT