Функции в 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(<выражение>)