Опубликован: 19.03.2007 | Доступ: свободный | Студентов: 4576 / 1139 | Оценка: 4.23 / 3.94 | Длительность: 23:37:00
Лекция 5:

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

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

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

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

<img src="GallatinValley.jpg" style="filter:alpha(style=3, 
opacity=100)"/>
Изображение с прямоугольным фильтром с плотностью от 100% до 0%

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

Фильтр blur()

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

Таблица 5.5. Свойства и значения фильтра blur()
Свойство Значения
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)"/>
Изображение с фильтром blur()

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

Фильтр emboss()

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

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

<img src="Osprey.jpg" 
style="filter:progid:DXImageTransform.Microsoft.Emboss()"/>
Изображение с фильтром emboss()

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

Фильтр engrave()

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

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

<img src="Osprey.jpg" 
style="filter:progid:DXImageTransform.Microsoft.Engrave()"/>
Изображение с фильтром 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. Изображения, перевернутые горизонтально и вертикально

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

Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Владислав Нагорный
Владислав Нагорный

Подскажите, пожалуйста, планируете ли вы возобновление программ высшего образования? Если да, есть ли какие-то примерные сроки?

Спасибо!