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="ru">
<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.