|
Фильтр BLUR
Применение фильтра BLUR приводит к размытию отображённой информации в определённом направлении и с определённой интенсивностью. Фильтр BLUR в своей работе использует параметры:
Direction....... |
задаёт направление размывки в градусах. Отчет ведётся по часовой стрелке. Если задано направление 0 градусов, то размывка будет производиться снизу вверх. По умолчанию используется значение "Direction=270".
|
Add.............. |
параметр показывающий, будет ли исходное изображение отображаться поверх размытого или нет. Может принимать значения:
1 - исходное изображение будет отображаться поверх размытого. Это значение используется по умолчанию;
0 - отображён будет только размытый вариант изображения.
|
Strength........ |
этот параметр характеризует интенсивность размывки в указанном направлении. Принимает значения от 0 до 120. Однако использование больших чисел не эффективно, так как при размывке интенсивностью 30 уже не чего не различишь (если Add=0). Таким образом, разности между интенсивностью 30 и интенсивностью 120 почти нет. По умолчанию используется значение "Strength=5".
|
Пример задания:
<HTML>
<HEAD>
<TITLE>Применение фильтра BLUR</TITLE>
<STYLE type ="text/css">
P { margin:10;
padding:20;
width:400;
font-weight:700;
border: doble black;
background:white}
IMG { FILTER: BLUR(Add=1, Direction=135, Strength=15) }
</STYLE>
</HEAD>
...............текст документа...............
...............текст документа...............
<P style="FILTER:BLUR (Direction=225, Strength=10)">
..............ТЕКСТ АБЗАЦА..............
</P>
...............текст документа...............
<IMG src="....... .">
...............текст документа...............
</BODY>
</HTML>
Демонстрация наложения фильтра BLUR на изображения
Исходное изображение |
Фильтр BLUR применён без указания параметров Filter:Blur |
|
|
|
|
Filter:Blur(Add=0, Direction=135, Strength=15) |
Filter:Blur(Add=1, Direction=135, Strength=15) |
|
|
Наложение фильтра BLUR на текстовые блоки
В случае с текстовыми блоками есть маленькая деталь. Если для текстового блока задано фоновое оформление (с помощью свойств, начинающихся со слова background), то его размытие производиться вместе с фоном. Ниже приведен пример для всех текстовых блоков абзаца где задан белый цвет фона (background:white).
Исходный текстовый блок |
Filter:Blur |
Filter:Blur(Add=1, Direction=135, Strength=5) |
|
|
|
|
|
|
Filter:Blur(Add=0, Direction=135, Strength=5) |
Filter:Blur(Add=1, Direction=45, Strength=6) |
Filter:Blur(Add=1, Direction=225, Strength=15) |
|
|
|
ЕСТЬ ВОПРОСЫ? ЗАХОДИТЕ НА HTML-ФОРУМ!
Это лучшее место для общения на веб-дизайнерские темы. Здесь вы можете задать интересный вопрос, получить на него не менее интересный ответ и поделиться опытом с коллегами. Что особенно приятно, у форума есть модератор - это исключает пустой треп и вездесущую рекламу в сообщениях. Общайтесь с пользой!
|
  |