Здесь вы узнаете, как сделать информационные "карточки" при помощи CSS.
Иван Иванов
Архитектор & Инженер
Анна Иванова
Дизайнер интерьеров
Как сделать карточку
Шаг 1) Добавляем HTML:
Пример
<div class="card">
<img src="//msiter.ru/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>Иван Иванов</b></h4>
<p>Архитектор & Инженер</p>
</div>
</div>
Шаг 2) Добавляем CSS:
Пример
.card {
/* Добавляем тень, чтобы создать эффект "карточки" */
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
/* При наведении мыши, тень будет гуще */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Добавим поля внутри контейнера карточки */
.container {
padding: 2px 16px;
}
С закругленными углами:
Пример
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 5px; /* 5px закругленные углы */
}
/* Добавляем закругленные углы наверху изображения */
img {
border-radius: 5px 5px 0 0;
}
