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

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

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

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

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

Рис. 5.27. Изображение с прямоугольным фильтром с плотностью от 100% до 0%

Фильтр 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)"/>

Рис. 5.28. Изображение с фильтром blur()

Фильтр emboss()

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

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

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

Рис. 5.29. Изображение с фильтром emboss()

Фильтр engrave()

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

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

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

Рис. 5.30. Изображение с фильтром engrave()

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

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

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

Рис. 5.31. Изображения, перевернутые горизонтально и вертикально

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