ZorNet.Ru — сайт для вебмастера » HTML и CSS » Сделать круглые изображения с информацией CSS

Сделать круглые изображения с информацией CSS

Сделать круглые изображения с информацией CSS
Здесь мы сделаем изображение круглым при помощи CSS, где также ниже будет информация того, что изображен на картинки и кто представляет. Вообщем для понимание, вы безусловно встречали на разных официальных сайтах, которое в основной своей тематике идут на услуги. Это кто администратор сайта, также дизайнер, вообщем вся команда интернет портала. Это вот точно такой стиль, где можно поставить как тематический снимок, так изображение на того или иного сотрудника.

Так как сейчас основном идут современные сайты, то такой вид безусловно необходим, где при прокручивание в низ, вы найдете все данные об администраций портала. Где этот код и стили будут не то что отличным решение, больше всего такой вид для этого был создан. Здесь вы можете ставить на разный фон, это как темный и светлый, так как вся цветовая палитра настраивается в стилях CSS, что очень несложно сменить.Приступаем к установке:

HTML

Код
<div class="kindosin-ormation">
  <img src="http://zornet.ru/ABVUN/sarunolas/Gamilsatun/656587.png" alt="Светлана" />
  <h4>Администратор: Kosten</h4>
  <p>ZorNet.Ru - интернет портал вебмастера</p>
  </div>

CSS

Код
div.kindosin-ormation {
  text-align:center;
}

  div.kindosin-ormation img {
  border-radius:57%;
  width:193px;
  }
   
div.kindosin-ormation h4 {
  font-size: 20px;
  font-weight: bold;
  margin: 7px 0 0 0;
  color: #332e2e;
}
   
div.kindosin-ormation p {
  margin: 4px 0 0 0;
  color: #253f8c;
  font-style: italic;
  font-size: 14px;
  font-weight: bold;
}

Вероятно вам понятна сама задумка, где просто делаем профили для представление с информацией, что будет у каждого ниже написана.

Демонстрация
22 Августа 2018 Просмотров: 1311 Комментариев: (2)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 2
pesd0z
pesd0z 22 Августа 2018 19:551
0
Мне кажется будет красивее, если мы не много перепишем стили:

Code HTM:
Код
<div class="c0de18">
  <img src="http://www.web.cofp.ru/images/articles/creatsite/CSS/border-radius/bc234a708bc2f5e078ffb233689d75c0.jpg" />
  <h4>Светлана Костина</h4>
  <p>Ведущий веб-дизайнер проекта</p>
  </div>


Code CSS:
Код
div.c0de18 {
  text-align: center;
}
.c0de18 img {
  border: 3px solid #75c1ff; /* Параметры рамки */
  width: 100px; /* Ширина фото */
  height: 100px; /* Высота фото */
  border-radius: 50%;
  }
.c0de18 img:hover {
  border: 3px solid #0d98ba;
}
.code18, h4 {
  font-size: 16px; /* Размер шрифта в h4*/  
  font-family: Arial; /* Семейство шрифтов h4 */
}
.c0de18, p {
  font-family: Arial; /* Семейство шрифтов p */
  font-size: 14px; /* Размер шрифта в p*/  
}
.c0de18, p:hover {
  margin-left: 2px;
}
Kosten
Kosten 22 Августа 2018 20:242
0
pesd0z, здесь каждый видеть что добавить, что изначально хотел обвод с тенями сделать, но лучше оставить все по стандарту.

Согласен, когда стилистики по добавляешь, главное не перебор, чтоб был, тогда красиво смотрится.
Войдите:
avatar