CSS гайд

Живий гайд по градієнтам, тіням та анімаціям

Сторінка з документацією, готовими прикладами та живими прев’ю, щоб ви бачили, як працюють градієнти, стекинг тіней та keyframes. Є швидкі переходи у підрозділи для кожного типу ефектів.

Гайд по градієнтах Гайд по тінях Гайд по анімаціях

Інтерактивні прикладиCSS для копіюванняЧекліст + практика

Підсторінки

Теми з живими демо

Кожна підсторінка — стислий how-to: чекліст, візуальні приклади та мінімум коду для копіювання у CSS-Zone.

колір + глибина

Градієнти

Лінійні, радіальні та конічні мікси з порадами по стопам.

Багатошаровий мікс

Палітра через баланс світла/тіні
Сітка стопів з прозорістю
Два шари фону для контрасту

глибина

Тіні

Мульті-тіньові стаки без бруду.

Шарована тінь

М’яка тінь + border glow
Розділення hover/active
Glass-friendly пресети

motion

Анімації

Keyframes з easing, затримками та stagger нотатками.

Мікро рух

Хуки затримки
Стилі marquee та лоадерів
Кращі криві прискорення

Базові речі

Міні-документація CSS

Короткі нагадування для чистих стилів у проді.

Логічні властивості (margin-inline, padding-block) для спрощення RTL.
Резервуйте місце під async контент (min-height або aspect-ratio).
Використовуйте gap у grid/flex замість margin stack.

Контраст тексту 4.5:1 і більше.
Градієнти + solid overlay для тексту.
Тестуйте обидві теми перед релізом.

Анімуйте transform/opacity, не чіпайте розміри/тіні.
Обмежуйте тривалість циклів (лоадери <1.4c).
will-change — тільки на реально анімованих елементах.

Практика

Міні‑плейбук

Готові патерни — використовуйте як є або швидко змінюйте в генераторі поруч.

Градієнтна картка

Контрастний фон + м’який мульти-shadow і глибина.

background: linear-gradient(135deg, #6ee7ff, #7c3aed);
box-shadow: 0 20px 60px rgba(124, 58, 237, 0.28),
            0 8px 24px rgba(10, 10, 10, 0.25);

animate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadowanimate • gradient • shadow

Marquee стрічка

TranslateX з безшовним повтором і регульованою швидкістю.

.marquee {
  display: flex;
  gap: 2rem;
  animation: ticker 14s linear infinite;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

CTA pulse

Два шари (scale + blur) для м’якого акценту.

@keyframes pulse {
  0% { transform: scale(1); opacity: .9; }
  70% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}
.pulse::after { animation-delay: .6s; }