CSS фильтры представляют собой мощный инструмент, который позволяет разработчикам достигать разнообразных визуальных эффектов на веб-страницах. Они являются своего рода аналогом тем фильтрам, которые применяются в Photoshop. Фильтры в CSS, как правило, используются для изменения внешнего вида изображений, фоновых элементов или границ блоков.
Любой фильтр можно задать с помощью одного свойства, синтаксис которого довольно прост:
.element {
filter: <тип фильтра>;
}В качестве типа указывается необходимый фильтр с заданным значением. Свойство также позволяет указать несколько фильтров через пробел.
Типы фильтров
Перед обзором возможных типов фильтров следует обозначить несколько моментов. Каждый тип фильтров должен принимать значение, характеризующее уровень его эффекта. Некоторые из фильтров имеют ограниченный диапазон возможных значений, несоблюдение которых просто отменит эффект фильтра. Само значение фильтра может быть указано только в единицах измерения, присущих данному фильтру.
grayscale()
Фильтр заменяет цвета изображения оттенками серого. Значение 100% полностью сделает его черно-белым, 0% - оставит без изменений, отрицательные значения не допускаются. Аналогично процентам, значение можно задавать в виде десятичной дроби (1 = 100%, 0 = 0%).
.filter-grayscale {
filter: grayscale(0.4); /* или grayscale(40%) */
}sepia()
Фильтр позволяет придать изображению эффект сепии. Значение 100% преобразует изображение в сепию полностью, значение 0% оставит его без изменений, отрицательные значения не принимаются во внимание. Степень преобразования может также быть указана в десятичных дробях, где 1 = 100%, 0 = 0%.
.filter-sepia {
filter: sepia(0.7); /* или sepia(70%) */
}saturate()
Фильтр управляет цветовой насыщенностью изображения. Значение 100% (или 1) - это вид изображения по-умолчанию, значения от 0% до 100% (0..1) делают изображение менее насыщенным, значения выше 100% (>1) обеспечивают сверхнасыщенность, отрицательные значения не допускаются.
.filter-saturate {
filter: saturate(250%); /* или saturate(2.5) */
}brightness()
Фильтр управляет яркостью изображения. Значение 100% (или 1) оставит изображение без изменений, выше 100% (>1) добавит яркости, а 0% (или 0) уберет всю яркость - то есть сделает его черным. Отрицательные значения не допускаются.
.filter-brightness {
filter: brightness(1.5); /* или brightness(150%) */
}contrast()
Фильтр управляет контрастностью изображения. Значение 0% (или 0) сделает изображение серым, а 100% (1) оставит его без изменений. Значения выше 100% (>1) добавят картинке контраста.
.filter-contrast {
filter: contrast(3); /* или contrast(300%) */
}hue-rotate()
Фильтр управляет оттенками цвета в зависимости от угла поворота цветового круга. Минимальное значение - 0deg, при котором изображение остается неизменным. Максимальное значение - 360deg. Также значение эффекта фильтра можно задать с помощью единицы измерения turn, которая указывает на количество оборотов. 1turn = 360deg.
.filter-hue_rotate {
filter: hue-rotate(180deg); /* или hue-rotate(0.5turn) */
}invert()
Фильтр инвертирует вид изображения (подобно негативу в фотографиях). Значение 100% (1) полностью инвертирует изображение, 0% (0) оставит без изменения, а 50% (0.5) сделает серым. Отрицательные значения не допускаются.
.filter-invert {
filter: invert(0.85); /* или invert(85%) */
}blur()
Фильтр применяет размытие по Гауссу к изображению. Значение определяет радиус размытия изображения и задается в точных единицах измерения длины (px, em, ...). Чем больше указано значения, тем более размытая будет картинка.
.filter-blur {
filter: blur(6px);
}opacity()
Эффект фильтра подобен эффекту CSS свойства opacity - задает изображению прозрачность. Разница в том, что некоторые браузеры задействуют аппаратное ускорение при отрисовке фильтров для повышения производительности. Значение 0% (или 0) сделает изображение полностью прозрачным, а 100% (1) полностью видимым. Отрицательные значения не допускаются.
.filter-opacity {
filter: opacity(0.3); /* или opacity(30%) */
}drop-shadow()
Фильтр применяет эффект тени к изображению. Функция очень похожа на CSS свойство box-shadow, однако есть несколько различий:
- к drop-shadow нельзя применить значение inset,
- drop-shadow обводит тенью силуэт изображения, а не весь блок,
- использование фильтра указывает браузерам использовать дополнительное аппаратное ускорение.
.filter-drop_shadow {
filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));
}В качестве примера для сравнения можно рассмотреть любую картинку с прозрачностью или обычный тултип со стрелочкой.
url()
Этот тип фильтра принимает в качестве значения код SVG, его ID или адрес, который будет являться некой маской для элемента, что вызовет эффект его преобразования. Код SVG для фильтра изображений можно написать самому, но можно и поискать в просторах интернета - благо такого добра там полно (фильтры от yoksel, фильтры от jorgeatgu).
В качестве примера рассмотрим SVG-фильтр "турбулентность".
Комментарии (0)