CSS функции.

  CSS функции - это встроенные функции языка CSS, которые подобны функциям языков программирования. CSS функции существенно расширяют функционал CSS.
  CSS функции
  attr - Возвращает значение любого атрибута элемента тега. Может использоваться в качестве любого, синтаксически допустимого, значения атрибута стиля.
  Например использование значения атрибутов data-имя для вставки контента или SRC для фона поля элемента.

Формат:

  • attr(Имя атрибута [Тип значения][, Альтернатива)

Значения:

  • Имя атрибутаИмя атрибута элемента тега, значение которого должна возвратить функция attr.
  • Тип значения - Тип значения атрибута.
      Если значение этого аргумента синтаксически не допустимо в качестве типа значения атрибута стиля, то функция attr вернёт недействительное значение.
      Если этот аргумент опущен, то, по умолчанию, его значение - string.
      Список значений аргумента тип значения:
    • angleЗначение атрибута тега, интерпретируется как угловая величина.
        Перед применением из этого значения убираются все лишние пробелы.
        Оставшаяся часть значения должна подлежать интерпретации как десятичное число, в противном случае значение считается недействительным.
    • deg|grad|rad|turnЗначение атрибута тега, интерпретируется как угловая величина.
        Перед применением из этого значения убираются все лишние пробелы.
        Оставшаяся часть значения должна подлежать интерпретации как десятичное число, в противном случае значение считается недействительным.
        К проинтерпретированному значению attr добавляет, заданную аргументом единицу измерения, и получается искомая величина.
    • colorЗначение атрибута тега, интерпретируется как цвет.
        Перед применением из этого значения убираются все лишние пробелы.
    • integerЗначение атрибута тега, интерпретируется как целое число.
        Перед применением из этого значения убираются все лишние пробелы.
        Оставшаяся часть значения должна подлежать интерпретации как целое число, в противном случае значение считается не действительным.
    • lengthЗначение атрибута тега, интерпретируется как линейная величина.
        Перед применением из этого значения убираются все лишние пробелы.
        Оставшаяся часть значения должна подлежать интерпретации как десятичное число, в противном случае значение считается недействительным.
        Если величина является относительной, то attr вычислит её абсолютное значение.
    • em | ex | px | rem | vw | vh | vmin | vmax | mm | cm | in | pt | pc | %Значение атрибута тега, интерпретируется как линейная величина.
        Перед применением из этого значения убираются все лишние пробелы.
        Оставшаяся часть значения должна подлежать интерпретации как десятичное число, в противном случае значение считается недействительным.
        К проинтерпретированному значению attr добавляет заданную аргументом единицу измерения, и получается искомая величина.
    • stringЗначение атрибута тега, интерпретируется как строка.
        То есть это значение ни как не "причёсывается", а принимается таким какое есть.
        Это значение по умолчанию.
    • numberЗначение атрибута тега, интерпретируется как десятичное число.
        Перед применением из этого значения убираются все лишние пробелы.
        Оставшаяся часть значения должна подлежать интерпретации как десятичное число, в противном случае значение считается недействительным.
    • timeЗначение атрибута тега, интерпретируется как величина времени.
        Перед применением из этого значения убираются все лишние пробелы.
        Оставшаяся часть значения должна подлежать интерпретации как десятичное число, в противном случае значение считается недействительным.
    • s|msЗначение атрибута тега, интерпретируется как величина времени.
        Перед применением из этого значения убираются все лишние пробелы.
        Оставшаяся часть значения должна подлежать интерпретации как десятичное число, в противном случае значение считается недействительным.
        К проинтерпретированному значению attr добавляет заданную аргументом единицу измерения, и получается искомая величина.
    • urlЗначение атрибута тега, интерпретируется как URL-адрес.
        Перед применением из этого значения убираются все лишние пробелы.
        Правильный URL-адрес в значении атрибута задаётся относительно документа, но не относительно таблицы стилей.
    • %Значение атрибута тега, интерпретируется как линейная величина с положительным значением.
        Перед применением из этого значения убираются все лишние пробелы.
        Оставшаяся часть значения должна подлежать интерпретации как положительное десятичное число, в противном случае значение считается недействительным.
         К проинтерпретированному значению attr добавляет заданную аргументом
        единицу измерения, и получается искомая величина.
  •  АльтернативаИмя атрибута элемента тега, значение которого должна возвратить функция attr, в случае если атрибута, заданного, первым аргументом нет, или его значение синтаксически не допустимо в качестве значения атрибута стиля.
  blur - Задаёт Гауссово размытие связанного CSS объекта.

Формат:

  • blur([Радиус])

Значение:

  • Радиус - Радиус размытия. Линейная величина с единицей измерения.
      Значение определяет, сколько соседних пикселей на устройстве отображения сольются друг с другом.
      Чем больше значение, тем больше будет "размыт" связанный CSS объект.
      Значение по умолчанию равно 0.
  brightness - Задаёт яркость связанного CSS объекта.

Формат:

  • brightness([Яркость])

Значение:

  • Яркость - Линейная величина с единицей измерения % или положительное число.
      Значения 100% или 1 - это естественная яркость связанного CSS объекта.
      Значение по умолчанию равно 1.
  calc - Возвращает одно из значений angle, integer, length, number или time.

Формат:

  • calc(Выражение)

Значение:

  • Выражение - Математическое выражение.
      Операндами выражения могут быть любые из значений angle, integer, length, number или time с единицами измерения или без них.
      Операнды со своими операторами могут группироваться в подвыражения - круглыми скобками.
      Между операндами и операторами обязателен хотя бы один пробел.
      Операторы:
    • + - Cложение.
    • - - Вычитание.
    • * - Умножение.
        Хотя бы один из сомножитель должен иметь значение integer или number.
    • / - Деление.
        Делитель должен иметь значение integer или number.
      Приоритет операторов соответствует правилам арифметики.
  canvas - Возвращает CSS изображение.

Формат:

  • [-webkit-]canvas(Идентификатор)

Значение:

  circle - Задаёт круг относительно связанного CSS объекта (например поля элемента).

Формат:

  • circle([Радиус] [at Горизонтальное смещение[ Вертикальное смещение]])

Значение:

  • Радиус - Радиус круга.
      Линейная величина с единицей измерения.
      Или одно из ключевых слов:
    • closest-side - Размер ближайшей стороны связанного CSS объекта.
    • farthest-side - Размер самой дальней стороны связанного CSS объекта.
      Значение, заданное в процентах, вычисляется относительно максимального (горизонтального или вертикального) размера связанного CSS объекта.
      Размер в процентах может быть большим 100%.
      По умолчанию, радиус равен половине минимального (горизонтального или вертикального) размера связанного CSS объекта.
  • at - Ключевое слово.
  • Горизонтальное смещение - Смещение центра круга в связанном CSS объекте по горизонтали.
      Линейная величина с единицей измерения.
      Размер в процентах может быть большим 100%.
      По умолчанию горизонтальное смещение равно половине горизонтального размера связанного CSS объекта.
  • Вертикальное смещение - Смещение центра круга в связанном CSS объекте по вертикали.
      Линейная величина с единицей измерения.
      Размер в процентах может быть большим 100%.
      По умолчанию вертикальное смещение равно половине вертикального размера связанного CSS объекта.
  contrast - Задаёт контрастность связанного CSS объекта.

Формат:

  • contrast([Контрастность])

Значение:

  • Контрастность - Линейная величина с единицей измерения % или положительное число.
      Значения 100% или 1 - это естественная контрастность связанного CSS объекта.
      Значение по умолчанию равно 1.
  cubic-bezier - Описывает изменения значения связанного параметра во времени, в соответствии с заданной кривой Безье третьего порядка.
  Кривая Безье третьего порядка задается четырьмя точками A, B, C, и D.
  Каждая точка имеет координату на оси абсцисс - времени, и оси ординат - значение параметра.
  Точка A - начальная, точка D - конечная.
  Весь временной интервал изменения параметра укладывается в условный отрезок на оси абсцисс от (0,0) до (1,0).

Формат:

  • cubic-bezier(X1, Y1, X2, Y2)

Значения:

  • X1 - Число от 0 до 1 - абсцисса точки B.
      Абсцисса точки A = 0.
  • X2 - Число от 0 до 1 - абсцисса точки C.
      Абсцисса точки D = 1.
  • Y1 - Число - ордината точки B.
      Ордината точки A равна начальному значению параметра, для которого определена функция cubic-bezier.
  • Y2 - Число - ордината точки C.
      Ордината точки D равна конечному значению параметра, для которого определена функция cubic-bezier.
  drop-shadow - Задаёт тень связанного CSS объекта (например поля элемента).
  Эта функция работает аналогично атрибуту стиля box-shadow, однако при использовании фильтров обращение к функции drop-shadow предпочтительней из соображений повышения производительности.

Формат:

  • drop-shadow(Горизонтальное смещение Вертикальное смещение [ Радиус] [ Размер] [ Окраска])

Значение:

  • Горизонтальное смещение - Смещение "тени" в связанном CSS объекте по горизонтали.
      Линейная величина с единицей измерения.
      Если указано положительное число, то "тень" смещается правее, если отрицательное – левее.
      Если указан 0, то "тень" окажется прямо под связанным CSS объектом.
      Нулевое смещение имеет смысл, только если определен радиус.
  • Вертикальное смещение - Смещение "тени" в связанном CSS объекте по вертикали.
      Линейная величина с единицей измерения.
      Если указано положительное число, то "тень" смещается ниже, если отрицательное – выше.
      Если указан 0, то "тень" окажется прямо под связанным CSS объектом.
      Нулевое смещение имеет смысл, только если определен радиус.
  • Радиус - Радиус "размытия" "тени".
      Линейная величина с единицей измерения.
      По умолчанию, радиус "размытия" равен 0 и "тень" не имеет эффекта "размытия".
  • Размер - Линейная величина с единицей измерения.
      На это значение увеличивается размер "тени" по сравнению с размером связанного CSS объекта.
       По умолчанию = 0, то есть размер "тени" равен размеру связанного CSS объекта.
  • Окраска - CSS значение цвета или CSS значение градиента окраски "тени".
      По умолчанию, значение зависит от браузера.
  ellipse - Задаёт эллипс относительно связанного CSS объекта (например поля элемента).

Формат:

  • ellipse([Радиус1[ Радиус2]] [at Горизонтальное смещение[ Вертикальное смещение]])

Значение:

  • Радиус1 - Радиус по горизонтальной оси эллипса.
      Линейная величина с единицей измерения.
      Или одно из ключевых слов:
    • closest-side - Размер ближайшей стороны связанного CSS объекта.
    • farthest-side - Размер самой дальней стороны связанного CSS объекта.
      Размер в процентах может быть большим 100%.
      По умолчанию, равен половине горизонтального размера связанного CSS объекта.
  • Радиус2 - Радиус по вертикальной оси эллипса.
      Линейная величина с единицей измерения.
      Или одно из ключевых слов:
    • closest-side - Размер ближайшей стороны связанного CSS объекта.
    • farthest-side - Размер самой дальней стороны связанного CSS объекта.
      Размер в процентах может быть большим 100%.
      По умолчанию, равен половине вертикального размера связанного CSS объекта.
  • at - Ключевое слово.
  • Горизонтальное смещение - Смещение центра эллипса в связанном CSS объекте по горизонтали.
      Линейная величина с единицей измерения.
      Размер в процентах может быть большим 100%.
      По умолчанию, горизонтальное смещение равно половине горизонтального размера связанного CSS объекта.
  • Вертикальное смещение - Смещение центра эллипса в связанном CSS объекте по вертикали.
      Линейная величина с единицей измерения.
      Размер в процентах может быть большим 100%.
      По умолчанию, вертикальное смещение равно половине вертикального размера связанного CSS объекта.
  grayscale - Задаёт долю оттенков серого в связанном CSS объекте.

Формат:

  • grayscale([Доля])

Значение:

  • Доля - Линейная величина с единицей измерения % или положительное число.
      Значения 100% или 1 - это связанный CSS объект только в оттенках серого.
      Значение по умолчанию равно 0.
  hsl - Возвращает градиентное значение цвета.

Формат:

  • hsl(Оттенок, Насыщенность, Степень белого)

Значения:

  hsla - Возвращает градиентное значение цвета.

Формат:

  • hsla(Оттенок, Насыщенность, Степень белого, Прозрачность)

Значения:

  hue-rotate - Задаёт преобразование связанного CSS объекта в соответствии с заданным смещением от исходного, по часовой стрелке в цветовом круге.

Формат:

  • hue-rotate([Смещение])

Значение:

  inset - Задаёт прямоугольник относительно связанного CSS объекта (например поля элемента).
  Прямоугольник описывается положением четырёх прямых линий, пересечением которых создаётся этот прямоугольник. Опционно можно задать закругления углов прямоугольника.

Формат:

  • inset([Смещение сверху[ Смещение справа[ Смещение снизу[ Смещение слева]
       [round[ Левый верхний угол[ Правый верхний угол[ Правый нижний угол[ Левый нижний угол]]]]
    )

Значение:

  • Смещение сверху - Смещение горизонтальной прямой, образующей верхнюю горизонтальную сторону прямоугольника, от верхнего края связанного CSS объекта.
      Линейная величина с единицей измерения.
      Размер в процентах может быть больше 100%.
      По умолчанию, равно 0.
  • Смещение справа - Смещение вертикальной прямой, образующей правую вертикальную сторону прямоугольника, от правого края связанного CSS объекта.
      Линейная величина с единицей измерения.
      Размер в процентах может быть больше 100%.
      По умолчанию, равно смещению сверху.
  • Смещение снизу - Смещение горизонтальной прямой, образующей нижнюю горизонтальную сторону прямоугольника, от нижнего края связанного CSS объекта.
      Линейная величина с единицей измерения.
      Размер в процентах может быть больше 100%.
      По умолчанию, равно смещению сверху.
  • Смещение слева - Смещение вертикальной прямой, образующей левую вертикальную сторону прямоугольника, от левого края связанного CSS объекта.
      Линейная величина с единицей измерения.
      Размер в процентах может быть больше 100%.
      По умолчанию равно смещению справа.
  • round - Ключевое слово.
  • Левый верхний угол - Радиус закругления левого верхнего угла прямоугольника.
      Линейная величина с единицей измерения.
      Размер в процентах может быть больше 100%.
      По умолчанию, равен 0.
  • Правый верхний угол - Радиус закругления правого верхнего угла прямоугольника.
      Линейная величина с единицей измерения.
      Размер в процентах может быть больше 100%.
      По умолчанию, равен радиусу закругления левого верхнего угла.
  • Правый нижний угол - Радиус закругления правого нижнего угла прямоугольника.
      Линейная величина с единицей измерения.
      Размер в процентах может быть больше 100%.
      По умолчанию, равен радиусу закругления левого верхнего угла.
  • Левый нижний угол - Радиус закругления левого нижнего угла прямоугольника.
      Линейная величина с единицей измерения.
      Размер в процентах может быть больше 100%.
      По умолчанию, равен радиусу закругления правого верхнего угла.
  По существу радиус закругления угла задаёт радиус виртуальной окружности, которая должна касаться линий образующих стороны прямоугольника в этом угле. Видимая часть этой окружности от точек касания и создаёт соответствующее закругление.
  invert - Задаёт инвертирование связанного CSS объекта.

Формат:

  • invert([Доля])

Значение:

  • Доля - Линейная величина с единицей измерения % или положительное число.
      Значения 100% или 1 - это полностью инвертированный CSS объект.
      Значение по умолчанию равно 0.
  linear-gradient - Возвращает значение линейного градиента.

Формат:

  • linear-gradient([Угол | to top | bottom | left | right,]
          Цвет1[ Смещение1][ ,Цвет2 [Смещение2][ ,...] [, ЦветN [СмещениеN]]
    )

Значения:

  • Угол - Угол оси градиента относительно условной горизонтальной границы пространства занимаемого CSS объектом, к которому применяется это значение gradient.
      Условной потому, что пространство занимаемое CSS объектом, к которому применяется это значение gradient, может быть также повернуто на Web-странице.
      Угол задается угловой величиной с единицей измерения.
  • to - Ключевое слово.
      Указывает на одно из ключевых слов, которое задаёт условное направление оси для последовательности цветов градиента в пространстве занимаемом CSS объектом, к которому применяется это значение gradient.
      Условное потому, что пространство занимаемое CSS объектом, к которому применяется это значение gradient, может быть также повернуто на Web-странице.
  • top - Ось направлена условно снизу - вверх.
      Соответствует значению угла = 360deg.
  • bottom - Ось направлена условно сверху - вниз.
      Соответствует значению угла = 180deg.
      bottom - значение по умолчанию.
  • left - Ось направлена условно справа - налево.
      Соответствует значению угла = 270deg.
  • right - Ось направлена условно слева - направо.
      Соответствует значению угла = 90deg.
  • Цвет - CSS значение цвета или ключевое слово transparent(прозрачный).
      Цвет1, Цвет2, ... ЦветN - задают последовательность и количество цветов вдоль оси градиента.
  • Смещение - Начало соответствующего цвета на оси градиента.
      Задается линейной величиной с единицей измерения.
      В точке, указанной смещением, соответствующий цвет должен быть наиболее "чистым" (то есть в этой точке прекращается влияние соседних цветов градиента).
      Соответственно отрезок между предыдущим и этим смещением является путём перехода между предыдущим цветом и этим.
      То есть, чем длинней этот отрезок, тем плавней переход цветов.

      Поскольку первый цвет градиента имеет естественное смещение равное 0, то, для плавности перехода, его смещение лучше не задавать.
      Точно также, лучше не задавать смещение последнего цвета, поскольку его естественное смещение равно (или эквивалентно) 100%.

      Соответственно, каждое следующее смещение должно быть больше предыдущего, поскольку, в противном случае, путь перехода получится нулевым или отрицательным, то есть, вместо градиента, получится просто "скачёк" цветов.

      Если смещения не заданы, то вся ось градиента разобьется на равные доли пропорционально количеству цветов и исходя из максимальной плавности переходов между ними.
  matrix - Задаёт матрицу плоского (2D) преобразования связанного CSS объекта.
  Применение матрицы плоского преобразования аналогично одновременному применению функций scaleX, scaleY, skewX, skewY, translateX, translateY, rotateX и rotateY.
  Однако значения аргументов функции matrix задаются без единиц измерения.

  Подразумевается, что линейные величины имеют единицу измерения - px, а угловые величины имеют единицу измерения - rad.

Формат обращения к функции matrix без поворота:

  • matrix(scX, skY, skX, scY, trX, trY)

Значения:

  Для того чтобы в обращении к функции matrix задать поворот надо алгебраическую матрицу:
	       [scX skX 0]
	         [skY scY 0]
	         [trX trY 0]
	  

Умножить последовательно на матрицы:
	    [cos(УголX)   1         0]
	      [1           cos(УголX) 0]
	      [0            0         1]
	  
и
	    [1          -sin(УголY) 0]
	      [sin(УголY)  1          0]
	      [0            0         1]
	  
или на одну
	    [cos(Угол) -sin(Угол) 0]
	      [sin(Угол)  cos(Угол) 0]
	      [0            0       1]
	  
А полученные значения результирующей матрицы подставить вместо соответствующих аргументов функции matrix. (Значения углов - это значения аргументов соответствующих функций rotateX, rotateY и rotate.).
  Совершенно непонятно почему разработчик должен вычислять значения аргументов функции matrix в этом случае, вместо того чтобы просто задать значения углов поворота в качестве дополнительных её аргументов.
  И вообще говоря, вся логика следования и задания значений аргументов в обращении к функции matrix такова, будто специально предназначена для создания наибольших препятствий разработчику в использовании этой функции.
  matrix3d - Задаёт матрицу преобразования связанного CSS объекта в виртуальном 3D пространстве.
  Применение матрицы 3D преобразование аналогично одновременному применению функций scaleX, scaleY, scaleZ, skewX, skewY, translateX, translateY, rotateX, rotateY и rotateZ.
  Однако значения аргументов функции matrix3d задаются без единиц измерения.

  Подразумевается, что линейные величины имеют единицу измерения - px, а угловые величины имеют единицу измерения - rad.
  Если для связанного CSS объекта не задана перспектива, то функция matrix3d работает аналогично функции matrix.

Формат обращения к функции matrix3d без поворота:

  • matrix3d(sX, skX, 0, 0, skY, sY, 0, 0, 0, 0, sZ, 0, trX, trY, trZ, 1)

Значения:

  Поворот в обращении к функции matrix3d задаётся аналогично обращению к функции matrix алгебраическим перемножением матриц поворота.
  Вообще говоря код обращения к функции matrix не очень нагляден из за логики следования аргументов, поэтому эта функция не очень-то используется.
  max - Возвращает наибольшее из двух значений.
  Обращение к функции max имеет смысл, если значение хотя бы одного из аргументов не абсолютно.

Формат:

  • minmax(Значение1, Значение2)

Значения:

  min - Возвращает наименьшее из двух значений.
  Обращение к функции min имеет смысл, если значение хотя бы одного из аргументов не абсолютно.

Формат:

  • max(Значение1, Значение2)

Значения:

  minmax - Возвращает массив из двух значений.

Формат:

  • minmax(Минимум, Максимум)

Значения:

  • Минимум - Линейная величина с единицей измерения или без единицы измерения.
      Значение должно быть меньше значения максимум.
  • Максимум - Линейная величина с единицей измерения или без единицы измерения.
      Значение должно быть больше значения минимум.
  opacity - Задаёт прозрачность связанного CSS объекта.

Формат:

  • opacity([Доля непрозрачности])

Значение:

  • Доля непрозрачности - Линейная величина с единицей измерения % или положительное число.
      Значения 0% или 0 - это полностью прозрачный CSS объект.
      Значение по умолчанию равно 1 или 100%.
  perspective - Задаёт глубину перспективы связанного CSS объекта для 3D эффекта.
  Глубина перспективы равная 0 означает, что у объекта нет перспективы для 3D эффекта.
  То есть этот объект не может иметь координату по оси Z.

  Задание не нулевого значения глубины перспективы означает, что плоскость экрана устройства отображения объекта виртуально приближается к пользователю на расстояние равное этому значению.
  В этом случае, любые положительные значения координаты Z объекта будут соответственно увеличивать его (виртуально приближать к пользователю), а любые отрицательные значения соответственно уменьшать.
  Само по себе обращение к этой функции никак не меняет визуальные размеры связанного CSS объекта.

Формат:

  • perspective(Глубина)

Значения:

  • Глубина - Глубина перспективы. Линейная величина с единицей измерения.
      Значение = 0 будет означать, что у связанного CSS объекта нет перспективы для 3D эффекта.
  polygon - Задаёт многоугольную фигуру относительно связанного CSS объекта (например поля элемента).
  Многоугольная фигура описывается координатами вершин её углов, между которыми последовательно проводятся соединительные линии.
  Эти координаты не должны логически противоречить друг другу, однако, назвать polygon просто многоугольником нельзя, так как соединительные линии могут пересекаться.

  Естественно у многоугольной фигуры должно быть не менее трёх вершин.

Формат:

  • polygon([nonzero,|evenodd,]X1 Y1, X2 Y2, X3 Y3[, ...] [, Xn Yn])

Значение:

  • X - Горизонтальное смещение вершины соответствующего угла многоугольной фигуры.
      Размер в процентах может быть большим 100%.
  • Y - Вертикальное смещение вершины соответствующего угла многоугольной фигуры.
      Размер в процентах может быть большим 100%.
  • nonzero - Ключевое слово.
      Означает что замкнутые области многоугольной фигуры, которые могут образоваться при пересечении линий последовательно соединяющих её углы из всех этих линий, входят в состав этой фигуры.
      Умолчание.
  • evenodd - Ключевое слово.
      Означает что замкнутые области многоугольной фигуры, которые могут образоваться при пересечении линий последовательно соединяющих её углы из всех этих линий, не входят в состав этой фигуры.
  radial-gradient - Возвращает значение радиального радиального градиента.

Формат:

  • radial-gradient([[circle|ellipse [Радиус1] [Радиус2]]
          [at Позиция]
          [closest-corner | closest-side | farthest-corner | farthest-side],]
          Цвет1 [Смещение1][, Цвет2 [Смещение2][,...][, ЦветN [СмещениеN]
    )

Значения:

  • circle - Ключевое слово.
      Означает что формой радиального градиента является окружность.
  • ellipse - Ключевое слово.
      Означает, что формой радиального градиента является эллипс.
      Значение по умолчанию.
  • Радиус1 - Величина (с единицей измерения) радиуса по условной горизонтальной оси эллипса или радиуса окружности.
      Условной потому, что пространство, занимаемое CSS объектом, к которому применяется это значение gradient, может быть повернуто на Web-странице).
      По умолчанию, имеет значение, которое задаётся одним из ключевых слов - closest-corner, closest-side, farthest-corner, или farthest-side.
      Любой радиус эллипса или радиус окружности может быть больше пределов пространства занимаемым CSS объектом, к которому применяется это значение gradient.
  • Радиус2 - Величина (с единицей измерения) радиуса по условной вертикальной оси эллипса.
      Условной потому, что пространство, занимаемое CSS объектом, к которому применяется это значение gradient, может быть повернуто на Web-странице).
      По умолчанию, имеет значение, которое задаётся одним из ключевых слов - closest-corner, closest-side, farthest-corner, или farthest-side.
      Любой радиус эллипса может быть больше пределов пространства занимаемого CSS объектом, к которому применяется это значение gradient.
  • at - Ключевое слово.
  • Позиция - Позиция центра градиента в пространстве занимаемым CSS объектом, к которому применяется это значение gradient.
      По умолчанию, позиция = center left 50%.
      Центр градиента это место пересечения двух любых диаметров окружности или условных горизонтальной и вертикальной осей эллипса.
  • closest-corner - Ключевое слово.
      Устанавливает величину наибольшего радиуса градиента равной расстоянию между центром градиента и наиболее близким к нему углом пространства занимаемого CSS объектом, к которому применяется это значение gradient.
  • closest-side - Ключевое слово.
      Устанавливает величину обоих радиусов градиента равной расстоянию между центром градиента и наиболее близким к ним сторонам пространства занимаемого CSS объектом, к которому применяется это значение gradient.
  • farthest-corner - Ключевое слово.
      Устанавливает величину наибольшего радиуса градиента равной расстоянию между центром градиента и наиболее дальним к нему углом пространства занимаемого CSS объектом, к которому применяется это значение gradient.
      Это значение по умолчанию.
      То есть область действия этого градиента наиболее максимально захватывает пространство занимаемое CSS объектом, к которому применяется это значение gradient.
  • farthest-side - Ключевое слово.
      Устанавливает величину обоих радиусов градиента равной расстоянию между центром градиента и наиболее дальним к ним сторонам пространства занимаемого CSS объектом, к которому применяется это значение gradient.
  • Цвет - CSS значение цвета или ключевое слово transparent(прозрачный).
      Цвет1, Цвет2, ... ЦветN - задают последовательность и количество цветов вдоль любого радиуса градиента. Начало последовательности всегда в центре градиента.
  • Смещение - Начало соответствующего цвета на радиусе градиента.
      Задается линейной величиной с единицей измерения.
      В точке, указанной смещением, соответствующий цвет должен быть наиболее "чистым" (то есть в этой точке прекращается влияние соседних цветов градиента).
      Соответственно отрезок между предыдущим и этим смещением является путём перехода между предыдущим цветом и этим.
      То есть, чем длинней этот отрезок, тем плавней переход цветов.

      Поскольку первый цвет градиента имеет естественное смещение равное 0, то, для плавности перехода, его смещение лучше не задавать.

      Точно также, лучше не задавать смещение последнего цвета, поскольку его естественное смещение равно (или эквивалентно) 100%.

      Соответственно, каждое следующее смещение должно быть больше предыдущего, поскольку, в противном случае, путь перехода получится нулевым или отрицательным, то есть, вместо градиента, получится просто "скачёк" цветов.

      Если смещения не заданы, то весь радиус градиента разобьётся на равные доли пропорционально количеству цветов и исходя из максимальной плавности переходов между ними.
  rect - Описывает прямоугольник с заданными сторонами относительно пространства CCS объекта.

Формат:

  • rect(y1, x1, y2, x2)

Значения:

  repeat - Возвращает массив из повторяющихся значений.

Формат:

  • minmax(Количество, Значение)

Значения:

  • Количество - Положительное число - задаёт количество повторений значения.
  • Значение - CSS значение.
  repeating-linear-gradient - Возвращает CSS значение изображения на основе линейного градиента.
  Линейный градиент, заданный аргументами функции repeating-linear-gradient, будет повторяться в изображении столько раз, сколько его повторений уместится на оси градиента.

Формат:

  • repeating-linear-gradient([Угол | to top|bottom|left|right,]
          Цвет1 [ Смещение1] [,Цвет2 [Смещение2] [,...] [, ЦветN [СмещениеN]
    )

Значения:

  • Угол - Угол оси градиента относительно условной горизонтальной границы пространства, занимаемого CSS объектом, к которому применяется это значение изображения.
      Условной потому, что пространство, занимаемое CSS объектом, к которому применяется это значение изображения, может быть также повернуто на Web-странице.
      Угол задается угловой величиной с единицей измерения.
  • to - Ключевое слово.
      Указывает на одно из ключевых слов, которое задаёт условное направление оси для последовательности цветов градиента в пространстве, занимаемом CSS объектом, к которому применяется это значение изображения.
      Условное потому, что пространство, занимаемое CSS объектом, к которому применяется это значение изображения, может быть также повернуто на Web-странице.
  • top - Направление оси условно снизу - вверх.
      Соответствует значению угла = 360deg.
  • bottom - Направление оси условно сверху - вниз.
      Соответствует значению угла = 180deg.
      bottom - значение по умолчанию.
  • left - Направление оси условно справа - налево.
      Соответствует значению угла = 270deg.
  • right - Направление оси условно слева - направо.
      Соответствует значению угла = 90deg.
  • Цвет - CSS значение цвета или ключевое слово transparent (прозрачный).
      Цвет1, Цвет2, ... ЦветN - задают последовательность и количество цветов вдоль оси градиента, из повторений которого будет получено искомое изображение.
      Надо иметь в виду что, при повторении заданного градиента в изображении, переходы между повторениями не будут плавными. Это можно устранить, задав граничные цвета одинаковыми.
  • Смещение - Начало соответствующего цвета на оси градиента.
      Задается линейной величиной с единицей измерения.
      В точке, указанной смещением, соответствующий цвет должен быть наиболее "чистым" (то есть в этой точке прекращается влияние соседних цветов градиента).
      Соответственно отрезок между предыдущим и этим смещением является путём перехода между предыдущим цветом и этим.
      То есть, чем длинней этот отрезок, тем плавней переход цветов.

      Поскольку первый цвет градиента имеет естественное смещение равное 0, то, для плавности перехода, его смещение лучше не задавать.

      В отличие от функции linear-gradient, смещение последнего цвета задавать необходимо, поскольку это смещение должно определить общую "длину" линейного градиента, из повторений которого и получится искомое изображение.

      Соответственно, каждое следующее смещение должно быть больше предыдущего поскольку, в противном случае, путь перехода получится нулевым или отрицательным, то ест, вместо градиента, получится просто "скачёк" цветов.

      Самое большое (лучше последнее) смещение должно быть, по крайней мере, меньше всей оси градиента, чтобы получилось хоть какое-то повторение градиента.
      Если это не так, или если смещения не заданы, то обращение к функции repeating-linear-gradient, по существу, эквивалентно обращению к функции linear-gradient, только возвращаемым значением будет не градиент, а изображение.
  repeating-radial-gradient - Возвращает CSS значение изображения на основе радиального градиента.
  Радиальный градиент, заданный аргументами функции repeating-radial-gradient, будет повторяться в изображении столько раз, сколько его повторений уместится на радиусе градиента.

Формат:

  • repeating-radial-gradient([circle|ellipse [Радиус1] [Радиус2]]
          [at Позиция]
          [closest-corner | closest-side | farthest-corner | farthest-side]
          Цвет1 [Смещение1][, Цвет2 [Смещение2] [,...] [, ЦветN [СмещениеN]
    )

Значения:

  • circle - Ключевое слово. Означает, что формой радиального градиента является окружность.
  • ellipse - Ключевое слово. Означает, что формой радиального градиента является эллипс. (Значение по умолчанию.)
  • Радиус1 - Величина (с единицей измерения) радиуса по условной горизонтальной оси эллипса или радиуса окружности.
      Условной потому, что пространство, занимаемое CSS объектом, к которому применяется это значение изображения, может быть повернуто на Web-странице.
      По умолчанию, имеет значение, которое задаётся одним из ключевых слов - closest-corner, closest-side, farthest-corner, или farthest-side.
      Любой радиус эллипса или радиус окружности может быть больше пределов пространства занимаемым CSS объектом, к которому применяется это значение изображения.
  • Радиус2 - Величина (с единицей измерения) радиуса по условной вертикальной оси эллипса.
      Условной потому, что пространство, занимаемое CSS объектом, к которому применяется это значение изображения, может быть повернуто на Web-странице.
      По умолчанию, имеет значение, которое задаётся одним из ключевых слов - closest-corner, closest-side, farthest-corner, или farthest-side.
      Любой радиус эллипса может быть больше пределов пространства занимаемого CSS объектом, к которому применяется это значение изображения.
  • at - Ключевое слово.
  • Позиция - Позиция центра градиента в пространстве занимаемым CSS объектом, к которому применяется это значение gradient.
      По умолчанию, позиция = center left 50%.
      Центр градиента это место пересечения двух любых диаметров окружности или условных горизонтальной и вертикальной осей эллипса.
  • closest-corner - Ключевое слово.
      Устанавливает величину наибольшего радиуса градиента равной расстоянию между центром градиента и наиболее близким к нему углом пространства, занимаемого CSS объектом, к которому применяется это значение изображения.
  • closest-side - Ключевое слово.
      Устанавливает величину обоих радиусов градиента равной расстоянию между центром градиента и наиболее близким к ним сторонам пространства занимаемого CSS объектом, к которому применяется это значение изображения.
  • farthest-corner - Ключевое слово.
      Устанавливает величину наибольшего радиуса градиента равной расстоянию между центром градиента и наиболее дальним к нему углом пространства, занимаемого CSS объектом, к которому применяется это значение изображения.
      Это значение по умолчанию. То есть область действия этого изображения наиболее максимально захватывает пространство, занимаемое CSS объектом, к которому применяется это значение изображения.
  • farthest-side - Ключевое слово.
      Устанавливает величину обоих радиусов градиента равной расстоянию между центром градиента и наиболее дальним к ним сторонам пространства, занимаемого CSS объектом, к которому применяется это значение изображения.
  • Цвет - CSS значение цвета или ключевое слово transparent (прозрачный).
      Цвет1, Цвет2, ... ЦветN - задают последовательность и количество цветов вдоль любого радиуса градиента, из повторений которого будет получено искомое изображение. Начало последовательности всегда в центре градиента.
      Надо иметь в виду что, при повторении заданного градиента в изображении, переходы между повторениями не будут плавными. Это можно устранить, задав граничные цвета одинаковыми.
  • Смещение - Начало соответствующего цвета на радиусе градиента.
      Задается линейной величиной с единицей измерения.
      В точке, указанной смещением, соответствующий цвет должен быть наиболее "чистым" (то есть в этой точке прекращается влияние соседних цветов градиента).
      Соответственно отрезок между предыдущим и этим смещением является путём перехода между предыдущим цветом и этим.
      То есть, чем длинней этот отрезок, тем плавней переход цветов.

      Поскольку первый цвет градиента имеет естественное смещение равное 0, то, для плавности перехода, его смещение лучше не задавать.

      В отличие от функции radial-gradient, смещение последнего цвета задавать необходимо, поскольку это смещение должно определить общую "длину" линейного градиента, из повторений которого и получится искомое изображение.

      Соответственно, каждое следующее смещение должно быть больше предыдущего, поскольку, в противном случае, путь перехода получится нулевым или отрицательным, то ест, вместо градиента, получится просто "скачёк" цветов.

      Самое большое (лучше последнее) смещение должно быть, по крайней мере, меньше всего радиуса градиента, чтобы получилось хоть какое-то повторение градиента.
      Если это не так, или если смещения не заданы, то обращение к функции repeating-radial-gradient, по существу, эквивалентно обращению к функции radial-gradient, только возвращаемым значением будет не градиент, а изображение.
  rgb - Возвращает смешанное значение цвета.

Формат:

  • rgb(Красный,Зеленый,Синий)

Значения:

  rgba - Возвращает смешанное значение цвета.

Формат:

  • rgba(Красный, Зеленый, Синий, Прозрачность)

Значения:

  rotate - Задаёт плоский (2D) поворот без перекоса связанного CSS объекта, без деформации CSS объекта.

Формат:

  • rotate(Угол)

Значения:

  • Угол - Угол поворота.
      Угловая величина с единицей измерения.
      Значение = 0 - исходное положение.
      Положительные и отрицательные значения соответствуют стандартной плоской системе координат.
  rotate3d - Задаёт виртуальный поворот связанного CSS объекта по часовой стрелке одновременно вокруг осей вращения X, Y и Z в виртуальном 3D пространстве, без деформации CSS объекта.
  Поворот задаётся направляющим вектором (X,Y,Z) из центра системы координат и углом поворота.
  Каждая координата вектора определяет угол поворота вокруг соответствующей оси.
  Наибольшее значение из трёх координат указывает на ось, вокруг которой объект повернётся на полный заданный угол поворота.
  Значения оставшихся координат пропорционально определят "доли" от заданного угла поворота, на которые и будет повёрнут объект вокруг соответствующих осей координат.

  Для "чистого" поворота вокруг осей вращения X, Y и Z сумма квадратов значений трех координат вектора должна быть равна 1 (нормализованный вектор).
  Если задан не нормализованный вектор, то браузер попытается его нормализовать или же указанный поворот не будет выполнен.

Формат:

  • rotate3d(X,Y,Z,Угол)

Значения:

степеньX
  rotateX - Задаёт виртуальный ("3D") поворот по часовой стрелке связанного CSS объекта вокруг горизонтальной оси (X) находящейся в плоскости экрана, без деформации CSS объекта.

Формат:

  • rotateX(Угол)

Значения:

  • Угол - Угол поворота.
      Угловая величина с единицей измерения.
      Допустимы отрицательные значения.
      Значение = 0 - исходное положение.
  rotateY - Задаёт виртуальный ("3D") поворот по часовой стрелке связанного CSS объекта вокруг вертикальной оси (Y) находящейся в плоскости экрана, без деформации CSS объекта.

Формат:

  • rotateY(Угол)

Значения:

  • Угол - Угол поворота.
      Угловая величина с единицей измерения.
      Допустимы отрицательные значения.
      Значение = 0 - исходное положение.
  rotateZ - Задаёт поворот по часовой стрелке связанного CSS объекта вокруг виртуальной оси Z перпендикулярной плоскости экрана, без деформации CSS объекта.

Формат:

  • rotateZ(Угол)

Значения:

  • Угол - Угол поворота.
      Угловая величина с единицей измерения.
      Допустимы отрицательные значения.
      Значение = 0 - исходное положение.
  saturate - Задаёт насыщенность связанного CSS объекта.

Формат:

  • saturate([Насыщенность])

Значение:

  • Насыщенность - Линейная величина с единицей измерения % или положительное число.
      Значения 100% или 1 - это естественная насыщенность связанного CSS объекта.
      Значение может быть большим, чем 100% или 1.
      Значение по умолчанию равно 1 или 100%.
  scale - Задаёт масштабирование связанного CSS объекта в плоскости экрана по горизонтали (вдоль оси X) и вертикали (вдоль оси Y)) одновременно.
  Поскольку значения масштаба по осям могут быть различными, то форма связанного CSS объекта может соответственно измениться.

Формат:

  • scale(МасштабX [, МасштабY])

Значения:

степеньX
  • МасштабX - Размер масштабирования вдоль оси X.
      Значение = 1 - означает исходный размер, значение меньшее 1 сужает связанный CSS объект вдоль оси X, большее - вытягивает.
      Отрицательное значение приводит к зеркальному отражению размера связанного CSS объекта вдоль оси X.
  • МасштабY - Размер масштабирования вдоль оси Y.
      Значение = 1 - означает исходный размер, значение меньшее 1 сужает связанный CSS объект вдоль оси Y, большее - вытягивает.
      Отрицательное значение приводит к зеркальному отражению размера связанного CSS объекта вдоль оси Y.
      Значение по умолчанию = МасштабX.
  scale3d - Задаёт масштабирование связанного CSS объекта в виртуальном 3D пространстве вдоль осей X, Y и Z одновременно.
  Поскольку значения масштаба по осям могут быть различными, то форма связанного CSS объекта может соответственно измениться.

Формат:

  • scale3d(МасштабX [, МасштабY, МасштабZ])

Значения:

  • МасштабX - Размер масштабирования вдоль оси X.
      Значение = 1 - означает исходный размер, значение меньшее 1 сужает связанный CSS объект вдоль оси X, большее - вытягивает.
      Отрицательное значение приводит к зеркальному отражению размера связанного CSS объекта вдоль оси X.
  • МасштабY - Размер масштабирования вдоль оси Y.
      Значение = 1 - означает исходный размер, значение меньшее 1 сужает связанный CSS объект вдоль оси Y, большее - вытягивает.
      Отрицательное значение приводит к зеркальному отражению размера связанного CSS объекта вдоль оси Y.
      Может быть опущен вместе с аргументом МасштабZ. Значение по умолчанию = МасштабX.
  • МасштабZ - Размер масштабирования вдоль виртуальной оси Z (перпендикулярной плоскости экрана).
      Значение = 1 - означает исходный виртуальный размер, значение меньшее 1 сужает связанный CSS объект вдоль виртуальной оси Z, большее - вытягивает.
      Отрицательное значение приводит к зеркальному отражению размера связанного CSS объекта вдоль виртуальной оси Z.
      Может быть опущен вместе с аргументом МасштабY. Значение по умолчанию = МасштабX.
      Если для связанного CSS объекта не задана перспектива, то функция scale3d работает аналогично функции scale.
  scaleX - Задаёт масштабирование связанного CSS объекта в плоскости экрана по горизонтали (вдоль оси X).
  Такое преобразование приводит к тому, что абсцисса каждой точки связанного CSS объекта как бы умножается на значение, заданное масштабом. Это преобразование изменяет форму связанного CSS объекта.

Формат:

  • scaleX(Масштаб])

Значения:

степеньX
  • Масштаб - Размер масштабирования.
      Значение = 1 - означает исходный размер, значение меньшее 1 сужает связанный CSS объект вдоль оси X, большее - вытягивает.
      Отрицательное значение приводит к зеркальному отражению размера связанного CSS объекта вдоль оси X.
  scaleY - Задаёт масштабирование связанного CSS объекта в плоскости экрана по вертикали (вдоль оси Y).
  Такое преобразование приводит к тому, что ордината каждой точки связанного CSS объекта как бы умножается на значение, заданное масштабом. Это преобразование изменяет форму связанного CSS объекта.

Формат:

  • scaleY(Масштаб])

Значения:

степеньX
  • Масштаб - Размер масштабирования.
      Значение = 1 - означает исходный размер, значение меньшее 1 сужает связанный CSS объект вдоль оси X, большее - вытягивает.
      Отрицательное значение приводит к зеркальному отражению размера связанного CSS объекта вдоль оси X.
  sepia - Задаёт долю оттенков сепии связанного CSS объекта.
  Сепия это оттенки коричневого цвета. Такая окраска присуща старым чёрно-белым фотографиям.

Формат:

  • sepia([Доля])

Значение:

  • Доля - Линейная величина с единицей измерения % или положительное число.
      Значения 100% или 1 - это связанный CSS объект полностью в оттенках сепии.
      Значение по умолчанию равно 0.
  skew - Задаёт плоский (2D) перекос связанного CSS объекта.

Формат:

  • skew(УголX[, УголY])

Значения:

  • УголX - Угол вертикального прекоса (угол наклона к оси X).
      Угловая величина с единицей измерения.
      Допустимы отрицательные значения.
      Значение = 0 - исходное положение.
      Вертикальный перекос без "обрезания" связанного CSS объекта, в некоторых случаях, возможен лишь при его особом позиционировании.
  • УголY - Угол горизонтального прекоса (угол наклона к оси Y). Угловая величина с единицей измерения.
      Угловая величина с единицей измерения.
      Допустимы отрицательные значения.
      Значение = 0 - исходное положение.
      Значение по умолчанию = 0.
  skewX - Задаёт плоский (2D) вертикальный прекос (наклон вдоль оси X) связанного CSS объекта.

Формат:

  • skewX(Угол)

Значения:

  • Угол - Угол перекоса (угол наклона к оси X). Угловая величина с единицей измерения.
      Угловая величина с единицей измерения.
      Допустимы отрицательные значения.
      Значение = 0 - исходное положение.
      Вертикальный перекос без "обрезания" связанного CSS объекта, в некоторых случаях, возможен лишь при его особом позиционировании.
  skewY - Задаёт плоский (2D) горизонтальный прекос (наклон вдоль оси Y).

Формат:

  • skewY(Угол)

Значения:

  • Угол - Угол перекоса (угол наклона к оси Y).
      Угловая величина с единицей измерения.
      Допустимы отрицательные значения.
      Значение = 0 - исходное положение.
  steps - Описывает ступенчатое изменение значения связанного параметра во времени.
  Каждая "ступень" это отрезок параллельный оси абсцисс - времени, все точки которого имеют одинаковую ординату - значение параметра.
  Точки первой "ступени" имеют ординату равную начальному значению параметра, для которого определена функция steps.
  Точки последней "ступени" имеют ординату равную конечному значению параметра, для которого определена функция steps.
  Количество "ступеней" - отрезков задаётся аргументом функции steps.

  Ордината каждой "ступени" возрастает скачком на величину, которая равна конечному значению параметра, для которого определена функция steps, делённому на количество "ступеней".

  Весь временной интервал изменения параметра укладывается в условный отрезок на оси абцисс от (0,0) до (1,0).

  Начальная точка первой "ступени" имеет абсциссу равную 0. Конечная точки последней "ступени" имеет абсциссу равную 1.

Формат:

  • steps(n[, Направление])

Значения:

  • n - Положительное целое число - количество "ступеней".
      Весь временной интервал изменения параметра будет разбит на это количество равных отрезков.
  • Направление - Задаёт условие начала "подъёма по ступеням" параметра, для которого определена функция steps:
    • start - Первый "шаг" происходит сразу.
    • end - Первый "шаг" происходит по прошествие времени, которое задаёт абсцисса конечной точки первой "ступени". (Значение по умолчанию.)
  translate - Задаёт смещение связанного CSS объекта в плоскости экрана по горизонтали (вдоль оси X) и вертикали (вдоль оси Y) одновременно, без деформации объекта.

Формат:

  • translate(СмещениеX[, СмещениеY])

Значения:

  • СмещениеX - Размер смещения по горизонтали.
      Линейная величина с единицей измерения.
      Значение = 0 - означает исходное положение.
      Положительное значение смещает "вправо" связанный CSS объект, отрицательное значение смещает "влево" связанный CSS объект.
      Смещение "влево" без "обрезания" связанного CSS объекта, в некоторых случаях, возможно лишь при особом его позиционировании.
  • СмещениеY - Размер смещения по вертикали.
      Линейная величина с единицей измерения.
      Значение = 0 - означает исходное положение.
      Положительное значение смещает "вниз" связанный CSS объект, отрицательное значение смещает "вверх" связанный CSS объект.
      Значение по умолчанию = 0.
  translate3d - Задаёт смещение связанного CSS объекта в виртуальном 3D пространстве по осям X, Y и Z одновременно.

Формат:

  • translate3d(СмещениеX[, СмещениеY[, СмещениеZ]])

Значения:

  • СмещениеX - Размер смещения по оси X.
      Линейная величина с единицей измерения.
      Значение = 0 - означает исходное положение.
      Положительное значение смещает "вправо" связанный CSS объект, отрицательное значение смещает "влево" связанный CSS объект.
      Смещение "влево" без "обрезания" связанного CSS объекта, в некоторых случаях, возможно лишь при особом его позиционировании.
  • СмещениеY - Размер смещения по оси Y.
      Линейная величина с единицей измерения.
      Значение = 0 - означает исходное положение.
      Положительное значение смещает "вниз" связанный CSS объект, отрицательное значение смещает "вверх" связанный CSS объект.
      Значение по умолчанию = 0.
  • СмещениеZ - Размер смещения по оси Z.
      Значение = 0 - означает исходное положение.
      Значение меньшее 0 "отодвигает" (визуально уменьшая) связанный CSS объект, большее 0 - "приближает" (визуально увеличивая) связанный CSS объект.
      Значение по умолчанию = 0.
      Если для связанного CSS объекта не задана перспектива, то функция translate3d работает аналогично функции translate.
  translateX - Задаёт смещение связанного CSS объекта в плоскости экрана по горизонтали (вдоль оси X), без деформации объекта.

Формат:

  • translateX(Смещение])

Значения:

  • Смещение - Размер смещения по горизонтали.
      Линейная величина с единицей измерения.
      Значение = 0 - означает исходное положение.
      Положительное значение смещает "вправо" связанный CSS объект, отрицательное значение смещает "влево" связанный CSS объект.
      Смещение "влево" без "обрезания" связанного CSS объекта, в некоторых случаях, возможно лишь при особом его позиционировании.
      Значение по умолчанию = 0.
  translateY - Задаёт смещение связанного CSS объекта в плоскости экрана по вертикали (вдоль оси Y), без деформации объекта.

Формат:

  • translateY(Смещение])

Значения:

  • Смещение - Размер смещения по вертикали.
      Линейная величина с единицей измерения.
      Значение = 0 - означает исходное положение.
      Положительное значение смещает "вниз" связанный CSS объект, отрицательное значение смещает "вверх" связанный CSS объект.
      Значение по умолчанию = 0.
  url - Возвращает CSS значение.

Формат:

  • url(Ссылка)

Значение:

  var - Возвращает значение атрибута стиля, введённого в CSS-таблицу разработчиком.
  Разработчик может ввести свой атрибут стиля в любом правиле CSS-таблицы для элемента "родительского" тега любого уровня, по отношению к элементу, к которому будет применяться функция var.
  Имя такого атрибута стиля должно начинаться с двух дефисов --.
  Этому атрибуту стиля можно стандартным образом задать узаконенное значение.
  Такой атрибут стиля со своим значением никак не воспримется браузером, однако, с помощью функции var можно получить его значение.
  В свою очередь, любому другому узаконенному атрибуту стиля можно задать значение обращением к функции var.

Формат:

  • var(Ссылка[, Значение])

Значение:

  • Ссылка - Имя атрибута стиля, который ввел разработчик в CSS-таблице.
      Значение этого атрибута вернёт функция var.
  • Значение - Узаконенное значение для атрибута стиля.
      Это значение вернёт функция var если не возможно будет разрешить ссылку.