Тени и рамки

border, outline, border-radius, box-shadow, text-shadow и аккуратный декор без утяжеления интерфейса.

Уровень: начальный 10 разделов 1,5 часа

1. border во всех деталях

Рамка: border-style (обязательно простое значение), border-width, border-color. Рамки занимают место в модели блока, поэтому влияют на layout.

.frame { border: 2px solid #e2e8f0; }
input { border: 1px solid #94a3b8; border-radius: 6px; }

/* разные стороны */
.quote { border-left: 4px solid #2563eb; padding-left: 12px; }
.card { border-top: 0; border-bottom: 2px dashed #cbd5e1; }

border-width/color/style — отдельно;
типы: solid, dashed, dotted, double, none, hidden.

2. outline vs border

outline рисуется ВОКРУГ рамки и не влияет на размер/поток. Он невидим «невидимок», но идеален как видимый фокус: focus-visible + outline — стресс-тест клавиатуры.

.btn:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.card:focus-visible { outline: 2px solid #2563eb; outline-offset: 4px; }

outline-offset создаёт «воздух» между элементом и рамкой фокуса. Не прячьте outline навсегда — скрывать фокус антидоступно.

3. border-radius

Скругление углов: одно значение — все углы, два — диагонали, четыре — по часовой. Проценты считаются от половины размера блока (больше 50% станут «кругловатыми» фигурами).

.btn { border-radius: 8px; }
.chip { border-radius: 999px; }        /* «капсула» */
.circle { border-radius: 50%; }        /* круг */
.card { border-radius: 16px 16px 4px 4px; }

маленький радиус (2–10px) — спокойный декор;
999px — pill-кнопки и бейджи;
50% — круг, но мешает текст: используйте с осторожностью.

4. box-shadow

Тень: horizontal, vertical, размытие, spread (увеличение), цвет; можно несколько через запятую. Внутренняя — inset. Тени добавляют глубину карточкам и правда «приподнимают» кнопки.

.card { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1), 0 4px 12px rgba(15, 23, 42, 0.08); }
.btn:active { box-shadow: 0 0 0 2px #93c5fd; }
.inset { box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.12); }

Тени не «техничны» к маслу: в тёмной теме они малозаметны. Цените их на светлых, на тёмных — отдельная тонкая гамма.

5. text-shadow

Тень текста: смещение × размытие × цвет. Слишком много — «убивает» читаемость; используют дозированно: свечение иконок, лёгкий контраст.

.glow { text-shadow: 0 0 12px rgba(59, 130, 246, 0.6); }
.soft { text-shadow: 0 1px 2px rgba(15, 23, 42, 0.2); }

6. Тень и её стоимость

box-shadow с большим размытием — дорого при анимациях (каждый кадр перерисовка). Для «парящей» карточки на hover достаточно двух коротких теней, а не blur-100.

.card { transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 4px 20px rgba(15, 23, 42, 0.12); } /* умеренное размытие */

7. Декор без границ: варианты

рамки-«фокус» через outline (не меняют layout);
подложка-разделитель через box-shadow или фон;
обводка кнопки «ghost» — бордер + прозрачный фон;
волнистые/цветные границы — повторяющиеся градиенты.

.ghost { border: 1px solid #2563eb; color: #2563eb; background: transparent; }
.separator {
  border-top: 1px solid #e2e8f0;
  height: 0;
}

8. Скругления и фоны в масках

.avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;         /* фото теряет углы вместе с маской */
}

Фото в кружочке аватара: border-radius: 50% + object-fit: cover — кадрирование по центру. image подсказка: в масках работает и clip-path.

9. Таблица: закруглённые таблицы и карточки

.tbl { border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; }
.tbl th, .tbl td { border-bottom: 1px solid #e2e8f0; padding: 10px 14px; }
.tbl tr:last-child td { border-bottom: 0; }

10. Чек-лист декора

рамки до 2-3px изящны; толстые — дизайн, не продукция;
скругления — удобные 8–16px, pill — для бейджей;
тени короткие и две; тяжёлая blur — только в статике;
outline прибрано только на время: focus-visible обязателен;
тёмная тема — приглушённые тени, цветные акценты не терять.

Что дальше

Курс завершён.

← Вернуться к курсам