Фоны и эффекты

💡 Объяснение

Современный вид

Посмотри на любимые приложения: карточки со скруглёнными углами, мягкие тени, плавные переходы цветов. Такой вид создают всего несколько свойств CSS. Сегодня мы научимся ими пользоваться — и главное, пользоваться в меру.

Скругление: border-radius

• border-radius: 12px; — все углы скруглены радиусом 12 пикселей;
• border-radius: 50%; — у квадрата получится круг (так делают аватарки), у прямоугольника — овал;
• border-radius: 999px; — «таблетка»: кнопка с полностью круглыми краями;
• border-radius: 20px 20px 0 0; — скруглить только верхние углы (порядок: левый верхний, правый верхний, правый нижний, левый нижний).

Если внутри скруглённой карточки картинка «торчит» острыми углами, добавь карточке overflow: hidden; — всё лишнее обрежется по форме.

Тень: box-shadow

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

Значения по порядку:

1. сдвиг по X — вправо (отрицательное — влево);
2. сдвиг по Y — вниз (отрицательное — вверх);
3. размытие — чем больше, тем мягче тень;
4. (необязательно) растяжение — увеличивает тень во все стороны;
5. цвет — почти всегда полупрозрачный чёрный rgba(0,0,0,0.1–0.25).

Настоящие тени мягкие и падают вниз, потому что свет обычно сверху. Резкая чёрная тень 5px 5px 0 black выглядит как в 2000-х. Слово inset в начале делает тень внутренней — элемент выглядит «вдавленным».

Градиенты

Градиент — плавный переход одного цвета в другой. В CSS это разновидность фоновой картинки, поэтому пишется в background (не в background-color!):

• background: linear-gradient(#ff9a9e, #fad0c4); — сверху вниз;
• linear-gradient(90deg, …) — слева направо; 135deg — по диагонали;
• linear-gradient(to right, red, orange, yellow) — цветов может быть сколько угодно;
• radial-gradient(circle, #fff, #74b9ff) — круговой, от центра к краям.

Совет: красивые градиенты получаются из соседних цветов (розовый → персиковый, синий → фиолетовый). Красный → зелёный даёт грязный коричневый переход. Готовые варианты есть на сайтах-генераторах (например, uiGradients).

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

.banner {
  background-image: url("images/mountain.jpg");
  background-size: cover;       /* заполнить весь блок */
  background-position: center;  /* по центру */
}

• cover — картинка заполняет блок целиком, лишнее обрезается;
• contain — картинка видна целиком, могут остаться пустые края.

Чтобы текст читался на яркой фотографии, поверх кладут полупрозрачный градиент: background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url("photo.jpg");

Прозрачность

• opacity: 0.5; — полупрозрачным становится весь элемент вместе с текстом и детьми;
• rgba(…, 0.5) в цвете — прозрачен только этот цвет (например, фон), а текст остаётся чётким. Для фона обычно нужно именно это.

Собираем карточку с эффектом

.card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition: 0.3s;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
}

При наведении карточка «поднимается», а тень становится больше и мягче — как будто карточку приподняли над столом.

Правило меры

• Один стиль скругления на весь сайт (например, 12px у всех карточек и кнопок).
• Одна-две тени, а не у каждого элемента.
• Градиент — для акцента: баннер, кнопка. Не для всего подряд.

Частые ошибки

• Градиент в background-color — не работает.
• Картинка «торчит» из скруглённой карточки — нет overflow: hidden.
• opacity у карточки — текст стал бледным.
• Путь в url() считается от CSS-файла, а не от HTML-страницы.

Проверь себя

1. Как сделать круглую аватарку?
2. Что означают числа в box-shadow: 0 4px 10px rgba(0,0,0,.2)?
3. Чем opacity: 0.5 отличается от background: rgba(0,0,0,0.5)?