Урок 07. Решения

📁 Раздел: Базовые утилиты ⏱️ Время изучения: ~45 мин 🎯 Сложность: Начальная

⚡ Кратко

Решения с живым результатом: две карточки, доступное поле, панель уведомления.

Решение задания 1

Вариант на рамке

Чёткие границы, ничего не «плавает».

Вариант на тени

Мягче, но в длинном списке тени сливаются.

<div class="grid gap-4 sm:grid-cols-2">
  <div class="rounded-xl border border-slate-200 bg-white p-5">
    <h3 class="text-sm font-semibold text-slate-900">Вариант на рамке</h3>
    <p class="mt-1 text-sm text-slate-600">Чёткие границы, ничего не «плавает».</p>
  </div>
  <div class="rounded-xl bg-white p-5 shadow-lg">
    <h3 class="text-sm font-semibold text-slate-900">Вариант на тени</h3>
    <p class="mt-1 text-sm text-slate-600">Мягче, но в длинном списке тени сливаются.</p>
  </div>
</div>

Ответ на вопрос: для списка из двадцати карточек лучше рамка. Двадцать теней подряд создают визуальный шум и «грязь» между блоками, а рамка держит ритм и не тянет производительность отрисовки.

Решение задания 2

<div class="max-w-sm">
  <label for="demo-name" class="mb-1 block text-sm font-medium text-slate-700">Имя</label>
  <input id="demo-name" type="text" placeholder="Как к вам обращаться"
         class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400
                focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/30 focus:outline-none">
</div>

Почему так: focus:outline-none здесь допустим, потому что мы заменили контур на пару «цветная рамка + кольцо». Подпись связана с полем через for и id — клик по подписи ставит курсор в поле.

Решение задания 3

Отчёт сохранён

Файл доступен в разделе «Документы».

<div class="flex max-w-md overflow-hidden rounded-xl bg-white shadow-lg">
  <div class="w-1 bg-emerald-500"></div>
  <div class="flex flex-1 items-start justify-between gap-3 p-4">
    <div>
      <p class="text-sm font-semibold text-slate-900">Отчёт сохранён</p>
      <p class="mt-1 text-sm text-slate-600">Файл доступен в разделе «Документы».</p>
    </div>
    <button class="rounded-md p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-600
                   focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500"
            aria-label="Закрыть">✕</button>
  </div>
</div>

Почему так: цветная полоса — это отдельный блок шириной 1 (4px), а overflow-hidden у контейнера обрезает её по скруглению. Кнопка закрытия имеет aria-label, потому что её единственное содержимое — символ.