Главная :: Архив рассылки :: Текстовые фильтры

Текстовые фильтры

Здравствуйте, уважаемые подписчики!

Представляю Вашему вниманию четырнадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске рассмотрим готовые к использованию шаблоны для текстовых и графических фильтров.

Содержание выпуска:

Использование фильтров.
Анонс следующего выпуска.
Новости сайта.

Использование фильтров

В предыдущем выпуске были представлены общие сведения о фильтрах. В этом выпуске рассмотрим рабочие примеры (коды) для их использования.

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

filter:DropShadow(Color='Color', OffX='Offx', OffY='Offy', Positive='Positive')

Здесь Color - цвет тени, OffX - смещение по X, OffY - смещение по Y, Positive - расположение тени слева или справа (0 или 1, соответственно).

А класс, созданный для этого фильтра вот так:

Теперь, для того, чтобы использовать этот фильтр необходимо задать стиль для текстового тега, например, span, p или div:

<div class=dropshadow>пример использования тени (золотом на голубом)</div>

В результате получим:

пример использования тени (золотом на голубом)

Отметим, что для текстовых фильтров класс должен содержать информацию об размере текстового поля, т.е. необходимо задавать свойства width и height. В противном случае фильтр работать не будет.

Свойство размытия изображения задается с помощью фильтра Blur:

filter:Blur(Add='Add', Direction='Direction', Strength='Strength',)

Свойство Add со значением 0 определяет результат работы фильтра, а со значением 1 приводит сумму фильтра и исходного изображения. Свойство Direction определяет направление размытости. Значение 0 соответствует вертикальному направлению и может меняться по часовой стрелке с шагом в 45 градусов. Свойство Strength определяет интенсивность размытости. Пример использования размытости:

.blur{filter:Blur(Add='1',Direction='45',Strength='10'); width:300px; height:50px; font-size:26px;}

В итоге получим:

Размытый текст

Фильтры горизонтального FlipH и вертикального поворота текста FlipV не имеют параметров. Например, для горизонтального поворота текста (и, по аналогии, для вертикального) можно использовать класс:

.fliph{filter:flipH; width:200px; height:91px;}

Сияние текста Glow:

filter:Glow(Strength='Strength', Color='Color')

Сила сияния Strength меняется от 0 до 100, а его цвет задается свойством Color.

Пример использования сияния текста:

.glow{filter:Glow(Strength:10,Color:darkgreen); width:200px; height:20px; color: lightgreen;}

А вот и результат! текст просто светится зеленым!!!

Отображение текста так, как будто он выделен мышью Mask:

filter:Mask(Color='Color')

Цвет, окружающий текст, задается свойством Color.

Пример использования выделения текста:

.mask{filter:Mask(color:navy); width:300px; height:20px;}

В результате: выделеный текст

Тень для объекта Shadow. В отличии от DropShadow создаваемая тень расплывается.

filter:Shadow(Color='Color', Direction='Direction')

Параметр Color задает цвет тени, Direction определяет направление от 0 (вертикально вверх с шагом 45 градусов).

Пример использования тени:

.shadow{filter:Shadow(color=blue, direction=135); width:300px; height:91px; color:gold; font-size:20px;font-weight:bold;}

Текст с тенью (золотом на голубом)

Синусоидально деформированный текст вдоль вертикальной линии. Задается с помощью фильтра Wave:

filter:Wave(Add="Add", Freq="Freq", LightStrength="LightStrength", Phase="Phase", Strength="Strength")

Параметр Add определяет накладывать (0) или нет (1) оригинал объекта (по умолчанию 0), Freq задает число волн, LightStrength - интенсивность подсветки, Phase - начальная фаза волн от 0 до 100 (по умолчанию 0), Strength - амплитуда волн.

Пример использования деформирования текста:

.wave{filter:Wave(Add=0, freq=3, lightstrength=10, phase=0, strength=3); width:400px; height:50px; font-size:32px;}

Деформированный текст.

Совместное использование вместе с фильтром вертикального отражение создает эффект отражение в воде:

.wave_flip{filter:flipV Wave(Add=0, freq=3, lightstrength=10, phase=0, strength=3); width:400px; height:20px; font-size:32px;}

Текст, отраженный в воде.

Анонс следующего выпуска

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

Новости сайта

Добавлены новые статьи (статьи предоставил Илья Бобяков). Если у Вас есть авторские статьи по веб или графическому дизайну (или просто хорошие авторские статьи на любую тему) и Вы хотите ими поделиться с другими, то свяжитесь со мной со страницы контактов. Не забудьте указать Ваше имя и адрес Вашего веб-сайта имеющего отношение к статье.

Запущен в тестовом режиме электронный Интернет магазин. В настоящий момент Вы можете купить PIN-коды карт экспресс-оплаты мобильной связи и доступа в Интернет или же напрямую пополнить счет для Вашего мобильного телефона. Если Вы не нашли какие-либо интересующие Вас товары, пишите, ассортимент товаров будет дополнен.

Адрес сайта: design.originweb.info.
Предлагаю обмен ссылками с тематическими сайтами.
Для новых подписчиков: архив рассылки.

P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет").