➗CSS и математика

Математические операции в CSS позволяют динамически вычислять значения свойств, что делает стилизацию более гибкой и мощной. Также упрощает вычисления при работе с разными единицами измерения(например, px + vh).

Рассмотрим основные операции:

🟢calc() - позволяет выполнять базовые арифметические операции прямо в значениях свойств `width: calc(100% - 80px); margin-left: calc(50vw - 200px); font-size: calc(1rem * 1.5);

🟢clamp() - ограничивает значение между минимумом и максимумом clamp(минимум, предпочтительное_значение, максимум) `font-size: clamp(1rem, 2.5vw, 2rem); width: clamp(300px, 50%, 800px);

🟢min(), max() - функции сравнения, которые выбирают наименьшее или наибольшее значение из списка параметров `width: min(100px, 50%, 200px); width: max(100px, 50%, 200px);

🟢round() - функция округления, которая позволяет округлять значения с заданной точностью `width: round(down, 18.9%, 5%); /* = 15% / max-width: round(up, 347px, 20px); / = 340px */

🟢sin(), cos(), tan() - это относительно новые математические функции, которые открывают широкие возможности для создания сложных анимаций, форм и визуальных эффектов `transform: translateY(calc(sin(30deg) * 50px)); /* = 25px / width: calc(cos(60deg) * 200px); / = 100px / height: calc(tan(45deg) * 100px); / = 100px */

И небольшой пример того, как можно использовать все эти функции - Мини солнечная система (JS Free, 100% CSS) ✔️Не забываем, что функции можно вкладывать друг в друга для сложных выражений: `--result: calc(sqrt(abs(var(--x))) + cos(var(--angle)));

Конечно, это не весь список - есть и другие, но они используются реже 🤓``````