🎨

Модуль 2. CSS и оформление

Занятие 20
Фоны и эффекты

Сегодня мы сделаем карточки как в современных приложениях: скруглённые углы, тени и градиенты.

👀

Сегодня сделаем вот такое

✨

Как в любимых приложениях

  • ⭕ Скруглённые углы — border-radius
  • 🌫 Мягкие тени — box-shadow
  • 🌈 Переходы цветов — linear-gradient

Три свойства — и сайт выглядит современно.

⭕

border-radius

  • 12px — мягкие углы
  • 50% — круг из квадрата
  • 999px — «таблетка»
  • overflow: hidden — обрезать содержимое по форме
<div class="s a">12px</div>
<div class="s b">50%</div>
<div class="s c">999px</div>
.s {
  display: inline-grid; place-items: center;
  width: 110px; height: 110px; margin: 8px;
  color: white; font: bold 18px sans-serif; background: #6c5ce7;
}
.a { border-radius: 12px; }
.b { border-radius: 50%; }
.c { width: 180px; height: 60px; border-radius: 999px; }
🌫

box-shadow — тень

0 8px 20px rgba(0,0,0,.15)

  1. сдвиг вправо
  2. сдвиг вниз
  3. размытие
  4. цвет (полупрозрачный)
<div class="c old">Резкая тень</div>
<div class="c soft">Мягкая тень</div>
body { background: #f5f6fa; padding: 20px; font-family: sans-serif; }
.c { display: inline-block; padding: 36px 24px; margin: 12px; background: white; border-radius: 16px; }
.old { box-shadow: 6px 6px 0 black; }
.soft { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
🌈

Градиенты

  • linear-gradient(135deg, a, b) — по диагонали
  • radial-gradient(circle, a, b) — от центра
  • Пишем в background, не в background-color
  • Соседние цвета — красиво 🎨
<div class="g one"></div>
<div class="g two"></div>
<div class="g three"></div>
.g { display: inline-block; width: 140px; height: 140px; margin: 8px; border-radius: 16px; }
.one { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.two { background: linear-gradient(90deg, #f6d365, #fda085); }
.three { background: radial-gradient(circle, #ffffff, #74b9ff); }
🏔

Картинка на фоне

  • background-image: url(…)
  • background-size: cover — на весь блок
  • Тёмный слой сверху — текст читается
<section class="banner">
  <h1>Покоряем горы</h1>
</section>
.banner {
  display: grid; place-items: center; height: 220px;
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url("/images/mountain.svg");
  background-size: cover;
  background-position: center;
  border-radius: 16px;
}
.banner h1 { color: white; font-family: sans-serif; }
🃏

Карточка с эффектом

  1. Градиентный фон страницы
  2. Белая карточка, скругление, тень
  3. Круглая аватарка
  4. Hover: приподнять + тень больше

Наведи на карточку 👉

<div class="card">
  <img class="avatar" src="/images/cat.svg" alt="Кот">
  <h3>Барсик</h3>
  <p>Главный тестировщик</p>
</div>
body { margin: 0; padding: 30px; font-family: sans-serif; background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.card {
  width: 200px; margin: auto; padding: 24px; text-align: center;
  background: white; border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15); transition: 0.3s;
}
.card:hover { transform: translateY(-8px); box-shadow: 0 16px 30px rgba(0,0,0,.25); }
.avatar { width: 90px; height: 90px; border-radius: 50%; background: #ffeaa7; }
⚖️

Правило меры

✅ Одно скругление на весь сайт
✅ 1–2 тени
✅ Градиент для акцента
❌ Радуга везде
❌ Тени у каждой буквы
❌ opacity у текста

Эффект заметен, когда он один.

🃏

Запомни!

  • border-radius: 16pxСкругление
  • box-shadow: 0 8px 20px rgba(0,0,0,.15)Тень
  • linear-gradient(135deg, a, b)Линейный градиент
  • background-size: coverФон на весь блок
  • opacity: 0.8Прозрачность
  • transform: translateY(-5px)Приподнять
⌨️

Практика: Карточки с эффектами

  1. Сделай фон страницы градиентом.
  2. Сделай три белые карточки со скруглёнными углами и мягкой тенью.
  3. Сделай круглую аватарку (border-radius: 50%).
  4. При наведении карточка приподнимается, а тень становится больше.

🚀 Со звёздочкой: Сделай анимацию: @keyframes, чтобы аватарка медленно покачивалась. Попробуй тёмную тему с помощью CSS-переменных.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Найди сайт-генератор градиентов и выбери градиент для своего проекта.