Привет, всем будущим фронтенд разработчикам! В этой статье мы разберем как удобно верстать различные карточки.
Любая карточка состоит из изображения и контента:
Красным выделена верхушка карточки (изображение), а оранжевым контент. Исходя из этого мы можем создать два контейнера:
Зачем нам создавать отдельный див для изображения, почему не вставить ее фоном в .card? - Если вставлять ее фоном в .card, мы должны будем вручную высчитывать отступы контента от изображения и решать остальные мелкие проблемы по ходу адаптива наших карточек, а зачем, если можно сделать намного проще.
Теперь мы преступаем к стилизации. Смотрим ширину карточки, в нашем случае - 374px.
В зависимости от типа изображения (контентное или декоративное) мы решаем как реализовывать изображение. Если нужно вставить картинку фоном, создаем ей контейнер (card__image), в противоположном случае делаем через <img>.
P.S. на примере изображена карточка с контентным изображением, но верстаю под декоративное, чтобы объяснить как лучше вставлять фоновую картинку.
Теперь приступаем к реализации изображения: Для card__image прописываем стили:
Мы делаем ей 100% ширину, чтобы она растягивалась по всей ширине своего контейнера. Ставим высоту, сколько нам нужно. Указываем путь к изображению и делаем стандартные стили для фоновых картинок. Так же, по макету, нам нужно сделать скругление верхних углов (border-radius). Получаем следующий результат:
Теперь нам нужно стилизовать контейнер для контента карточки. Мы смотрим отступы контента от краев - 36px, 45px, 41px и 45px (сверху, справа, снизу и слева). После этого задаем нужный нам цвет и скругления углов снизу.
Я не буду делать подобие карточки из примера, по этому в контенте у нас будет Название (title) карточки, описание и кнопка:
Наш контент сразу встал туда, куда ему нужно, потому что все отступы были заданы контейнеру. Остается только стилизовать текст, как вам нужно и отодвинуть друг от друга с помощью верхних отступов.
Почему отступы должны быть верхними? Не логичнее двигать от названия описание и от описания кнопку? - Так тоже будет правильно, если ваши карточки не будут меняться извне. А точнее если это не карточки товара, например, которые создают через админ панель. В таком случае, модератор, может создать карточку без описания, например, или без кнопки, а может и без названия. И получим мы на выходе карточку где есть только описание, у которого не нужный нижний отступ, ломающий внешний вид нашей карточки.
И вот такой финальный результат мы получим:
Благодаря такой заготовке мы можем делать различные карточки и в будущем легко их изменять. Нам не нужно задавать кучу отступов различным элементам, у каждой секции есть свой контейнер и семантически все выглядит правильно.
Код данной карточки вы можете посмотреть на моем codepen.
P.S. Главное не забывайте, что сколько людей, столько и мнений. Кто-то делает по другому. Я не утверждаю, что мой пример является самым верным и правильным, но я готов поспорить, что он один из самых удобных и вариативных.
Спасибо, что потратили время на эту статью. Если она была вам полезна подписывайтесь на мой дзен, заходите в мой телеграм канал и задавайте различные, интересующее вас вопросы.