Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Фильтры применяемые к тексту в HTML.

Viktor | 24.02.2014 | нет комментариев

Как изменить текст на сайте с помощью фильтров.

Как изменить внешний вид текста в HTML (размер, цвет, “жирность” и т.д.) Вы уже знаете, если не помните просмотрите еще раз уроки с 3-го по 6-й.

Но еще HTML поддерживает работу с Фильтрами. Применяя различные Фильтры к тексту, можно добиться интересных эффектов. Но будьте осторожны, не все браузеры одинаково отображают эффекты которые должны давать фильтры, некоторые браузеры откровенно игнорируют фильтры. Поэтому тестируйте свои web-странички в различных браузерах. Все Фильтры корректно работают Internet Exhlorer. Итак давайте рассмотрим работу фильтров.

Например мы хотим выделить фразу: “Доброго времени суток !!!” Давайте попробуем поизвращать эту фразу :-) , применяя к ней различные фильтры.

Фильтр Mask.

Выделяет текст, точнее фон на котором написан текст, как будто бы Вы выделили текст мышью.

Синтаксис фильтра: 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) , можете их убрать вообще или изменить на своё усмотрение.

Фильтр Shadow.

Создает тень текста.

Синтаксис фильтра: 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-странице:

Фильтр DropShadow.

Добавляет тень к тексту.

Синтаксис фильтра:
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-странице:

Фильтр FlipH.

Переворачивает текст горизонтально.

Синтаксис фильтра: 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-странице:

Фильтр FlipV.

Переворачивает текст вертикально.

Синтаксис фильтра: 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-странице:

Фильтр Glow.

Создает эффект сияния.

Синтаксис фильтра: 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-странице:

Фильтр Wave.

Делает текст волнистым.

Синтаксис фильтра: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-странице:

Фильтр Blur.

Размывает текст в определенную сторону.

Синтаксис фильтра:
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-странице:

Обратитие внимание: цвет размытия не задается, фильтр задает его сам; в данном примере определен только цвет текста.

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

Внимание! Еще раз напоминаю – не все браузеры поддерживают корректрную работу фильтров, поэтому проверяйте как выглядит “Ваша дизайнерская задумка” .

На сегодня это все. Удачи Вам.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB