Графические изображения

Анимированные изображения

Несколько одиночных изображений можно упаковать вместе для создания анимированных изображений GIF. Они являются файлами изображений, содержащими два и более изображений, которые открываются по очереди в определенном порядке.

Следующий экран Adobe ImageReady показывает создание нескольких из 60 изображений, которые используются для создания показанных выше часов, секундная стрелка которых последовательно показывает все 60 секунд. Каждое положение стрелки создается в отдельном слое изображения. Программа преобразует слои в анимационные кадры, или ячейки, которые выводятся в определенной последовательности, когда сохраняются как файл GIF.

Немного отличающаяся техника анимации используется в других программах анимации. Некоторые программы для анимации GIF требуют создания отдельных сохраненных изображений GIF. Каждое изображение представляет собой отдельный кадр анимации. Эти отдельные файлы GIF импортируются в программу и преобразуются в последовательность ячеек анимации.

Файл анимированного GIF извлекается браузером, так же, как и любой другой файл GIF. При выводе в браузере файл создает анимацию. Конечно, если у вас нет опыта работы с графикой или не хватает терпения создавать последовательность изображений для анимации, то необходимые анимированные изображения GIF вполне можно найти в Web.

Формат изображений PNG

Более новым форматом с увеличивающейся популярностью является формат PNG (Portable Network Graphic - переносимая сетевая графика, произносится "пинг"). Этот формат используется для тех же целей, что и GIF; однако, он создает файлы меньшего размера и без потери качества разрешения. Он может выводить многослойные изображения и делает это быстрее, чем формат GIF.

Наиболее заметное различие между форматами PNG и GIF находится в области прозрачных изображений. Формат PNG допускает до 254 уровней прозрачности, позволяя изображениям лучше смешиваться с цветом фона или узором страницы. Рисунок 5.6 показывает различия при смешивании между изображениями PNG и GIF.

В изображении GIF справа прозрачность пикселей либо включена, либо нет, создавая четкие границы, окружающие то, что иначе было бы постепенным переходом между упавшей тенью и полной прозрачностью фона изображения. Белый ореол окружает упавшую тень на ее границе с полной прозрачностью. В противоположность этому, изображение PNG слева мягко смешивается с цветом фона. Это происходит за счет нескольких уровней прозрачности пикселей, посредством чего пиксели, окружающие упавшую тень, получают увеличивающиеся уровни прозрачности, по мере того как они удаляются от изображения.

Формат изображений JPEG

Формат JPEG (Joint Photographic Experts Group) был создан для хранения с различной степенью сжатия фотографических изображений с миллионами цветов. Во время сжатия графические программы используют специальные алгоритмы для выделения и вывода цветов, близких к цветам исходного изображения, но не сохраняют при этом всю информацию о цвете, чтобы минимизировать размер файла.

Обычно при сохранении изображений в формате JPEG имеется возможность задания степени сжатия. Меньшие размеры файлов обычно означают большую потерю деталей изображения. Тем не менее, при умеренном сжатии можно вывести на экране изображение, которое выглядит очень похоже по качеству на исходное изображение. Четыре изображения ниже показывают исходное изображение и три сжатых вместе с размерами файлов. Можно заметить потерю четкости изображений с более высокой степенью сжатия и меньшим размером файла.

Для изображений Web, которые выводятся обычно с разрешением 72 пикселя на дюйм, степень сжатия, уменьшающая размер файла от 1/8 до 1/4 исходного размера файла, сохраняет удовлетворительную визуальную точность.

Изображения JPEG сохраняются как файлы с расширением .jpg. Формат JPEG не поддерживает многослойность или прозрачность; он также плохо подходит для текста или штриховых изображений, так как точность, которая требуется для создания прямых линий или четких ребер, будет недостаточна при сжатии.

Вывод изображений

Графическое изображение размещается на странице Web с помощью ссылки на местоположение файла GIF, PNG или JPEG. Файл изображения затем загружается с сервера Web вместе со страницей. Когда браузер выводит страницу, эта ссылка используется для извлечения изображения и размещения его на странице.

Тег <img/>

Графические изображения размещают на страницах Web с помощью тега <img/>. Общая форма этого тега показана в листинге 5.1. Отметим, что тег <img/> не является контейнерным тегом и не требует отдельного закрывающего тега.

<img src="url" alt="text"/>

Тег <img/> появляется на странице Web в том месте, где должно выводиться изображение. Атрибут src (источник) задает положение файла изображения. Это может быть локальный или удаленный адрес URL. Атрибут alt (дополнительный текст) требуется согласно стандартам XHTML 1.1. Он содержит текстовое описание изображения, которое выводится внутри небольшого всплывающего окна, когда курсор мыши перемещается над изображением.

Рекомендуется включать атрибут alt, в частности для того, чтобы снабдить этой информацией пользователей с недостаточным зрением. Специальное программное обеспечение браузера может озвучить текстовую строку, когда само изображение невозможно рассмотреть в деталях. Поэтому необходимо использовать текст alt, который дает точное и полезное описание изображения. Браузеры могут также выводить текст во время ожидания загрузки изображения, давая тем самым посетителю предварительное текстовое описание визуального содержимого страницы. Наконец, некоторые люди предпочитают отключать вывод графических изображений, как для ускорения загрузки страниц, так и во время печати страницы; эти всплывающие окна помогают идентифицировать изображения, которые иначе не выводятся.

Отметим, что тег <img/> является линейным тегом и не может появиться в строке сам по себе согласно стандартам XHTML. Этот тег должен записываться внутри тегов <p>, <div> или другого блочного тега.

Вывод локальных изображений

Файл изображения может располагаться в том же каталоге, что и страница Web, которая его выводит; или можно создать отдельную папку для хранения изображений, обычно вложенную в каталог страницы Web. Если файл находится в том же каталоге, что и страница Web, требуется только имя файла в качестве значения src, как показывает следующий листинг.

<p><img src="yoda.jpg" alt="Изображение Йода"/></p>

Рисунок 5.8 показывает вывод этого файла изображения. Если провести курсором мыши над изображением, то в браузере появится всплывающее окно, содержащее текстовое описание ( alt ) этого изображения.

Если файл изображения находится в другом каталоге, отличном от каталога страницы Web, которая его выводит, то необходимо указывать как часть значения src (URL) путь доступа к этой папке. В следующем примере файл изображения расположен в папке Media, подкаталоге каталога, содержащего страницу Web, которая выводит изображение.

<p><img src="Media/yoda.jpg" alt="Изображение Йода"/></p>

Вывод удаленных изображений

Можно соединиться и вывести изображение, расположенное в любом месте Всемирной паутины (Web), не загружая изображение для вывода из локального каталога. В этом случае в атрибуте src должен присутствовать полный адрес URL изображения, начиная с "http://". Рисунок 5.9 показывает страницу Web со ссылкой на удаленный файл изображения. Отметим, что код тега <img/> включает ссылку на сайт и путь доступа к каталогу изображения.

<img 
  src="http://www.exoticfelineimages.org/20050805/images/2005-08-05%20
  12.03.03.jpg" alt="Изображение тигра"/>

При соединении с удаленными изображениями необходимо указать источник заимствования. Может понадобиться также получить разрешение владельцев сайта на соединение с их ресурсами. Поскольку доступность страницы будет зависеть от других сайтов, то необходимо постоянно проверять ссылку, чтобы гарантировать, что изображение все еще доступно.

Размер изображения

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

Следующее изображение выводится в двух размерах - в исходном и в полтора раза меньше исходного размера. Изменяется только ширина, чтобы браузер задал высоту с сохранением пропорциональности.

<img src="Homer.gif" style="width:90px; height:120px" alt="Изображение 
      Гомера"/>
<img src="Homer.gif" style="width:60px" alt="Изображение Гомера"/>

При изменении размера изображения лучше не пытаться делать изображение больше исходного размера. Его исходный размер имеет наилучшее и самое четкое разрешение. При увеличении изображения может происходить "пикселизация", приводящая к потере четкости. Большинство компьютеров выводят изображения с разрешением 72 dpi (dots per inch - точек на дюйм). Обычно бывает достаточно сохранять и выводить изображения с этим разрешением. Сохранение изображений с более высоким разрешением не создает заметного улучшения качества выводимого изображения и приводит к большим размерам файлов, которые увеличивают время загрузки.

Позиционирование изображения

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

Автономные изображения

Если изображение появляется отдельно стоящим в строке, то его можно сместить по горизонтали влево, вправо или поместить в центре. Такое позиционирование осуществляется с помощью применения стиля text-align, только не для самого изображения, а для охватывающего изображение контейнера, обычно тега <p> или <div>, который отделяет свое содержимое от окружающего текста с помощью пустой строки или переноса строки.

<p style="text-align:center"><img src="Earth.gif" alt="Изображение Земли"/></p>

В приведенном выше примере тег <img/> вложен внутрь параграфа, чтобы отделить его от окружающего текста пустыми строками. Содержимое параграфа выравнивается по центру, размещая, таким образом, содержащееся в параграфе изображение по центру.

Плавающие изображения

Изображения можно смещать влево или вправо на странице (окружающий текст при этом будет обтекать изображение), используя стиль float:left или float:right внутри тега <img/>. Вокруг изображения можно разместить дополнительные пробелы, чтобы отделить его от окружающего текста с помощью увеличения полей. Соответствующее изображение смещается вправо и имеет значение левого поля в 25 пикселей, чтобы оставить свободное пространство между изображением и этим параграфом.

<p>
<img src="Earth.gif"  alt="Изображение Земли"
  style="float:right; margin-left:25px"/>
... окружающий текст с переносом по словам ...
</p>

Вспомните: когда изображения или другие элементы страницы смещаются влево или вправо на странице с обтекающим их текстом, сначала кодируется тег <img/>, а за ним следует обтекающий текст.

Изображения в строке

Изображение может появиться "в строке" (in-line), то есть, на той же строке, что и окружающий его текст. В этом случае необходимо определить, как текст должен выравниваться относительно изображения. По умолчанию, текст, окружающий изображение в строке, выравнивается с нижним краем изображения. Однако можно применить к тегу <img/> подходящим образом стиль vertical-align, чтобы изменить положение окружающего текста. Значения свойства vertical-align показаны в таблице 5.1.

vertical-align

text-top
middle
text-bottom (по умолчанию)

Применение стиля vertical-align в линейных тегах <img/> проиллюстрировано на рисунке 5.13. Сопровождающий текст выравнивается по верху, середине и нижнему краю изображений.

<p>Изображение<img src="1.gif" style="vertical-align:text-top"/> 
с текстом, выравненным по верху изображения.</p>

<p>Изображение<img src="1.gif" style="vertical-align:middle"/> 
с текстом, выровненным по середине изображения.</p>

<p>Изображение <img src="1.gif" style="vertical-align:text-bottom"/> 
с текстом, выровненным по низу изображения.</p>

Обтекание текста вокруг изображений

Когда изображения смещаются влево и вправо на странице, последующий текст будет обтекать изображение. Это иллюстрирует рисунок 5.14, где изображение смещается влево, так что подпись к изображению обтекает его справа. В то же самое время следующий далее параграф также обтекает изображение.

Обратите внимание в следующем далее коде для показанного выше вывода, что тег <img/> и заголовок находятся внутри тега <div>, так как для изображения и текста согласно стандартам XHTML требуется блочный контейнер.

<p>Это изображение с заголовком, где изображение смещается влево, а 
      заголовок  обтекает его справа.</p>

<div>
<img src="book.gif" alt="Изображение книги" 
  style="float:left; margin-right:10px; margin-bottom:10px"/>
<b>Figure 1.</b><br/>
<i>The Passion of the Western Mind</i>.
</div>

<p>Этот следующий далее параграф также обтекает изображение справа, так 
как он записывается далее в строке ниже заголовка.</p>

Свойство clear

Хотя любой вводимый после плавающего изображения текст обтекает изображение, иногда такое поведение может оказаться ненужным. Например, следующий вывод содержит изображение книги и заголовок, который обтекает изображение справа; однако следующий параграф, вместо обтекания изображения, появляется ниже изображения.

Это изображение с заголовком, где изображение смещается влево, а заголовок обтекает его справа.

Код, создающий этот вывод, показан ниже.

<p>Это изображение с заголовком, где изображение смещается влево, а 
      заголовок  обтекает его справа. </p>

<div>
<img src="book.gif" alt="Изображение книги" 
  style="float:left; margin-right:10px; margin-bottom:10px"/>
<b>Figure 1.</b><br/>
<i>The Passion of the Western Mind</i>.
</div>

<p style="clear:left">Этот параграф выводится ниже изображения, а не обтекает 
его ниже заголовка.</p>

Можно убедиться, что элемент страницы всегда появляется у левого или правого поля страницы, если ему присваивается свойство стиля clear. Значением этого свойства может быть left, right, both или none (по умолчанию).

clear

left
right
both
none (по умолчанию)

В предыдущем примере следующему после изображения параграфу задается линейный стиль clear:left. Это означает, что параграф выводится на следующей доступной строке, у которой "очищено" ( "clear" ) левое поле. Поэтому параграф начинается на строке, расположенной сразу под изображением, на первой строке, левое поле которой не занято другим элементом.

Всякий раз, когда элемент страницы смещается влево или вправо, может потребоваться вывод последующего текстового или графического элемента ниже плавающего элемента, а не как часть обтекающего содержимого. Значение свойства clear, присваиваемое этому необтекающему элементу, зависит от положения поля ( left или right ) плавающего элемента. Настройка clear:both обеспечивает, что ни одно поле не занято элементом страницы перед выводом оформленного так элемента.

Графический текст

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

Обычно создается одна буква () или слово для стилизованного вывода. Пример буквы в тексте этого параграфа заимствован из коллекции шрифтов Adobe Rosewood. Большинство пользователей, скорее всего, не имеют в системе этот шрифт. Однако он выводится браузером, так как он был преобразован в графическое изображение и помещен на страницу с помощью тега <img/>.

Таким же образом можно создавать заголовки. С помощью любой графической программы оформите текст и сохраните его как изображение. Затем разместите его на странице с помощью тега <img/>. С осторожностью используйте слишком вычурное оформление, это может отвлекать внимание.

Исключенные атрибуты тега img

Существует ряд исключенных атрибутов тега <img/>, вместо которых используют настройки стиля. Эти атрибуты можно встретить на старых страница Web, но не рекомендуется применять их на новых страницах.

border=<n>

Сплошная черная рамка вычерчивается вокруг изображения с помощью атрибута border. Толщина рамки задается как n пикселей.

align="top|middle|bottom"
align="left|right"

Одна из версий атрибута align управляет размещением текста, окружающего изображение. При использовании align="top", align="middle", или align="bottom", изображение появляется в строке - на той же строке, что и окружающий текст - и сопровождающий текст выравнивается по верху, посредине, или по низу изображения. Эти три атрибута выравнивания идентичны по результату свойствам text-top, middle, и text-bottom стиля vertical-align. Если выравнивание не определено в теге <img/>, то изображение появляется в строке с окружающим текстом, выровненным с нижним краем изображения.

Второй вариант атрибута align управляет обтеканием изображения словами. Когда записывается align="left" или align="right", то изображение появляется возле указанного левого или правого поля страницы и сопровождается текстом, который его обтекает. Тег <img/> должен находиться сразу перед текстом, который его обтекает. Эти выравнивания идентичны по результату свойствам стиля float:left и float:right.

hspace="n"
vspace="n"

Можно добавить дополнительное свободное пространство вокруг изображения, используя один из двух или оба атрибута: hspace (горизонтальный интервал) или vspace (вертикальный интервал), - и задавая для каждого определенное число пикселей. Атрибут hspace задает число оставляемых пикселей пустого пространства с левой и правой стороны изображения; атрибут vspace определяет число оставляемых пикселей пустого пространства сверху и снизу изображения. В отличие от использования настроек стиля margin, невозможно управлять пустым пространством на сторонах изображения по отдельности.

height="n"
width="n"

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

Фоновые изображения

Любой контейнер XHTML, от тега <body> и до тега <span>, может использовать графические изображения в качестве фона для текстового контента. Конечно, необходимо продуманно выбирать изображения, которые не мешают и не отвлекают от текстовой коммуникации, для которой предназначена страница.

Источники изображений

Большинство фоновых изображений являются текстурами, а не рисунками. Рисунки оказываются слишком перегруженными и отвлекают внимание от сообщения. Эти текстуры являются стандартными изображениями GIF или JPEG, кроме того, эти изображения обычно не совпадают с размером контейнера, для которого они создают фон. Текстуры являются небольшими, специально созданными изображениям, которые могут повторяться на странице и незаметно соединяться, чтобы сформировать однородный фон.

Изображение на рисунке 5.17 является типичным изображением, используемым в качестве фона для элементов страницы. Оно выводит текстуру, которая хорошо согласуется, когда изображение повторяется горизонтально и вертикально вдоль и поперек области фона элемента страницы. Повторяемые текстуры, такие, как эта, иногда трудно создать, но существует множество готовых, доступных на большинстве сайтов репродукций в Web.

Стили фона

Существует четыре свойства стиля, относящихся к выводу фоновых изображений в текстовых контейнерах. Эти стили, показанные в таблице 5.3, выбирают изображение, повторяют его, позиционируют и закрепляют изображение для прокрутки поверх него текста. Не все эти свойства требуются всем фоновым изображениям.

background-attachment

Задает соединение фонового изображения с документом, 
будет ли изображение прокручиваться  вместе с текстом или 
нет.
     fixed
     scroll

background-image

Задает фоновое изображение элемента страницы, 
определяемое как 
     url(url)
     none

background-position

Задает положение верхнего левого угла фонового 
изображения относительно верхнего левого угла 
контейнерного элемента, используя физический размер, 
процент, ключевое слово или пару ключевых слов.
  left top
  left% top%
  top|right|bottom|left|center 
  top left|top center|top right 
  center left|center center|center right 
  bottom left|bottom center|bottom right

background-repeat

Задает повторение фонового изображения по горизонтали, 
по вертикали, в обоих направлениях или вывод без 
повторения. 
  repeat-x
  repeat-y
  repeat
  no-repeat

Фоновое изображение определяется с помощью свойства background-image:url(url), где расположение файла изображения задается его адресом url. Если файл изображения хранится в том же месте, что и страница, то необходимо ввести только имя файла. Если никакие другие настройки стиля в отношении фонового изображения не задаются, то оно повторяется горизонтально и вертикально, вдоль и поперек контейнера, чтобы заполнить фон изображением.

Страница, показанная на рисунке 5.18, использует свойство background-image для заполнения страницы горизонтально и вертикально с помощью текстуры. Никакие другие свойства стиля не требуются.

<style type="text/css">
  body {background-image:url(Background.jpg)}
</style>

Изображение Background.jpg имеет реальный размер 144 х 144 пикселя. Если дополнительных свойств стиля не задано, изображение автоматически повторяется поперек и вниз по странице, чтобы заполнить все доступное пространство.

Конечно, в качестве фоновых изображений не обязательно применять повторяющиеся текстуры. Можно воспользоваться любым изображением GIF или JPEG. Однако надо быть осторожным при использовании обычных изображений в качестве фона, так как они могут иметь слишком яркие цвета и затруднять чтение расположенного поверх текста. Если имеется программа редактирования изображений, то можно уменьшить плотность или прозрачность изображения, смягчить его интенсивность для применения в качестве изображения водяного знака. Это было сделано для изображения, показанного на рисунке 5.19.

<style type="text/css">
  body {background-image:url(Stonehenge.jpg)}
</style>

Как в случае предыдущей текстуры фона, изображение повторяется и по горизонтали, и по вертикали, чтобы заполнить всю страницу. Этот повторяющийся шаблон более заметен при использовании обычного графического изображения.

Можно сделать так, что будет выводиться одно или несколько фоновых изображений, задавая соответствующим образом свойство background-repeat. Значение repeat-x повторяет изображение по горизонтали столько раз, сколько необходимо, чтобы заполнить контейнер слева направо, создавая ряд изображений; repeat-y повторяет изображение по вертикали столько раз, сколько необходимо для заполнения контейнера сверху вниз, создавая столбец изображений; значение repeat повторяет изображение по обоим направлениям, чтобы полностью заполнить контейнер (значение по умолчанию); а no-repeat создает одно изображение в верхнем левом углу контейнера.

Если изображение не повторяется, можно указать положение единственного изображения в контейнере, используя свойство background-position. Следующий код размещает изображение в центре страницы с помощью background-position:320px 150px. Вывод в браузер показан на рисунке 5.20.

<style type="text/css">
  body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
        background-position:320px 150px}
</style>

Два значения в пикселях - 320px и 150px - задают расстояние от левого края и верха страницы до левого края и верха изображения. То есть, левый край изображения находится на расстоянии 320 пикселей от левого края страницы; верхний край изображения находится на расстоянии 150 пикселей от верхнего края страницы. Можно попробовать несколько вариантов размещения, прежде чем найти удовлетворительное решение.

Кроме точного определения в пикселях положения фонового изображения, можно определить для размещения изображения определенный процент от ширины и высоты страницы. Можно также использовать для позиционирования изображения различные ключевые слова или пары ключевых слов.

Ключевое слово top, right, bottom, left, или center помещает изображение, соответственно, вверху в центре, справа в центре, внизу в центре, в центре страницы и слева в центре. Пары ключевых слов top left (вверху слева), top center (вверху в центре), top right (вверху справа), center left (в центре слева), center center (в центре), center right (в центре справа), bottom left (внизу слева), bottom center (внизу в центре) или bottom right (внизу справа) помещают изображение в указанные позиции на странице.

Важно помнить, что эти позиции задаются относительно полного размера страницы Web, а не размера окна браузера. Поэтому изображение, помещенное в центре или внизу страницы, может быть не видимо, пока страница не будет прокручена, так чтобы изображение стало видимо.

В приведенных выше примерах фоновое изображение прокручивается при прокручивании текста на странице. Для некоторых типов фона может понадобиться, чтобы изображение оставалось зафиксированным и текст прокручивался бы поверх фиксированного фона. Этот результат реализуется с помощью свойства background-attachment. Его значением по умолчанию является scroll ; если изменить его на fixed, то фоновое изображение будет удерживаться в одной позиции на странице при прокручивании текста поверх него. Результат показан на рисунке 5.21.

<style type="text/css">
  body {background-image:url(Stonehenge.jpg); background-repeat:no-repeat;
        background-position:320px 150px; background-attachment:fixed}
</style>

Предыдущие примеры показывают фоновые изображения для всей страницы Web. Однако любой контейнерный тег может иметь фоновое изображение. Рисунок 5.22 показывает параграф с фоновой текстурой.

<style type="text/css">
  p#BKGND {background-image:url(Background.jpg); margin:20px; font-family:
           verdana; font-size:12pt; font-weight:bold; text-align:justify}
</style>

<h1>Фоновая текстура параграфа</h1>

<p id="BKGND">Это параграф с фоновой текстурой. 
Используемое по умолчанию свойство background-image повторяет фоновый 
шаблон по горизонтали и вертикали, чтобы заполнить область 
параграфа.</p>

Фильтры

Фильтры являются настройками стиля, которые применяются к изображению для изменения его визуального представления. Существуют различные фильтры для изменения уровней плотности цвета, расплывчатости изображений, создания зеркальных изображений, выпуклых и гравированных изображений, создания теней и для применения других специальных эффектов к содержимому страницы Web. Фильтры используют с помощью свойства filter, общая форма которого показана в листинге 5.7.

filter:filtername (property=value [, property=value]...)

За именем фильтра filtername следует разделенный запятыми и заключенный в скобки список настроек property=value. Различные фильтры требуют различных свойств, в зависимости от нужного эффекта. Эти свойства будут указаны во время рассмотрения отдельных фильтров.

Исходные изображения, показанные на рисунке 5.23, используются для иллюстрации эффектов различных фильтров. Можно будет сравнить эти изображения с теми, которые создаются различными фильтрами.

Здесь описаны не все доступные фильтры. Некоторые из них требуют специального программирования для реализации этих эффектов, а программирование стилей находится за рамками этого учебника. Рассмотренные фильтры достаточно легко применяются с базовыми настройками таблицы стилей. Все настройки стилей показаны как линейные таблицы стилей, чтобы сохранить кодирование локальным. Можно, конечно, применять фильтры со встроенными или внешними таблицами стилей.

Фильтр alpha()

Фильтр alpha() является ссылкой на альфа-канал изображения, который используется для управления плотностью или прозрачностью изображения. Существует четыре стиля alpha, каждый из которых производит различные эффекты или обесцвечивание изображения от полной до частичной интенсивности. Эти четыре варианта фильтров alpha - uniform, linear, radial, и rectangular - представлены в таблице 5.4.

filter:alpha()

style=0 (uniform)
opacity=n

style=1 (linear)
opacity=n
finishOpacity=n
startX=n
finishX=n
startY=n
finishY=n

style=2 (radial)
opacity=n

style=3 (rectangular)
opacity=n

Равномерный фильтр alpha()

Равномерный фильтр alpha (uniform) применяет один уровень плотности для всего изображения. Он выводит изображение с определенным процентом плотности: от 100% плотности, как в исходном изображении, и до плотности 0%, создающей вообще невидимое изображение.

Для этого фильтра требуются два значения свойства. Свойство style=0 определяет равномерный стиль альфа; свойство opacity=n задает уровень плотности ( n ) как процент от полной интенсивности. Результат применения альфа-фильтра к тегу <img/> можно видеть на рисунке 5.24. Его плотность задана как 50, то есть изображение выводится с 50% от полной интенсивности.

<img src="GallatinValley.jpg" style="filter:alpha(style=0, opacity=50)"/>

Линейный фильтр alpha()

Линейный фильтр alpha осветляет изображение от начальной заданной плотности до конечной плотности, применяя операцию по горизонтали или по вертикали. Требуется задание пяти свойств. Свойство style=1 определяет линейный фильтр альфа. Свойство opacity=n задает начальный процент плотности; свойство finishOpacity=n задает конечный процент плотности. Оставшиеся два свойства определяют горизонтальное или вертикальное направление применения фильтра. Пара свойств startX=n и finishX=n задают начальную и конечную точки приложения горизонтального осветления, где n является процентом расстояния от левого края изображения. Пара свойств startY=n и finishY=n задают начальную и конечную точки для применения вертикального осветления, где n является процентом расстояния от верхнего края изображения.

Типичное приложение этого фильтра начинает обесцвечивание при startX=0 (левый край изображения) и заканчивает осветление при finishX=100 (правый край изображения). Эти свойства приведены в следующей таблице стилей для изображения, показанного на рисунке 5.25.

<img src="GallatinValley.jpg" style="filter:alpha(style=1, opacity=100, 
finishOpacity=0, startX=0, finishX=100)"/>

Можно варьировать направление градиента осветления, изменяя на дополнительные значения начального и конечного процентов. То есть, задание startX=100 и finishX=0 осветляет изображение справа налево. Можно также осветлять изображение сверху вниз, используя свойства startY и finishY вместо startX и finishX.

Радиальный фильтр alpha()

Радиальный фильтр альфа осветляет изображение круговым образом по радиусам из середины наружу. Он требует задания только двух свойств. Свойство style=2 определяет радиальный фильтр; свойство opacity=n задает процент начальной плотности в центре изображения. Начиная с начальной плотности, изображение осветляется до его краев, создавая круговое изображение.

Следующий код используется для создания изображения на рисунке 5.26. Оно начинает градиент со 100% плотности в центре изображения.

<img src="GallatinValley.jpg" style="filter:alpha(style=2, 
opacity=100)"/>

Прямоугольный фильтр alpha()

Прямоугольный фильтр альфа создает градиент осветления изнутри наружу, как и радиальный фильтр, только использует в качестве шаблона прямоугольник, а не окружность. Для фильтра требуется задать два параметра. Свойство style=3 определяет прямоугольный фильтр; свойство opacity=n задает процент начальной плотности в центре изображения. Начиная с этой плотности изображение осветляется к своим краям, создавая прямоугольное изображение.

Следующий код используется для создания изображения на рисунке 5.27. Он начинает градиент со 100% плотности в центре изображения и заканчивает плотностью 0% на его краях.

<img src="GallatinValley.jpg" style="filter:alpha(style=3, 
opacity=100)"/>

Фильтр blur()

Фильтр blur() создает впечатление движения, размывая изображение на определенное число пикселей в определенном направлении. Свойства этого фильтра показаны в таблице 5.5.

filter:blur()

strength=n
direction=n
add=true|false

Свойство strength=n задает число пикселей для размывания: чем больше число, тем больше размывание. Свойство direction=n задает угол размывания в градусах, при этом 0 соответствует направлению вверх, 90 - направлению вправо, 180 - направлению вниз и 270 - направлению влево. Можно использовать промежуточные значения. Свойство add со значением true создает наложение размывания на исходное изображение для создания эффекта размытого движения, а не просто размытого изображения.

Следующий код создает изображение, показанное на рисунке 5.28 Размывание на расстояние 25 пикселей выполняется влево от изображения.

<img src="Osprey.jpg" style="filter:blur(strength=25, direction=270, 
add=true)"/>

Фильтр emboss()

Фильтр emboss() выводит изображение в виде выпуклой текстуры (барельеф) с помощью полутоновых значений. С этим фильтром не связаны никакие свойства и значения, только специальное имя этого фильтра Microsoft.

Изображение на рисунке 5.29 создано с помощью следующего кода. Обратите внимание на полное имя этого фильтра.

<img src="Osprey.jpg" 
style="filter:progid:DXImageTransform.Microsoft.Emboss()"/>

Фильтр engrave()

Фильтр engrave() выводит изображение как выгравированную текстуру с помощью полутоновых значений. Его действие обратно действию фильтра emboss(), т.е. создается текстура обратного барельефа. Для данного фильтра не существует свойств или значений, только специальное имя этого фильтра Microsoft.

Следующий код создает изображение, показанное на рисунке 5.30.

<img src="Osprey.jpg" 
style="filter:progid:DXImageTransform.Microsoft.Engrave()"/>

Фильтры flipH() и flipV()

Имеется два фильтра, которые позволяют изменить на противоположное направление изображения. Фильтр flipH() переворачивает изображение в горизонтальном направлении, создавая зеркальное изображение исходной картинки. Фильтр flipV() переворачивает изображение в вертикальном направлении, представляя его "вверх ногами". Для этих фильтров не требуется задавать никакие свойства. Два изображения на рисунке 5.31 создают с помощью следующего кода.

<img src="GallatinValley.jpg" style="filter:flipH()"/>
<img src="GallatinValley.jpg" style="filter:flipV()"/>

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

Фильтры xRay(), invert(), и gray()

Имеются два фильтра, которые создают изображение, похожее на фотографический негатив. Фильтр xRay() удаляет из изображения цвет и выводит его в негативном полутоновом изображении. Фильтр invert() обращает уровни оттенков цвета, насыщенности и яркости цветного изображения, выводя его как цветной негатив. Если требуется просто удалить цвет из изображения и вывести его полутоновым, то можно воспользоваться фильтром gray(). Эти фильтры не используют никаких параметров.

<img src="Osprey.jpg" style="filter:xRay()"/>
<img src="Osprey.jpg" style="filter:invert()"/>
<img src="Osprey.jpg" style="filter:gray()"/>

Фильтр dropShadow()

Существуют определенные фильтры, которые нельзя применить непосредственно к изображению, а нужно применять к контейнеру, окружающему изображение. Изображение может находиться, например, внутри тега <span> или <div>, с которыми работает фильтр. По сути, фильтр применяется к содержимому контейнерного тега.

