Отправляет email-рассылки с помощью сервиса Sendsay

Дизайн сайта как инструмент продажи

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июль 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Александр Левитас

Статистика

10.132 подписчиков
-10 за неделю
←   Все выпуски   →

Уроки веб-дизайна с подробными примерами # 14


Информационный Канал Subscribe.Ru
Здравствуйте, уважаемые подписчики!

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

Содержание выпуска:
Использование фильтров

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

Пример для каждого фильтра будет состоять из двух частей: описание параметров фильтра и класс, созданный для этого фильтра. Например, описание текстового фильтра 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/Нет").

Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора 		Подписан адрес:
Код этой рассылки: comp.design.www 		Отписаться
Вспомнить пароль
В избранное