Значения
Выражение представляет собой комбинацию значений размеров и следующих знаков математических действий.
+ — сложение (width: calc(20px + 20px));
- — вычитание (padding: calc(10% - 10px););
* — умножение (height: calc(20%*2);)
/ — деление. На ноль делить запрещено (width: calc(100%/3);).
Знаки плюс и минус должны отбиваться пробелами с двух сторон.
<style>
div {
border: 1px solid #000;
height: 200px;
background: url(/example/image/figure.jpg) no-repeat;
background-position: calc(100% - 20px) 0;
}
</style>
contrast()
Функция contrast() понижает или повышает контрастность изображений или фоновых картинок.
Синтаксис
filter: contrast(<значение>);
Значения
Значение 100% или 1 оставляет изображение исходным. Любые значения меньше 100% (или меньше 1) понижают контрастность изображения. При этом 0 даёт однотонную серую картинку. Значения больше 100% (или больше 1) повышают контрастность изображения.
Отрицательное значение не допускается. Пустое значение воспринимается как 1.
<style>
.pic {
-webkit-filter: contrast(1.5);
filter: contrast(1.5);
}
</style>
Повышение контрастности. Слева — оригинал, справа фотография с фильтром
Примечание
Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter.
drop-shadow()
Функция drop-shadow() добавляет тень к изображениям. В отличие от свойства box-shadow во внимание принимаются прозрачные участки в изображении и тень отбрасывается с их учётом.
Синтаксис ?
filter: drop-shadow(<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>);
Значения
<сдвиг по x> Смещение тени по горизонтали относительно картинки. Положительное значение этого параметра задаёт сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
<сдвиг по y> Смещение тени по вертикали относительно картинки. Положительное значение задаёт сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
<размытие> Задаёт радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет чёткой, а не размытой.
<цвет> Цвет тени в любом доступном CSS формате, по умолчанию тень чёрная. Необязательный параметр.
При пустом значении все параметры воспринимается как 0. Цвет тени по умолчанию такой же, как значение свойства color.
<style>
.shadow {
-webkit-filter: drop-shadow(0 0 3px rgba(100,0,0,0.5));
filter: drop-shadow(0 0 3px rgba(100,0,0,0.5));
}
</style>
Примечание
Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter.
grayscale()
Функция grayscale() превращает изображение в чёрно-белое.
Синтаксис
filter: grayscale(<значение>);
Значения
Значение 100% или 1 превращает изображение в чёрно-белое. Значение 0 оставляет изображение исходно цветным. Значения меньше 100% (или меньше 1) линейно меняют цветность картинки.
Отрицательное значение не допускается. Пустое значение воспринимается как 0.
style>
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
transition: 1s;
}
.grayscale:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
Результат данного примера показан на рис. . При наведении курсора мыши на фотографию, она плавно из чёрно-белой превращается в цветную.
hue-rotate()
Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter.