Учебник по веб дизайну
 Свободное программное обеспечение. Доступно. Бесплатно. Легально.
Учебник
HTML
CSS
DHTML
JavaScript
SSI
Раскрутка
Справочник
HTML
JavaScript
SSI
Браузеры
Хостинг
Скрипты
JavaScript
PHP
Статьи
SEO
HTML
Flash
Все об Интернет
Новости Интернет
Утилиты
Конструктор
Информер
А так же...
Наши баннеры
Контакты
Гостевая
Реклама на сайте

Графические фильтры

Здравствуйте, уважаемые подписчики!

Представляю Вашему вниманию пятнадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы завершим изучение фильтров на примере пильтров, применяемых к графике.


Содержание выпуска:
Графические фильтры

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

filter:Alpha(Opacity='Opacity', FinishOpacity='FinishOpacity', Style='2', StartX='StartX', StartY='StartY', FinishX='FinishX', FinishY='FinishY')

Здесь Opacity и FinishOpacity определяют начальную и конечную степень прозрачность. Эти значения могут менятся от 0 (полная прозрачность) до 100 (отсутствие прозрачности). Парамерт Style задает стиль прозрачности и может принимать следующие значения: 0 - однородно, 1 - линейно, 2 - радиально, 3 - в прямоугольной области. Дополнительно можно задать координаты области прозрачности с помощью параметров StartX, StartY, FinishX, FinishY.

А класс, созданный для этого фильтра вот так:

<style>
.img_alpha{filter:Alpha(Opacity='100',FinishOpacity='0',Style='3');}
</style>

Теперь, для того, чтобы использовать этот фильтр необходимо задать стиль для графического тега img:

<img src="./img/image.gif" class="img_alpha">

Результат использования фильтра Alpha.

Свойство размытия изображения задается с помощью фильтра Blur:

filter:Blur(Add='Add', Direction='Direction', Strength='Strength',)

Свойство Add со значением 0 определяет результат работы фильтра, а со значением 1 приводит сумму фильтра и исходного изображения. Свойство Direction определяет направление размытости. Значение 0 соответствует вертикальному направлению и может меняться по часовой стрелке с шагом в 45 градусов. Свойство Strength определяет интенсивность размытости. Пример использования размытости:

.img_blur{filter:Blur(Add='1',Direction='45',Strength='10');}

Результат использования фильтра Blur.

Фильтры горизонтального FlipH и вертикального поворота текста FlipV не имеют параметров. Их использование аналогично рассмотренному в предыдущем выпуске к текстовым тегам.

Для создания нинверсии изображения используется фильтр Invert:

filter:Invert

Результат использования фильтра Invert.

Для создания изображения в тонах серого используется фильтр Gray:

filter:Gray

Результат использования фильтра Gray.

Прозрачность для одного цвета (Chroma).

filter:Chroma(Color='Color')

Использование этого фильтра для изображения в формате jpg как правило затруднено из-за невозможности определить область залиную одним отенком цвета. Эффективней использовать изображение в формате gif из-за того, что в этом формате используется вполне определенная палитра цветов. Пример использования фильтра Chroma (делаем черный цвет прозрачным).

Негативное изображение (Xray):

filter:Xray

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

Синусоидально деформированный объект вдоль вертикальной линии создается с помощью фильтра Пример использования фильтра Wave. Применение аналогично описанному в предыдущем выпуске способу.

Последний и, пожалуй, самый интересный фильтр - анимированное появление изображения (RevealTrans):

filter:RevealTrans(Duration='Duration', Transition='Transition')

Свойство Duration определяет продолжительность действия фильтра. Свойство Transition определяет стиль появления изображения. Значение может быть от 0 до 22 (каждое значение соответствует различному стилю появления изображения). Значение 23 и выше задает случайный стиль (меняется при перезагрузке страницы). Пример:

.img_revealtrans{filter:RevealTrans(Duration='1', Transition='12');}
Пример использования фильтра RevealTrans (с помощью приведенного на странице скрипта вы сможете подобрать тот параметр Transition, который вам больше всего подходит).

Анонс следующего выпуска

На примере фильтра RevealTrans мы видим, что для запуска динамического изменения на странице необходимо использование скриптов. Этом мы займемся со следующего выпуска.

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

Если у Вас есть авторские статьи по веб или графическому дизайну (или просто хорошие авторские статьи на любую тему) и Вы хотите ими поделиться с другими, то свяжитесь со мной со страницы контактов. Не забудьте указать Ваше имя и адрес Вашего веб-сайта имеющего отношение к статье.

Запущен в полнофункциональном режиме электронный Интернет магазин. В настоящий момент Вы можете купить PIN-коды карт экспресс-оплаты мобильной связи и доступа в Интернет или же напрямую пополнить счет для Вашего мобильного телефона. Если Вы не нашли какие-либо интересующие Вас товары, пишите, ассортимент товаров будет дополнен.

Еще одна приятная новость. Готовиться электронный учебник по html-верстке. В ближайшее время он будет выложен совершенно бесплатно на сайте wmplace.net.

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").

Реклама

Plug&Pray
главная :: наверх :: добавить в избранное :: сделать стартовой :: рекомендовать другу :: карта сайта

Rambler's Top100

Страница сгенерированна за 0.0212 сек.
Сайт оптимизирован под разрешение 800х600 и браузер MS IE 6.0.
Copyright © 2005-2010 originweb.info, design.originweb.info.
Хостинг ruweb.net