Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Свойство filter

Дата:19.10.15 в 15:23

Характеристики свойства

В каких браузерах работает?

8.0+ - - - - - -

В каких версиях CSS используется?

CSS 1 CSS 2 CSS 2.1 CSS 3
- - - -

Для чего используется?

Служит комплексом визуальных эффектов, которыми оформляются заданные объекты верстки. В комплекс входит тень, некоторые трансформации, изменение цвета, прозрачность и прочее. Данный комплекс принято называть фильтром.

Как правильно задавать?

filter: значение;

Какие могут быть значения?

  • Alpha - устанавливает просвет объекта (прозрачность).
  • BasicImage - данный фильтр работает с картинкой, определяет ее прозрачность, трансформацию или цвет.
  • Blur - придает эффект размытия для объекта.
  • Chroma - указывает просвет для цвета элемента.
  • DropShadow - оттеняет очертания объекта.
  • Emboss - придает изображению эффект барельефности.
  • Engrave - содержимое блока получает черно-белый окрас и выглядит как гравюра.
  • Glow - придает очертанию объекта подсвечивание.
  • Gradient - устанавливает градиентность цветов линейного типа.
  • ICMFilter - перекрашивает объект в соответствии с Image Color Management - системой управления цветом.
  • Light - показывает эффект световых лучей.
  • MaskFilter - трансформирует полу прозрачные пиксели в цветовую гамму, а не прозрачны делает просвечиваемыми.
  • Matrix - устанавливает матрицу на основе матричных преобразований.
  • MotionBlur - создает эффект быстрого движения за счет размытия объекта.
  • Shadow - отрисовывает тень для элемента.
  • Wave - искажает отображение объекта по волнообразной системе.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Свойство filter</title>
  <style>
   img { 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
   }
  </style>
 </head> 
 <body>
  <img src="example/picture/ico.png" ></p>
 </body>
</html>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип CSS свойства: 
Понравилась статья? Расскажите о ней друзьям: