Сучасний CSS: нові можливості

1. Corner-shape: нові форми кутів

CSS-специфікація Corners Level 2 додає властивість corner-shape, яка змінює форму заокруглення кутів. Раніше border-radius давав лише кругле заокруглення, тепер з'являються нові варіанти.

Можливі значення

Синтаксис

.card-ticket {
  border-radius: 20px;
  corner-shape: scoop;
}

.badge {
  border-radius: 8px;
  corner-shape: bevel;
}

.app-icon {
  border-radius: 22%;
  corner-shape: squircle;
}

Різні форми для різних кутів

Можна задати різні форми для кожного кута окремо:

.creative-card {
  border-radius: 20px;
  corner-shape: scoop round bevel round;
  /* top-left top-right bottom-right bottom-left */
}

2. Сучасний синтаксис кольорів

CSS еволюціонує від старого синтаксису rgba() до нових, потужніших способів задавати кольори.

Новий синтаксис rgb / hsl (без ком)

Сучасний CSS дозволяє записувати кольори через пробіли замість ком, а прозорість — через /:

/* Старий синтаксис */
color: rgba(59, 130, 246, 0.5);

/* Новий синтаксис (без ком, без "a") */
color: rgb(59 130 246 / 0.5);
color: hsl(217 91% 60% / 0.5);

oklch — перцептивно рівномірний колірний простір

oklch() задає колір через:

• L (lightness) — яскравість від 0% (чорний) до 100% (білий)
• C (chroma) — насиченість (0 = сірий, 0.4+ = яскравий)
• H (hue) — тон у градусах (0 = рожевий, 90 = жовтий, 180 = блакитний, 270 = фіолетовий)

/* Синій із насиченістю 0.2 */
color: oklch(60% 0.2 250);

/* Напівпрозорий зелений */
color: oklch(70% 0.18 150 / 0.7);

Чому oklch краще за hsl?

В hsl два кольори з однаковим L можуть виглядати по-різному яскравими для ока (жовтий здається світлішим за синій). В oklch однакова яскравість виглядає однаково для будь-якого тону — це важливо для дизайн-систем і палітр.

Relative colors (відносні кольори)

Дозволяють створювати нові кольори на основі існуючих — змінюючи окремі компоненти:

:root {
  --brand: oklch(60% 0.2 250);
}

.card {
  /* Взяти --brand і зробити світлішим */
  background: oklch(from var(--brand) calc(l + 0.2) c h);

  /* Взяти --brand і зробити напівпрозорим */
  border-color: oklch(from var(--brand) l c h / 0.3);
}

Тут from var(--brand) бере вихідний колір, а l, c, h — його компоненти, які можна модифікувати через calc().

Практичне застосування

:root {
  --accent: oklch(55% 0.25 260);
}

.btn {
  background: var(--accent);
}

.btn:hover {
  /* Автоматично темніший відтінок */
  background: oklch(from var(--accent) calc(l - 0.1) c h);
}

.btn:active {
  /* Ще темніший */
  background: oklch(from var(--accent) calc(l - 0.2) c h);
}

3. Анімація підкреслення через градієнт

Анімоване підкреслення посилання — популярний ефект, який можна реалізувати через background-image замість text-decoration.

Ідея

• Підкреслення — це background-image у вигляді лінійного градієнта
• Розмір фону (background-size) змінюється від 0% до 100% при hover
• Перехід анімується через transition

Базовий приклад

.link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}

.link:hover {
  background-size: 100% 2px;
}

Як це працює

• linear-gradient(currentColor, currentColor) — «градієнт» з одного кольору (тобто суцільна лінія кольору тексту)
• background-position: 0% 100% — фон прив'язаний до нижнього лівого кута
• background-size: 0% 2px — ширина 0% (невидимо), висота 2px
• При hover ширина зростає до 100% — лінія «виїжджає» зліва направо

Варіації напрямку

/* Зліва направо (за замовчуванням) */
background-position: 0% 100%;

/* Справа наліво */
background-position: 100% 100%;

/* З центру в обидва боки */
background-position: 50% 100%;

Кольоровий градієнт замість суцільної лінії

.link-gradient {
  background-image: linear-gradient(90deg, #3b82f6, #8b5cf6);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size 0.3s ease;
}

.link-gradient:hover {
  background-size: 100% 2px;
}

4. Підсумкова таблиця