Backgrounds, Borders і Shadows

З поверненням.

У попередньому уроці ти вивчив responsive design.

Твій layout тепер розуміє phones.

Дуже добре.

Сьогодні ми зробимо сторінки більш polished.

Не overdecorated.

Не в стилі: “я відкрив 47 ефектів CSS і використав усі до сніданку.”

Polished.

Ми будемо працювати з:

backgrounds;
borders;
border radius;
shadows;
cards;
buttons;
visual hierarchy.

Це маленькі деталі, які роблять page завершеною.

Без них website може працювати ідеально, але виглядати так, ніби його створювали під час відключення світла.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

як використовувати background-color;
як використовувати background-image;
як створювати gradients;
як використовувати borders;
як заокруглювати кути через border-radius;
як використовувати box-shadow;
як стилізувати cards і buttons;
як не перетворити сторінку на новорічну ялинку з CSS.

Чому Visual Polish Важливий

CSS — це не тільки layout.

Layout вирішує, де будуть елементи.

Visual polish вирішує, як вони відчуваються.

Проста card працює.

Polished card виглядає intentional.

Приклад:

.card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

Ця проста комбінація може зробити section сучасною і чистою.

Але будь обережний.

Занадто багато shadow і borders можуть зробити сторінку схожою на стопку пластикових підносів, які зависли в повітрі.

CSS дає силу.

Використовуй її як доросла людина.

Хоча б іноді.

Створи Проєкт

Створи папку для цього уроку:

mkdir css-lesson8
cd css-lesson8
touch index.html
touch style.css

Ти маєш отримати:

css-lesson8/
  index.html
  style.css

Відкрий папку у своєму editor.

Ми побудуємо маленьку services page з cards і hero section.

Це практично.

Ти можеш використати цей pattern для:

web services;
course cards;
portfolio projects;
pricing sections;
landing pages.

Тобто всюди, де website має перестати виглядати як raw HTML у шкарпетках.

Напиши HTML

Відкрий index.html і додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Backgrounds, Borders і Shadows</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <nav class="navbar">
      <h1 class="logo">PolishCSS</h1>

      <div class="nav-links">
        <a href="#">Головна</a>
        <a href="#">Послуги</a>
        <a href="#">Проєкти</a>
        <a href="#">Контакт</a>
      </div>
    </nav>

    <section class="hero-content">
      <p class="eyebrow">CSS Visual Design</p>
      <h2>Зроби Свій Layout Завершеним</h2>
      <p>
        Backgrounds, borders і shadows допомагають сторінці виглядати чистіше, структурованіше і професійніше.
      </p>
      <a href="#" class="button">Подивитися Стилі</a>
    </section>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Маленькі Деталі, Велика Різниця</h2>
      <p>
        Хороші visual details ведуть user. Вони розділяють content, створюють depth і роблять page легшою для розуміння.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Backgrounds</h2>
        <p>Використовуй background colors, images і gradients, щоб створити атмосферу.</p>
      </article>

      <article class="card featured">
        <h2>Borders</h2>
        <p>Використовуй borders, щоб розділяти content і підкреслювати важливі areas.</p>
      </article>

      <article class="card">
        <h2>Shadows</h2>
        <p>Використовуй shadows обережно, щоб створити depth, але не зробити так, ніби все зараз полетить у космос.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Створено під час вивчення backgrounds, borders і shadows.</p>
  </footer>
</body>
</html>

Це дає нам:

hero section;
navigation;
hero text;
button;
intro card;
три content cards;
footer.

Тепер ми можемо зробити це менш схожим на skeleton і більш схожим на real webpage.

Без неповаги до skeletons.

Вони роблять важливу роботу.

Почни з Базового CSS

Відкрий style.css і додай:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

Це дає нам clean starting point.

Page має:

predictable sizing;
no default body margin;
simple font;
light background;
clean links.

Тепер можемо додавати visual polish.

Повільно.

Як приправляти суп.

А не як висипати всю банку солі в каструлю.

Background Color

Property background-color встановлює фон елемента.

Приклад:

body {
  background-color: #f3f4f6;
}

Можна використовувати його на sections:

.hero {
  background-color: #111827;
}

Додай це:

.hero {
  background-color: #111827;
  color: white;
}

Тепер hero має темний background.

Це створює contrast.

Hero починає виглядати як сильна opening section.

Хороша hero має казати:

“Welcome.”

А не:

“HTML випадково поставив мене тут.”

Background Gradients

CSS може створювати gradients без images.

Приклад:

background: linear-gradient(135deg, #111827, #1e3a8a);

Додай це до .hero:

.hero {
  background: linear-gradient(135deg, #111827, #1e3a8a);
  color: white;
}

Тепер hero background переходить від dark gray до blue.

Subtle gradients можуть виглядати modern.

Але не переборщи.

Gradient має whisper.

А не приходити в sunglasses і кричати: “I am design!”

Стилізуй Navbar

Додай:

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Тепер navigation aligned.

Logo ліворуч.

Links праворуч.

Це вже знайоме з попередніх уроків.

CSS не завжди новий chaos.

Іноді це старий chaos у кращій куртці.

Стилізуй Hero Content

Додай:

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #dbeafe;
  font-size: 20px;
  line-height: 1.7;
}

Hero тепер має:

centered content;
large heading;
small uppercase label;
readable paragraph.

letter-spacing дає label чистіший look.

Використовуй це обережно.

Занадто великий letter-spacing робить words такими, ніби вони повільно тікають одне від одного.

Borders

Borders створюють visible separation.

Приклад:

.card {
  border: 2px solid #e5e7eb;
}

Border має:

width;
style;
color.

Приклад:

border: 2px solid #e5e7eb;

Можна використовувати borders на cards, buttons, sections і images.

Borders корисні.

Але занадто багато borders робить design heavy.

Border має допомагати user зрозуміти structure.

А не робити page схожою на spreadsheet prison.

Border Radius

border-radius заокруглює кути.

Приклад:

.card {
  border-radius: 18px;
}

Додай styles для page і cards:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
}

