Webkit фильтры

Мало кто знает про один нестандартный CSS атрибут -webkit-filter. Про него я и хочу рассказать, ибо он представляет довольно таки больше возможности “графического манипулирования”.

Сразу хочется оговориться: все нижесказанное работает в Beta версии Google Chrome.

1. Blur – размытие

Он размывает все находящееся в блоке. Действие подобно фильтру “Размытие по Гауссу” в фотошопе.
-webkit-filter: blur(5px);
Стандартное значение: 0px

2. Brightness – яркость

Этот фильтр изменяет яркость.
-webkit-filter: brightness(10%);
Стандартное значение: 0%

3. Contrast – контрастность

Этот фильтр изменяет контрастность.
-webkit-filter: contrast(10%);

Стандартное значение: 100%

4. Grayscale – черно-белое

Этот фильтр делает содержимое, к которому применяется фильтр менее цветным, вплоть до полного обечцвечивания.
-webkit-filter: grayscale(10%);

Стандартное значение: 0%

5. Sepia – сепия

Этот фильтр применяет эффект сепии.
-webkit-filter: sepia(10%);

Стандартное значение: 0%

6. Invert – инвертирование цветов

Этот фильтр инвертирует цвета, причем сначала он изменяет контраст до 0% (до 50% значения), а уже потом инвертирует цвета.
-webkit-filter: invert(70%);

Стандартное значение: 0%

7. Opacity – прозрачность

Этот фильтр делает содержимое, к которому применяется фильтр прозрачным.
-webkit-filter: opacity(10%);

Стандартное значение: 100%
Лучше применять свойство “opacity” или “-webkit-opacity”

8. Saturate – насыщенность

Этот фильтр делает содержимое, к которому применяется фильтр менее цветным. Можно применять значения больше 100%.
-webkit-filter: saturate(150%);

Стандартное значение: 100%