Функции в CSS
Attr()
Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.
Синтаксис
attr(<атрибут> <тип>? [, <значение>]?)Значения:
<атрибут> Имя атрибута элемента передаваемое в CSS.
<тип> Тип значения свойства CSS. Допустимы следующие ключевые слова: string (строки), color(цвет), url (веб-адрес), integer (целое число), number (вещественное число), angle (угол), time(время), deg (градус), а также единицы CSS вроде em, px и др.
<значение> Значение, которое будет использоваться в том случае, если атрибута нет или браузер не может его получить.
Между версиями CSS есть небольшая разница по прочтению некоторых особенностей attr(). В CSS2.1 функция attr() может использоваться только совместно со свойством content и всегда возвращает строку в качестве значения. В CSS3 attr() допустимо применять с любым свойством и возвращаемое значение может быть в любом корректном для CSS3 формате.
<style>.site::after { content: ' (' attr(href) ') '; /* Выводим адрес ссылки в скобках */ font-size: 0.8em; /* Уменьшаем текст*/ background: yellow; /* Жёлтый фон */ } </style>В данном примере после ссылок с классом site в скобках выводится значение атрибута href, к которому применяется стилевое оформление.
Blur()
Функция blur() задаёт размытие по Гауссу изображений, фоновых картинок или текста. К элементу <body> напрямую применить размытие нельзя, только к его потомкам.
Синтаксис
filter: blur(<размер>);Значения
В качестве значения указывается радиус размытия, он пишется в любых доступных единицах размера CSS (к примеру: 5px). Чем больше значение, тем сильнее будет размыто изображение.
Отрицательное значение не допускается. Пустое значение воспринимается как 0px.
<style>.bg { background: url(/example/image/shark.jpg); background-size: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; -webkit-filter: blur(10px); filter: blur(10px); } </style>
Brightness()
Функция brightness() понижает или повышает яркость изображений или фоновых картинок.
Синтаксис
filter: brightness(<значение>);Значения
Значение 100% или 1 оставляет изображение исходным. Любые значения меньше 100% (или меньше 1) понижают яркость изображения. Таким образом, 0 даёт полностью чёрную картинку. Значения больше 100% (или больше 1) повышают яркость изображения.
Отрицательное значение не допускается. Пустое значение воспринимается как 1.
<style>.pic { -webkit-filter: brightness(120%); filter: brightness(120%); } </style>
Calc()
Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, угол, время, число. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно игнорируется.
Синтаксис
Свойство: calc(<выражение>)Значения
Выражение представляет собой комбинацию значений размеров и следующих знаков математических действий.
- + — сложение (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.
Синтаксис
filter: hue-rotate(<угол>);Значения
В качестве значения указывается угол (к примеру: 45deg), который задаёт поворот оттенка на цветовом круге. 0 или 360 градусов оставляет изображение неизменным. Любые значения больше или меньше нуля производят сдвиг цвета в изображении.
Пустое значение воспринимается как 0deg.
<style>.hue { -webkit-filter: hue-rotate(30deg); filter: hue-rotate(30deg); } </style>
Invert()
Функция invert() инвертирует цвета в изображении. По своему действию похоже на превращение фотографии в негатив.
Синтаксис
filter: invert(<значение>);Значения
Значение 0 оставляет изображение исходным. Значение 100% или 1 полностью инвертирует цвета картинки. Значения от 0% до 100% или от 0 до 1 инвертируют цвета частично.
Отрицательное значение не допускается. Пустое значение воспринимается как 0.
<style>.invert { -webkit-filter: invert(1); filter: invert(1); } </style>Примечание
Chrome до версии 53, Opera до версии 40 и Safari до версии 9.1 поддерживают свойство -webkit-filter.
Linear-gradient()
Функция linear-gradient() добавляет линейный градиент к фону элемента. Она выступает значением свойства background-image или background.
Синтаксис
background-image: linear-gradient([<угол> | to <позиция>]?, <цвет>[, <цвет>]*);Значения
<угол> Задаёт угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.
Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.
<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция> Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left. В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #fff и #000, по другому от белого к чёрному.
| Табл. 1. Типы градиента | |||
| Позиция | Угол | Описание | Вид |
| to top | 0deg | Снизу вверх. | 
|
| to left | 270deg -90deg | Справа налево. | 
|
| to bottom | 180deg | Сверху вниз. | 
|
| to right | 90deg -270deg | Слева направо. | 
|
| to top left | От правого нижнего угла к левому верхнему. | 
| |
| to top right | От левого нижнего угла к правому верхнему. | 
| |
| to bottom left | От правого верхнего угла к левому нижнему. | 
| |
| to bottom right | От левого верхнего угла к правому нижнему. | 
|
Применение угла вместо ключевых слов даёт аналогичный результат только для горизонтальных и вертикальных градиентов.
<style>.gradient { background: #fefcea; /* Для старых браузеров */ background: linear-gradient(to top, #fefcea, #f1da36); padding: 10px; border: 1px solid #333; } </style>Примечание
Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-linear-gradient().
Opera до версии 12.10 поддерживает -o-linear-gradient().
Firefox до версии 16 поддерживает -moz-linear-gradient().
Все свойства с префиксами не используют ключевое слово to при задании направления градиента.
Opacity()
Функция opacity() задаёт степень прозрачности изображений. По своему действию похожа на свойство opacity, но некоторые браузеры для фильтров применяют аппаратное ускорение, чтобы повысить их производительность.
Синтаксис
filter: opacity(<значение>);Значения
Значение 100% или 1 оставляет изображение исходным. Значение 0% или 0 делает изображение полностью прозрачным. Любые значения от 0% до 100% или от 0 до 1 задают степень прозрачности картинки.
Отрицательное значение не допускается. Пустое значение воспринимается как 1.
<style>.opacity { -webkit-filter: opacity(0.5); filter: opacity(0.5); transition: 1s; }.opacity:hover { -webkit-filter: opacity(1); filter: opacity(1); }Результат данного примера показан на рис. 1. Фотографиям изначально задана прозрачность 50%, но при наведении на них курсора мыши, они плавно становятся непрозрачными.
Radial-gradient()
Функция radial-gradient() добавляет радиальный градиент к фону элемента. Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки. На рис. 1 представлено для сравнения одновременно два разных градиента: радиальный (рис. а) и линейный (рис. б).
| 
|
| а | б |
Рис. Радиальный и линейный градиент
Радиальный градиент создаётся с помощью свойства background или background-image.
Синтаксис
background-image: radial-gradient([ circle || <радиус> ] [ at <позиция> ]?, | [ ellipse || [<радиус> | <проценты> ]{2}] [ at <позиция> ]?, | [ [ circle | ellipse ] || <размер> ] [ at <позиция> ]?, | at <позиция>, <цвет> [, <цвет> ]*)Значения:
Circle Радиальный градиент круглой формы.
Ellipse Создаёт градиент эллиптической формы. Эта форма установлена по умолчанию.
<радиус> Радиус градиента в доступных для CSS единицах. Одно значение указывает радиус круга, два значения — радиус эллипса по оси x и его же радиус по оси y. Если радиус явно не указан, градиент будет заполнять собой весь фон элемента.
<позиция> Задаёт начальную точку откуда исходит градиент. Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселей или процентов; ниже приведены возможные сочетания.
· top left = left top = 0% 0% (в левом верхнем углу);
· top = top center = center top = 50% 0% (по центру вверху);
· right top = top right = 100% 0% (в правом верхнем углу);
· left = left center = center left = 0% 50% (по левому краю и по центру);
· center = center center = 50% 50% (по центру) — это значение по умолчанию;
· right = right center = center right = 100% 50% (по правому краю и по центру);
· bottom left = left bottom = 0% 100% (в левом нижнем углу);
· bottom = bottom center = center bottom = 50% 100% (по центру внизу);
· bottom right = right bottom = 100% 100% (в правом нижнем углу).
<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<размер> Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента.
| Табл. 1. Ключевые слова для изменения размера градиента | |||
| Значение | Код | Описание | Вид |
| closest-side | background: radial-gradient(circle closest-side at 30px 20px, #fff, #000); background: radial-gradient(closest-side at 30px 20px, #fff, #000); | Градиент совпадает с ближайшей к нему стороной блока (для круга) или одновременно совпадает с ближайшими горизонтальными и вертикальными сторонами (для эллипса). | 
|
| closest-corner | background: radial-gradient(circle closest-corner at 30px 20px, #fff, #000); background: radial-gradient(closest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до ближайшего угла блока. | 
|
| farthest-side | background: radial-gradient(circle farthest-side at 30px 20px, #fff, #000); background: radial-gradient(farthest-side at 30px 20px, #fff, #000); | Похож по своему действию на closest-side, но градиент распространяется до дальней стороны блока. | 
|
| farthest-corner | background: radial-gradient(circle farthest-corner at 30px 20px, #fff, #000); background: radial-gradient(farthest-corner at 30px 20px, #fff, #000); | Форма градиента вычисляется на основании информации о расстоянии до дальнего угла блока, | 
|
Резкие переходы между разными цветами 
Круговой градиент
Примечание
Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-radial-gradient().
Opera до версии 12.10 поддерживает -o-radial-gradient().
Firefox до версии 16 поддерживает -moz-radial-gradient().
Все свойства с префиксами не используют ключевое слово at при задании положения отправной точки градиента.
repeating-linear-gradient()
Создаёт бесконечно повторяющийся линейный градиент, образуя тем самым фоновый узор. По своему действию похожа на функцию linear-gradient() и имеет те же параметры. При этом цвета последовательно сменяют друг друга, после последнего цвета в списке цветов градиента сразу же идёт первый.
Синтаксис
background-image: repeating-linear-gradient([<угол> | to <позиция>,] <цвет> [, <цвет>]*);Значения
<угол> Задаёт угол наклона градиентной линии, который показывает направление градиента. Вначале пишется положительное или отрицательное значение угла, затем к нему слитно добавляется deg.
Нулю градусов (или 360º) соответствует градиент снизу вверх, далее отсчёт ведётся по часовой стрелке. Отсчёт угла наклона градиентной линии показан ниже.
<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция> Для записи позиции вначале пишется to, а затем добавляются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать to left top или to top left. В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff, по другому от чёрного к белому.
| Табл. 1. Типы градиента | |||
| Позиция | Угол | Описание | Вид |
| to top | 0deg | Снизу вверх. |
|
| to left | 270deg -90deg | Справа налево. |
|
| to bottom | 180deg | Сверху вниз. |
|
| to right | 90deg -270deg | Слева направо. |
|
| to top left | От правого нижнего угла к левому верхнему. |
| |
| to top right | От левого нижнего угла к правому верхнему. |
| |
| to bottom left | От правого верхнего угла к левому нижнему. |
| |
| to bottom right | От левого верхнего угла к правому нижнему. |
|
В данном примере фон веб-страницы заполняется чередующимися белыми и цветными полосками расположенными под углом 45 градусов.
Примечание
Chrome до версии 26, Safari до версии 6.1 и Android до версии 4.4 поддерживают -webkit-repeating-linear-gradient().
Opera до версии 12.10 поддерживает -o-repeating-linear-gradient().
Firefox до версии 16 поддерживает -moz-repeating-linear-gradient().
Все свойства с префиксами не используют ключевое слово to при задании направления градиента.
