Представляю Вашему вниманию пятнадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы завершим изучение фильтров на примере пильтров, применяемых к графике.
Как и в прошлом выпуске мы пример для каждого фильтра будет состоять из двух частей: описание параметров фильтра и класс, созданный для этого фильтра. Например, описание графического фильтра Alpha выглядит так:
Здесь Opacity и FinishOpacity определяют начальную и конечную степень прозрачность. Эти значения могут менятся от 0 (полная прозрачность) до 100 (отсутствие прозрачности). Парамерт Style задает стиль прозрачности и может принимать следующие значения: 0 - однородно, 1 - линейно, 2 - радиально, 3 - в прямоугольной области. Дополнительно можно задать координаты области прозрачности с помощью параметров StartX, StartY, FinishX, FinishY.
А класс, созданный для этого фильтра вот так:
Теперь, для того, чтобы использовать этот фильтр необходимо задать стиль для графического тега img:
Результат использования фильтра Alpha.
Свойство размытия изображения задается с помощью фильтра Blur:
Свойство Add со значением 0 определяет результат работы фильтра, а со значением 1 приводит сумму фильтра и исходного изображения. Свойство Direction определяет направление размытости. Значение 0 соответствует вертикальному направлению и может меняться по часовой стрелке с шагом в 45 градусов. Свойство Strength определяет интенсивность размытости. Пример использования размытости:
Результат использования фильтра Blur.
Фильтры горизонтального FlipH и вертикального поворота текста FlipV не имеют параметров. Их использование аналогично рассмотренному в предыдущем выпуске к текстовым тегам.
Для создания нинверсии изображения используется фильтр Invert:
Результат использования фильтра Invert.
Для создания изображения в тонах серого используется фильтр Gray:
Результат использования фильтра Gray.
Прозрачность для одного цвета (Chroma).
Использование этого фильтра для изображения в формате jpg как правило затруднено из-за невозможности определить область залиную одним отенком цвета. Эффективней использовать изображение в формате gif из-за того, что в этом формате используется вполне определенная палитра цветов. Пример использования фильтра Chroma (делаем черный цвет прозрачным).
Негативное изображение (Xray):
Отметим, что этот фильтр отличен от фильтра инверсии. При инверсии получается изображение в дополнительных цветах, а в негативе дополнительно переводится изображение в отенки серого. Пример использования фильтра Xray
Синусоидально деформированный объект вдоль вертикальной линии создается с помощью фильтра Пример использования фильтра Wave. Применение аналогично описанному в предыдущем выпуске способу.
Последний и, пожалуй, самый интересный фильтр - анимированное появление изображения (RevealTrans):
Свойство Duration определяет продолжительность действия фильтра. Свойство Transition определяет стиль появления изображения. Значение может быть от 0 до 22 (каждое значение соответствует различному стилю появления изображения). Значение 23 и выше задает случайный стиль (меняется при перезагрузке страницы). Пример:
На примере фильтра RevealTrans мы видим, что для запуска динамического изменения на странице необходимо использование скриптов. Этом мы займемся со следующего выпуска.
Если у Вас есть авторские статьи по веб или графическому дизайну (или просто хорошие авторские статьи на любую тему) и Вы хотите ими поделиться с другими, то свяжитесь со мной со страницы контактов. Не забудьте указать Ваше имя и адрес Вашего веб-сайта имеющего отношение к статье.
Запущен в полнофункциональном режиме электронный Интернет магазин. В настоящий момент Вы можете купить PIN-коды карт экспресс-оплаты мобильной связи и доступа в Интернет или же напрямую пополнить счет для Вашего мобильного телефона. Если Вы не нашли какие-либо интересующие Вас товары, пишите, ассортимент товаров будет дополнен.
Еще одна приятная новость. Готовиться электронный учебник по html-верстке. В ближайшее время он будет выложен совершенно бесплатно на сайте wmplace.net.
09.09.2005 Вышла первая бета-версия Firefox 1.5
06.09.2005 Провайдеры обещают снижение цен на интернет в 10 раз
05.09.2005 Ожидается выход бета-версии Firefox 1.5
P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").