Как создать: карта

Узнайте, как использовать CSS для создания “карты”.

Аватар
Билл Гейтс

Архитектор и инженер

Аватар
Jane Doe

Дизайнер интерьеров

Попробуйте сами

Как создать карту

第一步 - Добавление HTML:

<div class="card">
  <img src="img_avatar.png" alt="Аватар" style="width:100%">
  <div class="container">
    <h4><b>Билл Гейтс</b></h4>
    <p>Архитектор и инженер</p>
  </div>
</div>

第二步 - Добавление 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