Функции

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);
}

Шкала

Вы можете изменить масштабирование элемента с помощью функции 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.

Переводить

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

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

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

Перекос

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

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

Перспектива

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

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

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

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

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

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