Тепер cards виглядають soft і modern.

Sharp corners не є помилкою.

Але rounded corners часто виглядають friendly.

Ніби page випила каву і вирішила не бути aggressive.

Box Shadow

Property box-shadow додає shadow позаду element.

Приклад:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

Values означають:

horizontal offset
vertical offset
blur
color

Приклад:

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

Це означає:

no horizontal movement;
shadow moves 10px down;
shadow blur is 25px;
black color with low opacity.

Додай:

.intro-card,
.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

Тепер cards мають subtle depth.

Subtle — ключове слово.

Shadow має підтримувати design.

А не виглядати так, ніби card намагається втекти від земної гравітації.

Featured Card

Зробимо одну card особливою.

Додай:

.featured {
  border-color: #2563eb;
  background-color: #eff6ff;
}

Це дає featured card:

blue border;
light blue background.

Просто.

Чітко.

Без крику.

Featured element має бути noticeable.

А не поводитися так, ніби він виграв конкурс neon costumes.

Button Styling

Тепер стилізуй button.

Додай:

.button {
  display: inline-block;
  background-color: white;
  color: #1e3a8a;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}

.button:hover {
  transform: translateY(-2px);
}

Цей button має:

white background;
blue text;
rounded shape;
shadow;
small hover movement.

Hover effects можуть зробити buttons більш interactive.

Але не змушуй їх стрибати, як нервові жаби.

Малого movement достатньо.

Додай Transitions

Hover movement буде виглядати краще з transition.

Додай:

.button,
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.1);
}

Тепер cards злегка піднімаються при hover.

Це дає приємне interactive feel.

Знову: subtle.

Якщо кожна card драматично стрибає, сторінка починає виглядати як trampoline park.

Весело для дітей.

Не завжди ідеально для web design.

Повний CSS

Твій style.css має виглядати так:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.hero {
  background: linear-gradient(135deg, #111827, #1e3a8a);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #dbeafe;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: white;
  color: #1e3a8a;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.intro-card h2,
.card h2 {
  margin-top: 0;
}

.intro-card p,
.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.1);
}

.featured {
  border-color: #2563eb;
  background-color: #eff6ff;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .hero-content h2 {
    font-size: 42px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero-content {
    padding: 56px 20px 72px;
    text-align: left;
  }

  .hero-content h2 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro-card,
  .card {
    padding: 24px;
  }
}

Збережи файл.

Онови browser.

Тепер ти маєш побачити:

gradient hero;
styled navigation;
rounded cards;
subtle shadows;
featured card;
polished button;
hover effects;
responsive layout.

Page має виглядати більш complete.

Не тому, що ми додали random decoration.

А тому, що ми використали visual details з purpose.

Це різниця між design і киданням CSS confetti.

Типові Помилки

Занадто Багато Shadow

Погано:

.card {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

Це занадто strong для normal card.

Виглядає dramatic.

Too dramatic.

Ніби card має secret villain identity.

Краще:

.card {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

Small shadows usually enough.

Занадто Багато Borders

Borders корисні, але не кожному element потрібен border.

Якщо кожна section, card, image, button, heading і paragraph має border, page стає noisy.

Використовуй borders, щоб пояснювати structure.

А не щоб закривати кожен element у клітку, як маленьку digital animal.

Поганий Contrast

Не став low-contrast text на colorful backgrounds.

Погано:

.hero p {
  color: #9ca3af;
}

На dark blue background це може бути too weak.

Краще:

.hero p {
  color: #dbeafe;
}

Readable first.

Pretty second.

Pretty but unreadable — це просто decorative confusion.

Практика

Створи services section з трьома cards.

Кожна card має мати:

title;
short paragraph;
border;
border radius;
subtle shadow;
hover effect.

Зроби одну card featured.

Використай:

background-color;
border;
border-radius;
box-shadow;
transition;
transform.

Тримай design clean.

Не декоруй все як birthday cake, який свариться з rainbow.

Міні-Завдання

Створи pricing section з трьома plans:

Basic;
Standard;
Premium.

Використай:

white card backgrounds;
subtle shadows;
rounded corners;
blue border для Premium;
button inside each card;
hover effect на cards і buttons.

Зроби її responsive:

three columns на desktop;
two columns на tablet;
one column на phone.

Це real landing page pattern.

Ти можеш використати його для своїх services.

Так, це корисно.

CSS нарешті платить оренду.

Підсумок

Сьогодні ти дізнався, що:

background-color встановлює element backgrounds;
gradients можуть створювати modern hero sections;
borders допомагають розділяти і highlight content;
border-radius робить corners rounded;
box-shadow створює depth;
shadows зазвичай мають бути subtle;
hover effects роблять elements interactive;
transitions роблять changes smoother;
visual polish має підтримувати usability;
decoration без purpose стає noise.

Good design — це не додати більше.

Це додати правильні речі.

Маленький shadow.

Clean border.

Good background.

Enough spacing.

Часто цього достатньо.

CSS не має кричати.

Іноді йому просто треба зачесати волосся.

Наступний Урок

У наступному уроці ми вивчимо transitions і simple animations.

Ми зробимо так, щоб elements рухалися smoothly.

Не як circus.

А як professional website with manners.