|
|
|
Графические фильтрыПредставляю Вашему вниманию пятнадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске мы завершим изучение фильтров на примере пильтров, применяемых к графике. Содержание выпуска: Как и в прошлом выпуске мы пример для каждого фильтра будет состоять из двух частей: описание параметров фильтра и класс, созданный для этого фильтра. Например, описание графического фильтра 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.
09.09.2005 Вышла первая бета-версия Firefox 1.5 06.09.2005 Провайдеры обещают снижение цен на интернет в 10 раз 05.09.2005 Ожидается выход бета-версии Firefox 1.5 P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет"). |
|
Понаставили "Линуксов" нормальному "Виндоусу" упасть негде...