Как создавать адаптивные кнопки и блоки в CSS

Как создавать кнопки и блоки страниц, содержимое которых может измениться.

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

  • правка дополнительного содержимого не затрагивала ранее написанные стили;
  • при добавлении нового содержимого макет отображался корректно.

Кнопки

Создадим кнопку общего назначения:

.button {
/* геометрия элемента */
width: 150px;
height: 20px;
/* отступы между кнопками */
margin-bottom: 5px;
/* центрируем текст кнопки по вертикали */
display: flex;
justify-content: center;
/* центрируем текст кнопки по горизонтали */
text-align: center;
/* чтобы работала геометрия и отступы у тега <a> */
display: inline-block;
/* убираем обводку у тега <a> */
text-decoration: none;
background-color: red;
color: #fff;
}

Примеры использования:

<a href=»#» class=»button»>Отправить резюме</a>
<a href=»/» class=»button»>Очистить форму</a>


Код примера

В процессе развития проекта в элементах сайта может измениться содержимое. Это значит, что текст в кнопке «Отправить резюме» может смениться на «Отправьте нам ваше резюме», и получится вот так:


Код примера

Слово «резюме» не поместилось, хотя именно из-за него и появился дополнительный отступ.

Проблема

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Решение

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

.button {
min-width: 150px;
/* при жесткой высоте будет увеличиваться ширина */
height: 20px;
/* … остальной код без изменения */
}


Код примера

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing:content-box, то есть стандартном поведении элементов.

.button {
/*
поскольку другое значение border-box не задавалось,
нужно подкорректировать размеры
*/
min-width: 140px;
/* при жесткой высоте будет увеличиваться ширина */
height: 20px;
padding: 0 10px;
/* … остальной код без изменения */
}


Код примера

Блоки страницы

При верстке посадочных страниц можно встретить блоки с большим количеством свободного пространства внутри. Пример:

Лучше всего оформить это в CSS так:

<div class=»greeting»>
<h1 class=»greeting__title»>
Поздравляю, вы стали обладателем квартиры в Сызрани!
</h1>
</div>

.greeting {
/* задаём геометрию */
height: 200px;
padding: 20px;
/* центрируем содержимое по вертикали и горизонтали */
display: flex;
align-items: center;
justify-content: center;
/* учитываем последующее добавление элементов */
flex-direction: column;
background: blue;
}
.greeting__title {
color: #fff;
font-family: Arial;
font-size: 20px;
}

Вот что у нас получилось:


Код примера

Проблема

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Такое происходит при переполнении контейнера .greeting. Некоторые начинающие специалисты могут просто поставить overflow:hidden, но это не решит проблему.

Решение

Ставим min-height и отступы на случай, если содержимого станет слишком много:

.greeting {
/* задаём геометрию */
min-height: 200px;
padding: 20px;
/* код без изменения */
}

Код примера

padding > min-*

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

.greeting {
/* задаём геометрию */
min-height: 40px;
/* тут речь идет только о box-sizing:content-box */
padding: 80px;
/* код без изменения */
}

Начальное поведение у элементов в обоих случаях будет одинаковым, а вот поведение при превышении минимального значения контейнера — разным.


Код примера

Внешние отступы

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

<div class=»greeting»>
<div class=»greeting__container»>
<h1 class=»greeting__title»>
Поздравляю, вы стали обладателем квартиры в Сызрани!
</h1>
</div>
</div>

И так тоже не делайте:

.greeting {
/* задаём геометрию */
min-height: 40px;
/* не задаём никакие отступы в родительском элементе */
/* код без изменения */
}

.greeting__container {
margin: 80px;
}

Резюме

  • Для всего, что может измениться, задавайте минимальные и максимальные размеры.
  • Добавляйте отступы для корректного отображения.

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Билл Гейтс, история успеха
Названия стран и столиц (часть 2)
Как найти своё призвание и реализовать себя в жизни
Когда деревья были большими...
3 совета для тех, кто в активном поиске работы
7 способов увеличить ценность продукта, чтобы продавать дороже остальных
3 навыка, которые не помогут найти работу
Максим Батырев о бонусах и акциях на рынке В2В
БИЗНЕСХАК: 7 привычек для порядка дома и в делах.
БИЗНЕСХАК: 5 ошибок при работе с вопросами
12 маркетинговых кампаний, которые показали миру, что такое настоящий провал
ВЗЛОМ МАРКЕТИНГА: 13 полезных советов из книг по маркетингу
7 инструментов таргетинга в Facebook для начинающих
Методика оценки знаний инженера. Путь архитектора и путь эксперта
5 правил деловой беседы, или Как заводить новые контакты (и друзей)
Когда стоит соглашаться на вакансию, которая вам не по душе?
10 уроков от Стива Джобса
Что делать, когда не растут продажи. Чек-лист для спасения
Posted in Полезно прочитать.