Webkit фильтры

1 Мар
2012

Мало кто знает про один нестандартный 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%
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх