Урок 19. Фильтры применяемые к тексту в HTML.
Автор: Андрей Краснокутский
Дата: 2009-08-26 Как изменить текст на сайте с помощью фильтров.
Как изменить внешний вид текста в HTML (размер, цвет, "жирность" и т.д.) Вы уже знаете, если не помните просмотрите еще раз уроки с 3-го по 6-й.
Но еще HTML поддерживает работу с Фильтрами. Применяя различные Фильтры к тексту, можно добиться интересных эффектов. Но будьте осторожны, не все браузеры одинаково отображают эффекты которые должны давать фильтры, некоторые браузеры откровенно игнорируют фильтры. Поэтому тестируйте свои web-странички в различных браузерах. Все Фильтры корректно работают Internet Exhlorer. Итак давайте рассмотрим работу фильтров.
Например мы хотим выделить фразу: "Доброго времени суток !!!" Давайте попробуем поизвращать эту фразу :-) , применяя к ней различные фильтры.
Выделяет текст, точнее фон на котором написан текст, как будто бы Вы выделили текст мышью.
Синтаксис фильтра: STYLE="filter:Mask(Color='Color')
Color - цвет выделения в шестнадцатиричном виде (напр. #000FFF) или название цвета на английском, например, Red, Blue, Green. Такое определение цвета применяется во всех фильтрах, поэтому дальше это повторяться не будет.
Листинг 19.1.
<p STYLE="filter:Mask(Color='Red'); width: 15%; height: 28; font-size: 16pt; font-weight: bold; text-align: center;"> Пример </p>
|
|
Вот как это смотрится web-странице:

Кроме Фильтра в коде листинга присутствуют элементы форматировния текста - стиль (style) , можете их убрать вообще или изменить на своё усмотрение.
Создает тень текста.
Синтаксис фильтра: STYLE="filter:Shadow(Color='Color', Direction='Direction')"
Color - цвет тени.
Direction - направление тени (от 0 до 315).
Листинг 19.2.
<P STYLE="filter:Shadow(Color='#000000', Direction='50'); width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Red;"> Доброго времени суток !!! </P>
|
|
Вот как это смотрится web-странице:

Добавляет тень к тексту.
Синтаксис фильтра:
STYLE="filter:DropShadow(Color='Color', OffX='Offx', OffY='Offy', Positive='Positive')"
Color - Цвет тени
OffX - Смещение тени по X
OffY - Смещение тени по Y
Positive - Тень слева или справа (0 или 1 соответственно)
Листинг 19.3.
<P STYLE="filter:DropShadow(Color='#7FFF00',OffX='3',OffY='3',Positive='1'); width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Green;"> Доброго времени суток !!! </P>
|
|
Вот как это смотрится web-странице:

Переворачивает текст горизонтально.
Синтаксис фильтра: STYLE="filter:FlipH"
Листинг 19.4.
<P STYLE="filter:FlipH; width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Red;"> Доброго времени суток !!! </P>
|
|
Вот как это смотрится web-странице:

Переворачивает текст вертикально.
Синтаксис фильтра: STYLE="filter:FlipV"
Листинг 19.5.
<P STYLE="filter:FlipV; width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Red;"> Доброго времени суток !!! </P>
|
|
Вот как это смотрится web-странице:

Создает эффект сияния.
Синтаксис фильтра: STYLE="filter:Glow(Strength='Strength', Color='Color')"
Strength - сила, с которой текст засияет (0-100)
Color - цвет, которым текст засияет.
Листинг 19.6.
<P STYLE="filter:Glow(Strength='3', Color='#00FF00'); width: 40%; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: DarkGreen;"> Доброго времени суток !!! </P>
|
|
Вот как это смотрится web-странице:

Делает текст волнистым.
Синтаксис фильтра:STYLE="filter: Wave( Freq='Freq', Add='Add', LightStrength='LightStrength', Phase='Phase', Strength='Strength')"
Freq - колличество волн
Add - показать/скрыть окантовку (1 или 0 соответственно)
LightStrength - сила волн
Phase - угол волн
Strength - интенсивность волн
Листинг 19.7.
<P STYLE="filter:Wave(Freq='5', Add='0', LightStrength='1', Phase='2', Strength='2'); width: 40%; height: 28; font-size: 18pt; font-weight: bold; text-align: center; color: Green;"> Доброго времени суток !!! </P>
|
|
Вот как это смотрится web-странице:

Размывает текст в определенную сторону.
Синтаксис фильтра:
STYLE="filter:Blur(Add='Add', Direction='Direction', Strength='Strength')"
Add - умеренное или сильное размытие (соответственно 1 или 0)
Direction - в какую сторону произойдет размытие (oт 0 до 315)
Strength - смещение размытия
Листинг 19.8.
<P STYLE="filter:Blur(Add='1',Direction='30',Strength='10'); width: 40%; height: 28; font-size: 16pt; font-weight: bold; text-align: center; color: Blue;"> Доброго времени суток !!! </P>
|
|
Вот как это смотрится web-странице:
Обратитие внимание: цвет размытия не задается, фильтр задает его сам; в данном примере определен только цвет текста.
Применяя фильтры к различным участкам текста, можно добиться очень интересных эффектов.
Внимание! Еще раз напоминаю - не все браузеры поддерживают корректрную работу фильтров, поэтому проверяйте как выглядит "Ваша дизайнерская задумка" .
На сегодня это все. Удачи Вам.
Читайте так же:
Почтовая рассылка Главный инструмент Интернет Бизнесмена
Форматы выпусков Почтовой рассылки.
Обучающие Видео Уроки. Скачать бесплатно.
Как я шёл к созданию своего сайта http://www.PC-Cantri.ru
Как создать бизнес и заработать на SMS сообщениях?
Как быстро создать свои собственные информационные товары?
Рекомендации по созданию сайта. С чего начать?
Просмотров: 15377
В листинге 19.1 вместо "привет" нужно было написать "доброго времения суток" или наоборот.....хотя и так все доступно и понятно =)
Жаль, что только под IE это робит)))
|