Фильтр dropShadow() является примером одного из таких фильтров, который должен использоваться посредством контейнера. Для правильной работы контейнер должен быть достаточно большого размера, чтобы вмещать изображение и падающую от него тень. Свойства и значения фильтра dropShadow() показаны в таблице 5.6.

filter:dropShadow()

color=color
offX=n
offY=n

Фильтр dropShadow() требует задания трех свойств. Свойство color=color задает цвет падающей тени; можно использовать название любого цвета или числовое значение. Свойство offX=n задает горизонтальную ширину тени в пикселях; свойство offY=n задает вертикальную высоту тени в пикселях. Помните только, что эти значения применяются к контейнерному элементу, а не к самому изображению. Поэтому необходимо задавать ширину и высоту контейнера достаточно большими, чтобы в нем могло поместиться изображение и его падающая тень.

В следующем примере изображение имеет размер 225 х 150 пикселей и падающую тень в 10 пикселей. Поэтому его контейнерный раздел имеет размер 235 x 160 пикселей, чтобы в нем разместилось само изображение плюс его горизонтальная и вертикальная падающая тень.

<div style="width:235px; height:160px; filter:dropShadow(color=black, offX=10, offY=10)">
  <img src="GallatinValley.jpg"/>
</div>

Падающую тень можно применять для изображения, даже если ее точный размер неизвестен. Задайте просто ширину или высоту контейнера равной 0px. Если одно из таких значений присутствует, то контейнер будет расширяться, чтобы вместить свое содержимое. Необходимо также задать для изображения значения margin-right и margin-bottom, которые не меньше ширины падающей тени, чтобы было пространство для ее изображения. Следующий пример использует эту методику для вывода такой же падающей тени, как и на предыдущем рисунке.

<div style="width:0px; filter:dropShadow(color=black, offX=10, offY=10)">
  <img src="GallatinValley.jpg" style="margin-right:10px; margin-bottom:10px"/>
</div>

Фильтр shadow()

Такие принципы вывода падающей тени применимы и для фильтра shadow(). Изображение, к которому добавляется тень, должно находиться внутри контейнера, которое имеет достаточный размер для размещения изображения и его тени. Фильтр применяется к контейнеру, содержащему изображение. Свойства и значения, требуемые фильтру shadow(), показаны в таблице 5.7.

filter:shadow()

color=color
direction=n
strength=n

С фильтром shadow() связаны три свойства. Свойство color=color задает цвет тени как название цвета или как числовое значение. Свойство direction=n задает угол тени в градусах (направление вверх соответствует 0 градусов). Свойство strength=n задает длину тени в пикселях. Следующий код создает контейнер <div>, окружающий изображение неизвестного размера, и применяет к контейнеру фильтр shadow().

<div style="height:0px; filter:shadow(color=gray, direction=135, strength=15)">
  <img src="GallatinValley.jpg" style="margin-right:15px; margin-bottom:15px"/>
</div>

Эффект тени можно применять к символам текста , так же, как к изображениям. Текст должен находиться внутри контейнера, размеры которого должны быть достаточны для размещения текста и его тени. В следующем примере контейнер <span> создает строку текста с тенью. Так как тег <span> имеет размер по умолчанию, достаточный только для размещения своего содержимого, то размер этого контейнерного тега надо увеличить, чтобы разместить и вложенный текст, и его тень.

<span style="width:350px; height:45px; font-size:24pt; font-weight:bold;
filter:shadow(color=silver,direction=135,strength=7)">
  A Shadowed Text String
</span>

Фильтр glow()

Фильтр glow() добавляет сияние за пределами границ изображения. Подобно фильтрам dropShadow() и shadow(), фильтр glow() применяется к контейнерному элементу. Свойства и значения для фильтра glow() показаны в таблице 5.8.

filter:glow()

color=color
strength=n

Свойство color=color задает цвет сияния, а свойство strength=n задает его размер в пикселях. Значение strength используется также в качестве размера поля, окружающего изображение, и размера поля, окружающего текст.

Следующий код создает эффект сияния, показанный на рисунке 5.36.

<div style="height:0px; filter:glow(color=slategray, strength=20)">
  <h2 style="margin:20px">Сияющая картина</h2>
  <img src="GallatinValley.jpg" style="margin:20px"/>
</div>

Требуемый эффект к текстовой строке и изображению был создан с помощью контейнерного тега <div>. В данном случае эффект сияния окружает оба элемента; поэтому используется стиль margin, чтобы создать достаточное для сияния свободное окружающее пространство вокруг всех четырех сторон элементов.