Категории
Адаптивная верстка баннера html css
22.10.2025 08:26 | коды из категории: Создание сайтов
Как сверстать баннер, который не умрёт на мобильном: от хаоса к адаптивной гармонии
Задача: Создать баннер по макету — три девочки в футболках в центре, а вокруг них — плашки с текстом. Всё просто, правда? Но стоит открыть этот шедевр на смартфоне — и картинка сжимается до размера почтовой марки, текст превращается в микроскопическую пыль, а пользователь с сарказмом бросает: «А чё тут вообще происходит?»
Именно так выглядит исходный макет:
Как я превратил хаос в порядок: пошаговый разбор
Шаг 1: Готовим основу — не картинку, а компонент
Вместо того чтобы вставлять готовый баннер как изображение (что, честно говоря, грех против UX), я разбил его на слои:
- Фоновая фотография — три девочки.
- Прозрачный PNG с вырезанными фигурами (можно получить вручную или с помощью ИИ-инструментов вроде Photoroom).
- Три текстовые плашки, позиционированные относительно центра.
Вот как это выглядит в финале на десктопе (с тенями полегче, тут слишком грязно получилось, я коненчо потом доработал. но пока то что есть):
А вот — фоновая текстура, которую я добавил для глубины:
И финальная композиция:
Конечно, можно было бы сверстать всё вручную — и я это делал в эпоху табличной вёрстки. Но сегодня у нас есть нейросети, которые генерируют HTML/CSS по макету. Да, я воспользовался этим. Нет, я не стыжусь. Лень — двигатель прогресса, особенно когда речь идёт о повторяющихся задачах.
Иконки? Тоже не проблема: скриншот → обтравка → экспорт в SVG или WebP. WebP — особенно хорош: поддержка у всех современных браузеров, прозрачность, малый вес. Это не просто формат — это любовь к скорости загрузки.
В итоге получаем чистую, семантическую HTML-структуру, которая на большом экране выглядит как на макете, а на мобильном — трансформируется в удобочитаемый блок:
Шаг 2: Медиа-запросы — где рождается адаптивность
Когда ширина экрана падает ниже 768 пикселей (привет, смартфоны!), срабатывает магия CSS:
- Фоновая фотография скрывается — она мешает, а не помогает.
- Плашки переходят в горизонтальный или вертикальный поток (в зависимости от контекста).
- Размер шрифта увеличивается — чтобы текст читался даже на бегу.
Шаг 3: Запасной план для iPhone 5 и прочих раритетов
Да, такие ещё встречаются. Поэтому я добавил дополнительный медиа-запрос для экранов уже 480px: плашки выстраиваются строго в колонку. Никакого перекрытия, никакого «что там написано?» — только чистая, предсказуемая компоновка.
Почему это работает?
- Одна верстка — все устройства. Не нужно поддерживать две версии сайта.
- Пользователь остаётся доволен. Он видит смысл, а не пиксельный хаос.
- Клиент платит с улыбкой. Его сайт выглядит профессионально везде — от MacBook Pro до китайского смартфона за 5 тысяч.
К слову, нейросеть сгенерировала два отдельных блока — один для десктопа, другой для мобильных. Я оставил так: быстро, работает. Но идеально — один адаптивный компонент. Это лучше для SEO (нет дублирования контента) и поддержки. Однако это уже тема для отдельной статьи про оптимизацию.
Главный вывод (для тех, кто читает только концовки)
Не верстайте «как на картинке». Верстайте «как будет работать». Адаптивность — это не про технологии, а про уважение к человеку, который открыл ваш сайт. Даже если он сидит в метро, одной рукой держась за поручень, а второй пытается понять, что вы там рекламируете.
Что дальше?
Этот подход применим ко всему: карточки товаров, формы обратной связи, навигационные меню. Адаптивность — не волшебство. Это набор простых правил, продиктованных заботой о пользователе.
А теперь — ваша очередь! Пишите в комментариях: «Я бы сделал иначе!» — обсудим, поспорим, может, даже улучшим вместе 😉
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Макет с плашками и фоном</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
}
.desktop-layout {
display: flex;
align-items: center;
gap: 20px;
position: relative;
}
.background-image {
width: 100%;
height: 600px;
background: url('https://placehold.co/1200x600/cccccc/ffffff?text=Background+Image') no-repeat center center;
background-size: cover;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.side-cards {
display: flex;
flex-direction: column;
gap: 20px;
position: absolute;
width: 100%;
padding: 0 40px;
box-sizing: border-box;
}
.left-cards {
left: 0;
align-items: flex-start;
}
.right-cards {
right: 0;
align-items: flex-end;
}
.card {
background-color: #fff8dc;
border-radius: 15px;
padding: 20px;
width: 200px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.card::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 30px;
background-color: #6a3093;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.card-icon {
font-size: 40px;
color: #6a3093;
margin-bottom: 15px;
}
.card-title {
font-size: 14px;
color: #333;
line-height: 1.4;
font-weight: 600;
}
.mobile-layout {
display: none;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.mobile-card {
background-color: #fff8dc;
border-radius: 15px;
padding: 20px;
width: 300px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mobile-card::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 30px;
height: 30px;
background-color: #6a3093;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.mobile-card-icon {
font-size: 40px;
color: #6a3093;
margin-bottom: 15px;
}
.mobile-card-title {
font-size: 14px;
color: #333;
line-height: 1.4;
font-weight: 600;
}
@media (max-width: 768px) {
.desktop-layout {
display: none;
}
.mobile-layout {
display: flex;
}
.background-image {
height: 300px;
background-size: cover;
}
.mobile-card {
width: 90%;
max-width: 300px;
}
}
@media (max-width: 480px) {
.mobile-card {
width: 100%;
padding: 15px;
}
.mobile-card-icon {
font-size: 30px;
}
.mobile-card-title {
font-size: 12px;
}
}
</style>
</head>
<body>
<div class="container">
<!-- Десктопная версия -->
<div class="desktop-layout">
<div class="background-image">
<!-- Центральное изображение (можно заменить на реальное) -->
<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
<div style="background: rgba(255,255,255,0.8); padding: 20px; border-radius: 10px;">
<span style="font-size: 24px; color: #6a3093;">Центральное изображение</span>
</div>
</div>
</div>
<!-- Левые плашки -->
<div class="side-cards left-cards">
<div class="card">
<div class="card-icon">🚀</div>
<div class="card-title">Запустить и развить речь</div>
</div>
<div class="card">
<div class="card-icon">💬</div>
<div class="card-title">Научим использовать речь для общения с другими детьми</div>
</div>
<div class="card">
<div class="card-icon">🎓</div>
<div class="card-title">Сформируем навыки учебного поведения</div>
</div>
</div>
<!-- Правые плашки -->
<div class="side-cards right-cards">
<div class="card">
<div class="card-icon">❓✅</div>
<div class="card-title">Научим понимать обращенную речь</div>
</div>
<div class="card">
<div class="card-icon">👥</div>
<div class="card-title">Научим коммуникации</div>
</div>
<div class="card">
<div class="card-icon">😅😊</div>
<div class="card-title">Скорректируем нежелательное поведение</div>
</div>
</div>
</div>
<!-- Мобильная версия -->
<div class="mobile-layout">
<div class="mobile-card">
<div class="mobile-card-icon">🚀</div>
<div class="mobile-card-title">Запустить и развить речь</div>
</div>
<div class="mobile-card">
<div class="mobile-card-icon">❓✅</div>
<div class="mobile-card-title">Научим понимать обращенную речь</div>
</div>
<div class="mobile-card">
<div class="mobile-card-icon">💬</div>
<div class="mobile-card-title">Научим использовать речь для общения с другими детьми</div>
</div>
<div class="mobile-card">
<div class="mobile-card-icon">👥</div>
<div class="mobile-card-title">Научим коммуникации</div>
</div>
<div class="mobile-card">
<div class="mobile-card-icon">🎓</div>
<div class="mobile-card-title">Сформируем навыки учебного поведения</div>
</div>
<div class="mobile-card">
<div class="mobile-card-icon">😅😊</div>
<div class="mobile-card-title">Скорректируем нежелательное поведение</div>
</div>
</div>
</div>
</body>
</html>
Комментарии
Пока нет комментариев. Будьте первым!