Функции

bookmark_border Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Подкаст CSS - 020: Функции

До сих пор в этом курсе вы познакомились с несколькими функциями CSS. В модуле сетки вы познакомились с minmax() и fit-content() , которые помогают вам изменять размер элементов. В модуле цвета вы познакомились с rgb() и hsl() , которые помогают вам определять цвета.

Как и многие другие языки программирования, CSS имеет множество встроенных функций , к которым вы можете получить доступ в любое время.

Каждая функция CSS имеет определенное назначение. В этом уроке вы получите общий обзор, который позволит вам лучше понять, где и как их использовать.

Что такое функция?

Функция — это именованный, самодостаточный фрагмент кода, который выполняет определенную задачу. Функция имеет имя, чтобы вы могли вызывать ее в своем коде и передавать данные в функцию. Это называется передачей аргументов.

Многие функции CSS являются чистыми функциями , что означает, что если вы передаете им те же аргументы, они всегда будут возвращать вам тот же результат, независимо от того, что происходит в остальной части вашего кода. Эти функции часто будут пересчитываться по мере изменения значений в вашем CSS, подобно другим элементам в языке, таким как вычисляемые каскадные значения, такие как currentColor .

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

Функциональные селекторы

.post :is(h1, h2, h3) {
    line-height: 1.2;
}

Вы узнали о функциональных селекторах в модуле псевдоклассов , в котором подробно описаны такие функции, как :is() и :not() . Аргументы, передаваемые в эти функции, являются селекторами CSS, которые затем оцениваются. Если есть совпадение с элементами, к ним будет применена остальная часть правила CSS .

Пользовательские свойства и var()

:root {
    --base-color: #ff00ff;
}

.my-element {
    background: var(--base-color);
}

Пользовательское свойство — это переменная, которая позволяет вам токенизировать значения в вашем CSS-коде. Каскад также влияет на пользовательские свойства , что означает, что их можно контекстно изменять или переопределять. Пользовательское свойство должно иметь префикс из двух дефисов ( -- ) и чувствительно к регистру.

Функция var() принимает один обязательный аргумент: пользовательское свойство, которое вы пытаетесь вернуть в качестве значения.

В предыдущем фрагменте функция var() имеет --base-color переданный в качестве аргумента. Если --base-color определен, то var() вернет значение.

.my-element {
    background: var(--base-color, hotpink);
}

Вы также можете передать резервное значение декларации в функцию var() . Это означает, что если --base-color не может быть найден, вместо него будет использована переданная декларация , которая в случае этого примера является цветом hotpink .

Функции, возвращающие значение

Функция var() — это всего лишь одна из функций CSS, возвращающих значение. Такие функции, как attr() и url() следуют структуре, похожей на var() — вы передаете один или несколько аргументов и используете их в правой части вашего объявления CSS.

a::after {
  content: attr(href);
}

Функция attr() здесь берет содержимое атрибута href элемента <a> и устанавливает его как content псевдоэлемента ::after . Если бы значение атрибута href элемента <a> изменилось, это автоматически отразилось бы в этом атрибуте content .

.my-element {
    background-image: url('/path/to/image.jpg');
}

Функция url() принимает строку URL и используется для загрузки изображений, шрифтов и контента. Если действительный URL не передан или ресурс, на который указывает URL, не может быть найден, функция url() ничего не вернет.

Цветовые функции

Вы узнали все о цветовых функциях в модуле цвета . Если вы еще не читали его, настоятельно рекомендуется это сделать.

Некоторые доступные функции цвета в CSS: rgb() , hsl() , lab() , lch() , oklab() , oklch() и color() . Все они имеют схожую форму, в которой передаются аргументы конфигурации, а обратно возвращается цвет.

Математические выражения

Как и многие другие языки программирования, CSS предоставляет полезные математические функции, облегчающие выполнение различных типов вычислений.

Арифметические функции

calc()

Функция calc() принимает одно математическое выражение в качестве параметра. Это математическое выражение может быть смесью типов, таких как длина, число, угол и частота. Единицы измерения также могут быть смешанными.

.my-element {
    width: calc(100% - 2rem);
}

В этом примере функция calc() используется для установки ширины элемента в размере 100% от содержащего его родительского элемента, а затем удаления 2rem из этого вычисленного значения.

:root {
  --root-height: 5rem;
}

.my-element {
  width: calc(calc(10% + 2rem) * 2);
  height: calc(var(--root-height) * 3);
}

Функция calc() может быть вложена в другую функцию calc() . Вы также можете передавать пользовательские свойства в функцию var() как часть выражения.

min() и max()

Функция min() возвращает наименьшее вычисленное значение одного или нескольких переданных аргументов. Функция max() делает противоположное: получает наибольшее значение одного или нескольких переданных аргументов.

.my-element {
  width: min(20vw, 30rem);
  height: max(20vh, 20rem);
}

В этом примере ширина должна быть наименьшим значением между 20vw — что составляет 20% от ширины области просмотра — и 30rem . Высота должна быть наибольшим значением между 20vh — что составляет 20% от высоты области просмотра — и 20rem .

clamp()

Функция clamp() принимает три аргумента: минимальный размер, идеальный размер и максимальный.

h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3rem);
}

В этом примере font-size будет жидким в зависимости от ширины области просмотра. Единица vw добавляется к единице rem для облегчения масштабирования экрана, поскольку независимо от уровня масштабирования единица vw будет иметь тот же размер. Умножение на единицу rem — на основе размера корневого шрифта — предоставляет функции clamp() относительную точку расчета.

Подробнее о функциях min() , max() и clamp () можно узнать в этой статье, посвященной этим функциям .

Тригонометрические функции

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

Дополнительную информацию и примеры можно найти в нашей статье о тригонометрических функциях .

sin() , cos() и tan()

Функции sin() , cos() и tan() принимают аргумент угла и возвращают синус, косинус и тангенс соответственно. Функции sin() и cos() возвращают число от -1 до 1 . Функция tan() возвращает число от -Infinity до +Infinity . Аргумент угла может быть любой поддерживаемой единицей измерения угла.

:root {
  --sine-degrees: sin(45deg);     /* returns 0.7071 */
  --sine-radians: sin(0.7853rad); /* returns 0.7071 */
}

В предыдущем примере --sine-degrees и --sine-radians имеют одинаковое значение (в данном случае 0.7071 ).

В предыдущем примере функции sin() и cos() используются для создания колебательных анимаций по осям x и y путем умножения результата на указанный радиус. Использование обеих функций одновременно позволяет получить анимацию вращения. Мы используем пользовательское свойство --angle для плавной анимации угла для всех вызовов функций.

asin() , acos() и atan()

Функции asin() , acos() и atan() являются обратными функциям sin() , cos() и tan() , принимающими число в качестве аргумента и возвращающими значение угла между -90deg и 90deg . Функции asin() и acos() принимают число между -1 и 1 тогда как функция atan() принимает число между -Infinity и +Infinity .

:root {
  --degrees: asin(0.7071); /* returns 45deg */
}

atan2()

Функция atan2() принимает два аргумента, представляющих точку относительно начала координат, и возвращает угол, представляющий направление к этой точке. Вы можете использовать это для поворота элементов в направлении определенной точки. Аргументы могут быть числами, единицами размера или процентами, но оба аргумента должны быть одного типа.

В приведенном выше примере функция atan2() используется для определения угла между центром области просмотра и текущим положением мыши. Обратите внимание, что значение y является первым аргументом, а значение x — вторым. Затем угол используется для позиционирования «зрачков» относительно центра «глаз», чтобы они следовали за мышью.

hypot()

Функция hypot() принимает два аргумента длины, представляющих стороны прямоугольного треугольника, и возвращает длину гипотенузы. Вы можете использовать это как сокращение для вычисления этого с помощью экспоненциальных функций. Оба аргумента должны быть одного типа единиц, и hypot() вернет тот же тип.

:root {
  --use-ems: hypot(3em, 4em);   /* returns 5em */
  --use-px:  hypot(30px, 40px); /* returns 50px */
}

Экспоненциальные функции

pow() и exp()

Функция pow() принимает два числовых аргумента, основание и показатель степени, и возводит основание в степень показателя степени. Оба аргумента должны быть числами без единиц измерения. Функция exp() принимает один аргумент и эквивалентна вызову функции pow() с основанием e .

