Как сделать - Карточки
Карточки
Узнать, как создать "карточку" с помощью CSS.
Щипунов Андрей
Веб разработчик
Щипунова Татьяна
Мастер сахарной депиляции
Как создать карточки
Шаг 1) Добавить HTML:
Пример
<div class="card">
<img src="img_avatar.png" alt="Аватар" 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;
}Редактор кода »Совет: Зайдите на наш учебник CSS Тени, чтобы узнать больше о тенях.
