24 CSS функції, які змінять ваш код назавжди

calc() — динамічні розрахунки прямо в CSS

Функція calc() дозволяє виконувати математичні операції (+, -, *, /) у значеннях CSS. Найпотужніше — поєднання різних одиниць виміру в одному виразі.

Наприклад, ви хочете, щоб блок займав усю ширину мінус фіксований відступ — без JavaScript, прямо в CSS.

.container {
/* Повна ширина мінус бокові відступи */
width: calc(100% - 50px);

/* Можна вкладати calc всередині calc */
padding: calc(var(--base) * 2);
    }

min() — обирає найменше значення

Повертає найменше зі вказаних значень. Ідеально для адаптивних розмірів: ширина буде або 50% екрану, або 300px — залежно від того, що менше.

.card {
  /* Ніколи не перевищить 300px, але може бути менше */
  width: min(50%, 300px);
}

max() — обирає найбільше значення

Протилежна до min() — повертає найбільше зі значень. Корисно для встановлення мінімальних гарантованих розмірів.

.hero {
  /* Завжди не менше 300px, може бути більше */
  width: max(50%, 300px);
}

clamp() — обмежує значення між мінімумом і максимумом

clamp(мін, ідеальне, макс) — це тріо в одній функції. Значення плаває між мінімумом і максимумом, але ніколи не виходить за межі. Революційна функція для адаптивної типографіки.

h1 {
  /* мін: 12px, ідеал: 2vw від ширини екрану, макс: 24px */
  font-size: clamp(12px, 2vw, 24px);
  
  /* Адаптивний відступ без медіазапитів */
  padding: clamp(16px, 4vw, 48px);
}

rgba() — колір із прозорістю

RGB кольори з альфа-каналом (прозорість від 0 до 1). Параметри: червоний (0–255), зелений (0–255), синій (0–255), прозорість (0–1).

На відміну від opacity, rgba() впливає лише на колір елемента, не зачіпаючи дочірні елементи.

.overlay {
  /* Червоний на 50% прозорий */
  background-color: rgba(255, 0, 0, 0.5);
  
  /* Темна напівпрозора підложка */
  background: rgba(0, 0, 0, 0.7);
}

hsl() — колір через відтінок, насиченість і яскравість

HSL — найінтуїтивніша колірна модель для дизайнерів. Відтінок (0–360°) — позиція на колірному колі, насиченість (0–100%) — інтенсивність, яскравість (0–100%) — від чорного до білого.

Ідеально для генерації тематичних палітр: змінюйте лише відтінок, залишаючи решту параметрів стабільними.

.text-green {
  /* 120° = зелений, 100% насиченість, 50% яскравість */
  color: hsl(120, 100%, 50%);
}

.text-muted {
  /* Той самий відтінок, але приглушений */
  color: hsl(120, 30%, 60%);
}

var() — CSS-змінні для переиспользуваних значень

Кастомні властивості (CSS-змінні) — одна з найважливіших сучасних можливостей CSS. Оголошуйте значення один раз, використовуйте скрізь. Зміна однієї змінної оновлює весь сайт.

Змінні каскадуються і успадковуються, що робить їх ідеальними для тем оформлення.

/* Оголошення змінних на рівні :root */
:root {
  --primary-color: blue;
  --spacing-md: 16px;
  --border-radius: 8px;
}

.button {
  color: var(--primary-color);
  padding: var(--spacing-md);
  
  /* Запасне значення якщо змінна не визначена */
  border-radius: var(--border-radius, 4px);
}

url() — підключення зовнішніх ресурсів

Посилання на зовнішні файли: зображення, шрифти, SVG. Використовується для фонових зображень, курсорів та кастомних шрифтів.

.hero {
  background-image: url('image.jpg');
  
  /* Inline SVG як фон */
  background-image: url("data:image/svg+xml,...");
  
  /* Кастомний курсор */
  cursor: url('cursor.png'), auto;
}

attr() — читає атрибути HTML в CSS

Дозволяє отримати значення HTML-атрибута і використати його в CSS — зазвичай через псевдоелемент ::before або ::after. Основне застосування — тултипи та підказки без JavaScript.

/* HTML: <button data-tooltip="Зберегти">💾</button> */

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  background: #333;
  color: white;
  padding: 4px 8px;
}

rotate() — обертання елемента

Обертає елемент навколо центру (або заданої точки) на вказаний кут. Підтримує deg, rad, turn. Один оберт = 360deg = 1turn.

.icon {
  transform: rotate(45deg);
}

.icon:hover {
  /* Плавне обертання при hover */
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

translate() — переміщення по осях X та Y

Зміщує елемент відносно його поточного положення. Не впливає на потік документа — інші елементи не реагують на переміщення. Набагато ефективніше за top/left для анімацій (GPU-прискорення).

.card {
  /* Зміщення: 20px вправо, 10px вниз */
  transform: translate(20px, 10px);
}

.centered {
  /* Класичне центрування абсолютного елемента */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

scale() — масштабування елемента

Масштабує елемент відносно його центру. Значення 1 = оригінальний розмір, 1.5 = в 1.5 рази більше, 0.5 = вдвічі менше. Можна задати окремі масштаби для X та Y: scale(scaleX, scaleY).

.button:hover {
  /* Збільшення при наведенні */
  transform: scale(1.05);
  transition: transform 0.2s ease;
}

.squish {
  /* Тільки по горизонталі */
  transform: scale(2, 0.5);
}

skew() — нахил елемента по осях

Нахиляє (скошує) елемент по осі X та/або Y. Корисно для декоративних розділювачів секцій і динамічних фонових фігур.

.diagonal-section {
  /* Нахил 20° по X, 10° по Y */
  transform: skew(20deg, 10deg);
}

.parallelogram {
  /* Тільки горизонтальний нахил */
  transform: skewX(-15deg);
}

perspective() — 3D-перспектива для об'ємного вигляду

Задає відстань від спостерігача до площини Z=0. Менше значення = сильніший 3D-ефект, більше = плоскіше. Обов'язково для будь-якої 3D-трансформації.

.card-3d {
  /* 500px від спостерігача + поворот по Y */
  transform: perspective(500px) rotateY(45deg);
}

.card-3d:hover {
  transform: perspective(500px) rotateY(0deg);
  transition: transform 0.6s ease;
}

matrix() — повний контроль 2D-трансформації

Комбінує всі 2D-трансформації в одній матриці з 6 параметрів: matrix(a, b, c, d, tx, ty). Браузери внутрішньо перетворюють rotate/scale/skew саме в матрицю. Для ручного використання рідко потрібно — але корисно розуміти принцип.

.element {
  /* Зміщення на 30px по X і Y (без rotate/scale) */
  transform: matrix(1, 0, 0, 1, 30, 30);
  
  /* Те саме, що translate(30px, 30px) */
}

cubic-bezier() — кастомна крива прискорення

Визначає власну криву Безьє для timing функції переходу. Чотири параметри (P1x, P1y, P2x, P2y) описують контрольні точки кривої. Значення Y виходять за межі 0–1 для "пружинних" ефектів.

Стандартні ease/linear/ease-in — це теж cubic-bezier під капотом.

.spring-button {
  /* "Пружинний" ефект — виходить за 1 по Y */
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.smooth-in {
  /* Починає повільно, прискорюється */
  transition: transform 0.4s cubic-bezier(0.4, 0, 1, 1);
}

steps() — переривчаста (покрокова) анімація

Розбиває анімацію на дискретні кроки замість плавного переходу. Ідеально для піксель-арту, анімацій спрайтів та ефекту друкарської машинки.

.typewriter {
  /* Ефект друкарської машинки: 20 символів */
  animation: typing 2s steps(20) forwards;
}

.sprite {
  /* 4 кадри спрайта за 1 секунду */
  transition: transform 1s steps(4);
}

blur() — розмиття елемента

Застосовує Гаусове розмиття. Популярний для ефекту "скла" (glassmorphism) через backdrop-filter: blur() — розмиття того, що знаходиться за елементом.

.blurred {
  filter: blur(5px);
}

.glass-card {
  /* Розмиття фону за елементом (glassmorphism) */
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.15);
}

brightness() — яскравість зображення або елемента

100% = без змін, більше — яскравіше, менше — темніше. 0% = повністю чорний. Чудово для hover-ефектів на картках і зображеннях.

img:hover {
  /* Освітлення при наведенні */
  filter: brightness(120%);
  transition: filter 0.3s ease;
}

.dimmed {
  filter: brightness(50%);
}

contrast() — контрастність кольорів

100% = без змін, вище — різкіший контраст між темними і світлими областями, нижче — розмитіша різниця. 0% = повністю сірий.

.high-contrast {
  /* Подвоєний контраст */
  filter: contrast(200%);
}

.faded {
  /* Вицвілий вигляд */
  filter: contrast(60%);
}

grayscale() — перетворення на відтінки сірого

Видаляє насиченість кольору. 100% = повністю чорно-білий, 0% = без змін. Часто використовується для неактивних (disabled) елементів або лого партнерів.

.partner-logo {
  /* Сірий за замовчуванням */
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.partner-logo:hover {
  /* Кольоровий при наведенні */
  filter: grayscale(0%);
}

invert() — інвертування кольорів

Інвертує всі кольори: чорний стає білим і навпаки. 100% = повна інверсія. Цікаво: invert(100%) на чорно-білому логотипі робить його придатним для обох тем без зміни вихідного файлу.

.dark-theme img {
  /* Логотип для темної теми без нового файлу */
  filter: invert(100%);
}

.negative {
  filter: invert(100%) hue-rotate(180deg);
}

opacity() — прозорість як фільтр

filter: opacity() і властивість opacity дають схожий результат, але версія через filter може бути апаратно прискорена на деяких браузерах. Для звичайних випадків краще використовувати властивість opacity.

.semi-transparent {
  /* Через filter */
  filter: opacity(50%);
  
  /* Або простіше через властивість */
  opacity: 0.5;
}

saturate() — насиченість кольорів

Регулює насиченість: 100% = без змін, 300% = яскраві кричущі кольори, 0% = сірий (аналогічно grayscale). Відмінно для ефектів "vivid" при наведенні на фото.

.photo {
  /* Приглушені кольори за замовчуванням */
  filter: saturate(70%);
  transition: filter 0.4s ease;
}

.photo:hover {
  /* "Живі" кольори при наведенні */
  filter: saturate(200%);
}