|
|
|
Текстовые фильтрыПредставляю Вашему вниманию четырнадцатый выпуск рассылки "Уроки веб-дизайна в примерах". В этом выпуске рассмотрим готовые к использованию шаблоны для текстовых и графических фильтров. Содержание выпуска: В предыдущем выпуске были представлены общие сведения о фильтрах. В этом выпуске рассмотрим рабочие примеры (коды) для их использования. Пример для каждого фильтра будет состоять из двух частей: описание параметров фильтра и класс, созданный для этого фильтра. Например, описание текстового фильтра DropShadow выглядит так:
filter:DropShadow(Color='Color', OffX='Offx', OffY='Offy', Positive='Positive')
Здесь Color - цвет тени, OffX - смещение по X, OffY - смещение по Y, Positive - расположение тени слева или справа (0 или 1, соответственно). А класс, созданный для этого фильтра вот так:
<style>
.dropshadow{filter:DropShadow(Color=blue, OffX=1, OffY=1, Positive=1);width:300px;height:20px;color:gold;font-size:20px;font-weight:bold;} </style> Теперь, для того, чтобы использовать этот фильтр необходимо задать стиль для текстового тега, например, 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-коды карт экспресс-оплаты мобильной связи и доступа в Интернет или же напрямую пополнить счет для Вашего мобильного телефона. Если Вы не нашли какие-либо интересующие Вас товары, пишите, ассортимент товаров будет дополнен.
P.S. Если Вы используете почтовую программу The Bat!, то письмо может отображаться некорректно. Для того, чтобы просмотреть правильный вариант, щелкните два раза на аттачменте Part.html и откройте письмо (кнопка "No/Нет"). |
|
Встречает один веб мастер другого и говорит:
- Слушай, вчера был на твоем сайте. Здорово! Круто!
- А, так это был ты.