Основы работы с XHTML и CSS

         

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


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



Содержание раздела