Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

CSS фильтры Категория: CSS
Название: CSS фильтры
Дата добавления: 20-07-2012
Раз просмотрено: 1991
Комментарии: 1
Рейтинг: * * * * * * * * * * (5 голосов)

CSS фильтры

На протяжении всего времени, CSS предоставляет нам все больше и больше инструментов, чтобы обходиться без редакторов изображений, будь то 3D трансформации или радиус границы. Однако, недоставало такого инструмента, который мог бы изменять насыщенность, размывать, или иным образом изменять фотографии с помощью одного только CSS. Чтобы решить эту проблему, W3C пришел к CSS фильтрам. С помощью CSS фильтров мы можем достичь многих эффектов, которые применимы не только к изображениям, но и к тексту, и к HTML.

Поддержка CSS фильтров

Свойства CSS фильтров работают так же, как и любые другие CSS свойства. Однако, CSS фильтры — это очень новое явление и оно плохо поддерживается браузерами. Фактически, CSS фильтры поддерживают только браузеры на основе движка WebKit (Safari и Chrome). По этой причине мы должны использовать вендорные префиксы. Хотя WebKit является единственным движком, поддерживающим CSS фильтры, мы будем использовать все браузерные префиксы, как это и рекомендуется.

Использование CSS фильтров

Существует большое количество CSS фильтров, которые будут рассмотрены позже. К ним относится размытие, осветление, изменение насыщенности, оттенка и контраста, инвертирование цветов, обесцвечивание и эффект сепии. Однако, помните, что эффекты будут видны только в последних версиях Chrome и Safari. Если мы хотим применить размытие радиусом в 5 пикселей мы должны использовать примерно такой код:

img {
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-ms-filter: blur(5px);
	-o-filter: blur(5px);
	filter: blur(5px);
}

Фильтры можно успешно совмещать друг с другом. Например, таким кодом вы добьетесь осветления и размытия изображения. Однако в своих работах и проектах не забывайте о вендорных префиксах, в последующих примерах они будут упущены для краткости:

filter: blur(5px) brightness(0.5);

Изучаем CSS фильтры

Теперь, мы будем изучать результаты применения всех CSS фильтров к этому изображению:

Изображение для изучения CSS фильтров

Размытие

Эффект CSS фильтра размытия

Этот фильтр осуществляет размытие по Гауссу текста или изображения. Размытие измеряется в пикселях, и для его применения вам нужно использовать такой код:

filter: blur(5px);

Яркость

Эффект CSS фильтра яркости

Этот фильтр изменяет яркость объекта. Яркость измеряется от 0 (настоящее изображение) до 1 (полностью белое изображение). Давайте немного увеличим яркость нашей картинки таким способом:

filter: brightness(0.2);

Насыщенность

Эффект CSS фильтра насыщенности

Этот фильтр изменяет насыщенность картинки и задается в процентах. Например, такой код обесцветит наше изображение в два раза:

filter: saturate(50%);

Вращение оттенков

Эффект CSS фильтра вращения оттенков

Это довольно полезный CSS фильтр позволяет вам изменять оттенок цвета, вращая его (представьте колесо из цветов, которое вы вращаете). Значение этого фильтра измеряется в градусах:

filter: hue-rotate(20deg);

Контраст

Эффект CSS фильтра контраста

Этот фильтр измеряет контрастность картинки. 100% — это значение по умолчанию, 0% — это полностью черное изображение, а все, что больше 100% повышает контрастность изображения:

filter: contrast(150%);

Инвертирование

Эффект CSS фильтра инвертирования

Этот фильтр инвертирует цвета объекта. Теоретически возможные значения: от 0% до 100%. Но к настоящему моменту браузеры поддерживают только полное инвертирование в 100%:

filter: invert(100%);

Оттенки серого

Эффект CSS фильтра оттенков серого

Это значение, насколько вы хотите обесцветить свое изображение. Измеряется от 0% до 100%:

filter: grayscale(100%);

Сепия

Эффект CSS фильтра сепии

Сепия. Навряд ли вы будете использовать CSS для этой цели, но это может оказаться полезным. Так же, как и в случае оттенков серого и инвертирования, это количество сепии, которой вы хотите придать вашему изображению. 0% — это стандартное изображение, а 100% — это полноценная сепия:

filter: sepia(100%);

Заключение

CSS фильтры — это очень мощные инструменты, которые покажут себя в будущем. Не стоит бояться применять их в своих работах — будьте прогрессивными. Однако, не забывайте о том, что в браузерах большей части ваших посетителей, они, скорее всего, не будут работать. Поэтому используйте их не в ущерб функциональности и не забывайте обеспечивать нормально работающие запасные варианты.

Это интересно: «Все о хешировании».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:
Гость  •  2013-07-02 00:16:02
Гуд. Буду использовать для расширения под хром. Спасибо