Введение
Вёрстка — это искусство превращать статичный макет в живой, отзывчивый интерфейс. Каждый день я сталкиваюсь с задачами: выровнять блоки по сетке, сделать анимацию появления, адаптировать под мобильные. Вместо того чтобы каждый раз гуглить документацию, я использую проверенные промты. Эта подборка — 14 готовых запросов для ChatGPT, которые покрывают 80% повседневных задач: от Flexbox до сложных анимаций. Все промты проверены на реальных проектах и экономят мне 2-3 часа в день.
1. Сетка на Flexbox
Промт: «Создай вёрстку трёх колонок с равной шириной на Flexbox, с промежутками 20px и центровкой по вертикали. Добавь пример с адаптивом: на экранах меньше 768px колонки складываются в одну колонку.»
Пример:
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.container {
display: flex;
gap: 20px;
align-items: center;
}
.item {
flex: 1;
}
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}
Пояснение: Свойство flex: 1 равномерно распределяет пространство. В адаптиве меняем направление на колонку — простой и надёжный способ.
2. Сетка на CSS Grid
Промт: «Сделай сетку из 4 колонок на Grid с фиксированными промежутками 16px. Первая колонка — 200px, остальные — гибкие. Добавь адаптив: на планшетах 2 колонки, на телефонах 1 колонка.»
Пример:
.grid {
display: grid;
grid-template-columns: 200px repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 1024px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.grid {
grid-template-columns: 1fr;
}
}
Пояснение: Grid идеален для сложных макетов. repeat() и 1fr дают гибкость без лишних медиа-запросов.
3. Анимация появления при скролле
Промт: «Напиши CSS-анимацию для плавного появления блока при скролле (fade-in + смещение вверх). Используй Intersection Observer API. Код должен быть без jQuery.»
Пример:
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
Пояснение: Intersection Observer работает без сторонних библиотек, анимация только на CSS — производительно и просто.
4. Flexbox для выравнивания
Промт: «Выровняй блок по центру экрана (и по горизонтали, и по вертикали) с помощью Flexbox. Добавь чёрный фон и белый текст. Минимум кода.»
Пример:
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
color: #fff;
}
Пояснение: 100vh — высота окна браузера. Это база, на которой строится большинство лендингов.
5. Адаптивное меню (бургер)
Промт: «Создай адаптивное меню: на десктопе — горизонтальные ссылки, на мобильных — скрытое, с кнопкой-бургером. Используй только CSS и HTML (без JS).»
Пример:
<nav>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="burger">☰</label>
<ul class="menu">
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
</ul>
</nav>
.menu {
display: flex;
}
#menu-toggle:checked ~ .menu {
display: block;
}
@media (max-width: 768px) {
.menu { display: none; }
.burger { display: block; }
}
Пояснение: Чекбокс и соседний селектор (~) — трюк без JavaScript. Отлично для простых проектов.
6. CSS-переменные для темы
Промт: «Настрой CSS-переменные для цветовой схемы (тёмная/светлая тема). Сделай переключение через класс на body. Пример: переменные для фона, текста и акцентов.»
Пример:
:root {
--bg: #fff;
--text: #000;
--accent: #007bff;
}
body.dark {
--bg: #121212;
--text: #eee;
--accent: #bb86fc;
}
body {
background: var(--bg);
color: var(--text);
}
Пояснение: Переменные меняются одним классом. Это основа кастомизации в современных фреймворках.
7. Карточка товара с анимацией
Промт: «Сверстай карточку товара: изображение, название, цена, кнопка. При наведении карточка поднимается на 5px и появляется тень. Используй CSS-транзишены.»
Пример:
.card {
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}
Пояснение: Такие микроанимации повышают UX. В реальных проектах я использую их для всех интерактивных элементов.
8. Форма с адаптивными полями
Промт: «Сделай форму ввода с двумя полями (имя и email) и кнопкой. На мобильных поля — на всю ширину, на десктопе — в ряд. Добавь placeholder и border-radius.»
Пример:
.form {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.form input {
flex: 1 1 200px;
padding: 10px;
border-radius: 5px;
}
@media (max-width: 480px) {
.form input { flex: 1 1 100%; }
}
Пояснение: flex-wrap и flex-basis дают адаптивность без лишних медиа-запросов.
9. Градиентный фон
Промт: «Создай градиентный фон от синего к фиолетовому, который плавно меняет угол наклона при наведении. Анимация на CSS.»
Пример:
.gradient {
background: linear-gradient(45deg, #4facfe, #00f2fe);
transition: background 0.5s;
}
.gradient:hover {
background: linear-gradient(135deg, #4facfe, #00f2fe);
}
Пояснение: linear-gradient — мощный инструмент. Анимация угла создаёт эффект движения без JavaScript.
10. Адаптивная типографика
Промт: «Настрой адаптивные размеры шрифта с помощью clamp(). Заголовок 1 — от 24px до 48px, параграф — от 14px до 18px. Добавь пример.»
Пример:
h1 {
font-size: clamp(24px, 4vw, 48px);
}
p {
font-size: clamp(14px, 2vw, 18px);
}
Пояснение: clamp() задаёт min, preferred и max. Это современный стандарт для резиновой вёрстки.
11. Псевдоэлементы для иконок
Промт: «Добавь иконку перед ссылкой через ::before. Используй content с Unicode-символом (например, стрелка). Стилизуй через CSS.»
Пример:
a::before {
content: "→ ";
color: blue;
font-size: 1.2em;
}
Пояснение: Unicode-символы не требуют загрузки шрифтов. Это быстрый способ добавить визуальные подсказки.
12. Сетка для галереи
Промт: «Сделай галерею изображений на Grid с автоматическим подбором размера колонок. Каждое изображение занимает минимум 200px, максимум 1fr. Адаптив автоматический.»
Пример:
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
Пояснение: auto-fit и minmax() — идеальная пара для адаптивной галереи без медиа-запросов.
13. Плавный скролл
Промт: «Добавь плавный скролл для всей страницы при клике на якорные ссылки. Чистый CSS, без JS.»
Пример:
html {
scroll-behavior: smooth;
}
Пояснение: Одной строкой CSS делает навигацию по странице приятной. Поддерживается всеми современными браузерами.
14. Контейнер с max-width
Промт: «Создай класс контейнера с максимальной шириной 1200px и центровкой. Добавь padding по бокам 20px. Адаптив через медиа-запросы.»
Пример:
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
@media (max-width: 1200px) {
.container {
padding: 0 15px;
}
}
Пояснение: Классический паттерн для ограничения ширины контента. Всегда ставлю в начале проекта.
Заключение
Эти 14 промтов покрывают базовые сценарии вёрстки: от сеток до анимаций. Я использую их ежедневно, адаптируя под конкретные задачи. Главное — понимать, что промт — это не готовое решение, а стартовая точка. Подставляйте свои классы, цвета и брейкпоинты. Если хотите углубиться — рекомендую изучить официальную документацию MDN по CSS Grid и Flexbox. Сохраните эту статью в закладки — она сэкономит вам часы гугления.
Комментарии