.my-element {
  width: calc(10px * pow(4, 2); /* 10px * (4 * 4) == 160px */
}

sqrt()

Функция sqrt() принимает числовой аргумент и возвращает его квадратный корень. Аргумент не может включать единицы измерения.

:root {
  --root: sqrt(25); /* returns 5 */
}

log()

Функция log() возвращает логарифм числового значения. Если передан один аргумент, она вернет натуральный логарифм . Если передан второй аргумент, функция log() будет использовать второй аргумент в качестве основания для логарифма.

:root {
  --log2: log(16, 2); /* returns 4      */
  --logn: log(16);    /* returns 2.7725 */
}

Функции, связанные со знаками

abs()

Функция abs() принимает числовой аргумент и возвращает абсолютное (положительное) значение аргумента.

.my-element {
  color: rgba(0, 0, 0, abs(-1));
}

В предыдущем примере значение alpha , равное -1 , приведет к прозрачному тексту, но функция abs() возвращает абсолютное значение 1 , что приводит к полностью непрозрачному тексту.

sign()

Функция sign() принимает числовой аргумент и возвращает знак аргумента. Положительные значения возвращают 1 , а отрицательные значения возвращают -1 . Нулевые значения возвращают 0 .

.my-element {
  top: calc(50vh + 25vh * sign(var(--value));
}

В предыдущих примерах, если --value положительно, верхнее значение будет 75vh . Если оно отрицательно, верхнее значение будет 25vh . Если оно равно нулю, верхнее значение будет 50vh .

Формы

Свойства CSS clip-path , offset-path и shape-outside используют фигуры для визуального ограничения вашего блока или придания формы обтекаемому содержимому.

Существуют функции формы, которые можно использовать с обоими этими свойствами. Простые формы, такие как circle() , ellipse() и inset() принимают аргументы конфигурации для определения их размера. Более сложные формы, такие как polygon() принимают разделенные запятыми пары значений осей X и Y для создания пользовательских форм.

.circle {
  clip-path: circle(50%);
}

.polygon {
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

Как и polygon() , есть также функция path() , которая принимает правило заливки SVG в качестве аргумента. Это позволяет создавать очень сложные фигуры, которые можно рисовать в графическом инструменте, таком как Illustrator или Inkscape, а затем копировать в CSS.

Превращает

Наконец, в этом обзоре функций CSS есть функции преобразования, которые наклоняют, изменяют размер и даже изменяют глубину элемента. Все следующие функции используются со свойством transform .

Вращение

Вы можете вращать элемент с помощью функции rotate() , которая вращает элемент вокруг его центральной оси. Вы также можете использовать функции rotateX() , rotateY() и rotateZ() для вращения элемента вокруг определенной оси. Вы можете передавать единицы измерения градуса, поворота и радиана для определения уровня вращения.

.my-element {
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}

Функция rotate3d() принимает четыре аргумента.

Первые 3 аргумента — это числа, которые определяют координаты X, Y и Z. Четвертый аргумент — это поворот, который, как и другие функции поворота, принимает градусы, углы и повороты.

.my-element {
  transform: rotate3d(1, 1, 1, 10deg);
}

Вы можете использовать индивидуальное свойство rotate для вращения элемента. При использовании вне свойства transform вы можете выполнять переход отдельно от других преобразований. Оно принимает значения, аналогичные функциям rotate.

Шкала

Вы можете изменить масштабирование элемента с помощью функции transform и scale() . Функция принимает одно или два числа в качестве значения, которое определяет положительное или отрицательное масштабирование. Если вы определяете только один числовой аргумент, обе оси X и Y будут масштабироваться одинаково, а определение обеих является сокращением для X и Y. Так же, как и rotate() , существуют функции scaleX() , scaleY() и scaleZ() для масштабирования элемента по определенной оси.

.my-element {
  transform: scaleX(1.2) scaleY(1.2);
}

Также, как и функция rotate , есть функция scale3d() . Она похожа на scale() , но принимает три аргумента: коэффициент масштабирования X, Y и Z.

Вы можете использовать индивидуальное свойство scale для масштабирования элемента. При использовании вне свойства transform вы можете выполнять переход отдельно от других преобразований.

Переводить

Функции translate() перемещают элемент, сохраняя его положение в потоке документа. Они принимают значения длины и процента в качестве аргументов. Функция translate() перемещает элемент по оси X, если определен один аргумент, и перемещает элемент по осям X и Y, если определены оба аргумента.

.my-element {
  transform: translatex(40px) translatey(25px);
}

Вы можете — как и с другими функциями преобразования — использовать определенные функции для определенной оси, используя translateX , translateY и translateZ . Вы также можете использовать translate3d , который позволяет вам определять перемещение X, Y и Z в одной функции.

Подобно scale и rotate , вы также можете использовать свойство translate вне свойства transform для перемещения элемента.

.my-element{
  translate: 20px 30px;
}

Перекос

Вы можете наклонить элемент, используя функции skew() , которые принимают углы в качестве аргументов. Функция skew() работает очень похоже на translate() . Если вы определяете только один аргумент, он будет влиять только на ось X, а если вы определяете оба, он будет влиять на оси X и Y. Вы также можете использовать skewX и skewY , чтобы влиять на каждую ось независимо.

.my-element {
  transform: skew(10deg);
}

Перспектива

Наконец, вы можете использовать свойство perspective , которое является частью семейства свойств преобразования, чтобы изменить расстояние между пользователем и плоскостью Z. Это создает ощущение расстояния и может использоваться для создания глубины резкости в ваших проектах.

В этом примере Дэвида Десандро из его очень полезной статьи показано, как его можно использовать вместе со свойствами perspective-origin-x и perspective-origin-y для создания по-настоящему трехмерных эффектов.

Анимационные функции, градиенты и фильтры

CSS также предоставляет функции, которые помогают вам анимировать элементы, применять к ним градиенты и использовать графические фильтры для управления их внешним видом. Чтобы сделать этот модуль максимально кратким, они рассматриваются в связанных модулях. Все они следуют структуре, аналогичной функциям, продемонстрированным в этом модуле.

Проверьте свое понимание

Проверьте свои знания функций