титульная страница > программирование > Создание адаптивных карточек одинаковой высоты с помощью современного CSS (волшебство Flexbox и отсутствие медиа-запросов)
Просматривать:759
Введение
Какова наша цель?
Построение структуры с использованием семантического HTML5
Добавление стиля с использованием современного CSS
- Сброс CSS
- Разработка макета карточки с помощью Flexbox
- Стилизация изображения карты
- Стилизация содержимого карты
— Стилизация кнопки карты
- Добавление переходов при наведении
- Использование переменных CSS
Заключение
Как веб-разработчики, мы часто сталкиваемся с необходимостью создания компонентов карточек. будь то презентация продукта/проекта, профиль пользователя или сообщение в блоге, карточки есть повсюду.
Раньше создание адаптивных макетов было сложной задачей. Создание этих дизайнов стало значительно проще и интуитивно понятнее благодаря появлению современных технологий CSS, в частности CSS Flexbox.
Flexbox упрощает процесс создания адаптивных макетов. Мы можем легко расположить, выровнять и разместить элементы в контейнере, не используя сложные медиа-запросы. Это означает, что мы можем создавать макеты, которые прекрасно адаптируются к различным размерам и ориентациям экрана, не указывая точных точек останова.
Цель — создать адаптивные карточки одинаковой высоты, не полагаясь на точки останова, с помощью CSS Flexbox. Мы позаботимся о том, чтобы каждая карточка сохраняла одинаковую высоту независимо от длины контента и легко адаптировалась к разным размерам экрана.
ключевые свойства CSS для макета:
Теперь давайте исследуем магию CSS flexbox, создавая карточки!
Title one
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
Title two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
Title three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!
/* Basic CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ensure that our layout is centred horizontally and vertically on the page */
body {
display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Cards */
.card-container {
display: flex; /* using CSS flexbox to display each card at the centre */
justify-content: center;
align-items: stretch; /* use stretch for equal height of all cards */
gap: 1.5625rem; /* add space between each card */
flex-wrap: wrap;
padding: 1rem;
max-width: 100%; /* Prevent container from exceeding viewport width */
}
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: #fff;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
text-align: center;
text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
overflow: hidden;
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0.85rem;
}
.card-title {
font-size: 1.25rem;
padding: 1rem;
color: #3ca69f;
}
.card-description {
flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
padding: 0 1rem 1rem;
font-size: 0.975rem;
line-height: 1.5;
}
/* Cards button */
.card-button {
align-self: center; /* placing the button at the center */
margin: 1rem 0 3rem;
padding: 0.625rem 1rem;
font-size: 1rem;
color: #ffffff;
background-color: #3ca69f;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
}
.card {
transition: 0.5s ease all;
}
.card-button {
transition: 0.5s ease all;
}
/* cards hover effect */
.card:hover {
background-color: #276662;
color: #ffffff;
}
.card:hover > .card-button {
background-color: #ffffff;
color: #276662;
font-weight: 700;
}
.card:hover > .card-title {
color: #ffffff;
}
/* Declare variables */
:root {
--primary-color: #3ca69f;
--secondary-color: #276662;
--text-color: #ffffff;
--shadow-color: rgba(0, 0, 0, 0.4);
--border-radius: 0.3125rem;
--spacing: 1rem;
--transition-duration: 0.5s;
}
ВВЕРХ
Отказ от ответственности: Все предоставленные ресурсы частично взяты из Интернета. В случае нарушения ваших авторских прав или других прав и интересов, пожалуйста, объясните подробные причины и предоставьте доказательства авторских прав или прав и интересов, а затем отправьте их по электронной почте: [email protected]. Мы сделаем это за вас как можно скорее.
Copyright© 2022 湘ICP备2022001581号-3