Примечание
Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-repeating-radial-gradient().
Opera до версии 12.10 поддерживает -o-repeating-radial-gradient().
Firefox до версии 16 поддерживает -moz-repeating-radial-gradient().
Все свойства с префиксами не используют ключевое слово at при задании положения отправной точки градиента.
saturate()
Функция saturate() изменяет насыщенность цветов в изображении.
Синтаксис
filter: saturate(<значение>);
Значения
Значение 0% или 0 полностью убирает насыщенность цветов в изображении, превращая его в чёрно-белое. Значение 100% или 1 оставляет изображение неизменным. Любые значения больше 100% или больше 1 делают цвета в изображении более насыщенными.
Отрицательное значение не допускается. Пустое значение воспринимается как 1.
<style>
.saturate {
-webkit-filter: saturate(1.5);
filter: saturate(1.5);
}
</style>
Примечание
Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter.
Насыщенность цвета. Слева — оригинал, справа фотография с фильтром
sepia()
Функция sepia() превращает изображение в сепию — так называется чёрно-белое изображение с коричневым оттенком. Сепия придаёт фотографиям старинный вид.
Синтаксис
filter: sepia(<значение>);
Значения
Значение 0% или 0 оставляет изображение неизменным. Значение 100% или 1 полностью превращает изображение в сепию. Любые значения от 0% до 100% или от 0 до 1 линейно применяют эффект.
Отрицательное значение не допускается. Пустое значение воспринимается как 0.
<style>
.sepia {
-webkit-filter: sepia(80%);
filter: sepia(80%);
transition: 1s;
}
.sepia:hover {
-webkit-filter: sepia(0);
filter: sepia(0);
}
</style>
Результат данного примера показан на рис. При наведении курсора мыши на фотографию, она плавно превращается в цветную.
Анимируемые свойства
Здесь перечислены свойства, которые могут быть анимированы с помощью свойств animation и transition. Иными словами, плавно в течение времени изменять своё значение.
Для остальных свойств анимация работать не будет.
all
background
background-color
background-position
background-position-x
background-position-y
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
border-width
bottom
box-shadow
clip
color
column-count
column-rule
column-rule-color
column-rule-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-stretch
font-weight
height
left
letter-spacing
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
text-decoration
text-decoration-color
text-indent
text-shadow
top
transform
transform-origin
vertical-align
visibility
width
word-spacing
z-index