CSS - Math Functions: A Beginner's Guide

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

Основные арифметические функции

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

Функция calc()

Функция calc() — это швейцарский армейский нож среди математических функций CSS. Она позволяет вам выполнять базовые арифметические операции прямо в вашем CSS. Давайте рассмотрим пример:

.box {
width: calc(100% - 20px);
}

В этом примере мы устанавливаем ширину элемента с классом "box" в 100% ширины родительского элемента, минус 20 пикселей. Это super полезно, когда вы хотите создать адаптивные макеты, которые подстраиваются под разные размеры экранов.

Давайте разберем это:

• 100% представляет собой полную ширину родительского элемента.
• -20px вычитает 20 пикселей из этой ширины.
• Функция calc() выполняет это вычисление для нас.

Вы можете использовать все четыре базовые арифметические операции в calc(): сложение (+), вычитание (-), умножение (*) и деление (/). Вот еще один пример:

.column {
width: calc(33.33% - 10px);
margin-right: calc(10px * 2);
}

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

Функции сравнения

Теперь, когда мы освоили основы, перейдем к функциям сравнения. Они великолепны для создания адаптивных дизайнов, которые подстраиваются под разные условия.

Функция min()

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

.responsive-text {
font-size: min(5vw, 30px);
}

Это устанавливает размер шрифта в 5% ширины окна просмотра, но никогда не больше 30 пикселей. Это отличной способ сделать текст адаптивным, не позволяя ему стать слишком большим на больших экранах.

Функция max()

Как вы можете猜ать, max() делает相反ное min(). Она возвращает наибольшее значение из списка значений. Вот как вы можете использовать его:

.responsive-image {
width: max(300px, 50%);
}

Это обеспечивает, чтобы изображение всегда было не меньше 300 пикселей в ширину, даже если 50% его контейнера меньше этого.

Функция clamp()

Функция clamp() похожа на комбинацию min() и max(). Она принимает три значения: минимальное, предпочтительное и максимальное. Вот пример:

.responsive-element {
width: clamp(200px, 50%, 500px);
}

Это устанавливает ширину в 50% контейнера, но обеспечивает, чтобы она была nunca меньше 200px или больше 500px.

Продвинутые функции CSS Math

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

Функция abs()

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

.box {
transform: translateX(abs(var(--x)));
}

Это будет перемещать элемент горизонтально на основе значения переменной --x, всегда в положительном направлении, независимо от того, положительное или отрицательное --x.

Функция round()

Функция round() округляет число до ближайшего целого. Это может быть полезно для fix значений к сетке. Например:

.grid-item {
width: calc(round(100% / 3));
}

Это создаст макет из трех столбцов, где ширина каждого столбца округлена до ближайшего целого процента.

Функции ступенчатых значений

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

Функция mod()

Функция mod() возвращает остаток после деления. Это может быть использовано для создания повторяющихся рисунков. Вот пример:

.striped-background {
background-color: hsl(0, 0%, mod(var(--i) * 10, 100)%);
}

Это создаст полосатый фон, где светимость каждой полосы определяется ее индексом (--i), повторяясь каждые 10 полос.

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

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

Функции sin() и cos()

Функции sin() и cos() возвращают синус и косинус угла соответственно. Они часто используются в анимациях. Вот простой пример:

@keyframes orbit {
from {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}

.orbiting-element {
animation: orbit 5s linear infinite;
}

Это создает анимацию вращения, где элемент движется по кругу вокруг центральной точки.

Таблица справки по функциям

Вот quick таблица справки со всеми функциями CSS Math, которые мы рассмотрели:

Функция	Описание	Пример
calc()	Выполняет базовые арифметические операции	calc(100% - 20px)
min()	Возвращает наименьшее значение	min(5vw, 30px)
max()	Возвращает наибольшее значение	max(300px, 50%)
clamp()	Фиксирует значение между min и max	clamp(200px, 50%, 500px)
abs()	Возвращает абсолютное значение	abs(var(--x))
round()	Округляет до ближайшего целого	round(100% / 3)
mod()	Возвращает остаток после деления	mod(var(--i) * 10, 100)
sin()	Возвращает синус угла	sin(45deg)
cos()	Возвращает косинус угла	cos(45deg)

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

Credits: Image by storyset