Главная
Блог разработчиков 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
При перепечатке ссылка на источник обязательна
Оставить комментарий
БАЗА ЗНАНИЙ
СЛУЧАЙНАЯ СТАТЬЯ
СЛУЧАЙНЫЙ БЛОГ
СЛУЧАЙНЫЙ МОД
СЛУЧАЙНЫЙ СКИН
НОВЫЕ МОДЫ
НОВЫЕ СКИНЫ
НАКОПЛЕННЫЙ ОПЫТ
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB