|
|
|
|
Урок 20. Фильтры применяемые к изображению в HTML. Автор: Андрей Краснокутский Дата: 2009-10-05 Изменяем изображение с помощью фильтров.В прошлом уроке "Фильтры применяемые к тексту в HTML" мы с Вами изменяли текст на HTML странице с помощью фильтров. Язык гиперразметки (HTML) позволяет применять фильтры не только к тексту, но и к изображениям. Давайте рассмотрим какие фильтры работают в HTML и разберем эффекты, достигаемые с помощью фильтров. Все фильтры описанные в данной статье, будут применяться к этому Оригинальному изображению: Во всех фильтрах прменяются следующие параметры:
Оригинальное фото (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 темно).
Вот как выглядит изображение на web-странице после применения фильтра:
фото после применения фильтра Alpha "Играясь" с цифровыми значениями, можно варьировать степень осветленности всего изображения или его отдельных участков.
Фильтр Blur. Размывает изображение в определенную сторону. Синтаксис: STYLE="filter:Blur(Add='Add', Direction='Direction', Strength='Strength')" Add - умеренное или сильное размытие (соответственно 1 или 0) Листинг 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-документа. Что в нем может быть интересного? Как изменить внешний вид курсора. "Прячем" счетчики с помощью CSS.
Просмотров: 10635 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): В.Тим Я использую Google Chrome. Ни графические, ни текстовые фильтры не работают. А при просмотре Вашего сайта всё отображается правильно. В Explorer-е вначале блокируются, появляется информационная панель: "В целях безопасности....", после разрешения всё работает. Ваш сайт отображается правильно. Комментарии добавил(а): вы Не работает, че делать Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |