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

Стильное оформление блока для сайта на CSS

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

Но больше всего в плюс засчитать, это эффекты, которые стильно смотрятся и исполнение их в производном идет на CSS3, что совершенно не будет грузить страницу. Есть такие площадки, на которых создают отдельную страницу и на ней располагают информер. Так теперь вы можете поставить блоки. Здесь идут 2 варианта, это значит у вас есть тема на изображение, или поставить шрифтовые иконки.

По сути нет не какой разницы и анимация одинакова, но у большинства подключены шрифты Font Awesome, что безусловно засчитано в плюс. Так как кнопку они могут найти на любую тема, где ширина и высота поставлена на 71 пиксель, что можете самостоятельно подогнать по своему каркасу. Когда проверял на работоспособность, где ниже будут представлены снимки, это как при открытии страницы они смотрятся, и как выглядят при наведении сайта, где отличный эффект производится.

Здесь рассмотрим блоки, в разном режиме и на разном формате выведение картинки.

1. Это по умолчанию, где ставим по вверх изображение, а по центру кнопка.

Как сделать блок с закругленными углами только на CSS

2. Здесь все аналогично, только уже наведенный клик, что сразу замечаем, это появление тени и по элементам изменение идет полностью.

Красивое оформление изображений на сайте

Приступаем к установке:

HTML

Код

<div class="talmodern_gaversions kadunidesa">
  <div class="vealauplicates">
  <div class="tuouslanub">
  <img src="http://zornet.ru/ABVUN/sarunolas/milsagtugsa/oblaka.jpg" />
  </div>
  <div class="nudelopag">
  <i class="fa fa-bell"></i>
  </div>
  </div>
  <div class="body">
  <h3>ZorNet.Ru портал вебмастера #1</h3>
  <p>На этом блоке выведены кнопки "Font Awesome"</p>
  </div>
</div>
<div class="talmodern_gaversions kadunidesa">
  <div class="vealauplicates">
  <div class="tuouslanub">
  <img src="http://zornet.ru/ABVUN/sarunolas/milsagtugsa/blogger239.jpg" />
  </div>
  <div class="nudelopag">
  <img src="http://zornet.ru/ABVUN/sarunolas/milsagtugsa/rydalopas.png" />
  </div>
  </div>
  <div class="body">
  <h3>ZorNet.Ru портал вебмастера #1</h3>
  <p>Здесь прикреплено изображение в формате PNG</p>
  </div>
</div>

CSS

Код

.talmodern_gaversions {
  background: #f9f0f0;
  margin: 19.7px 0;
  border-radius: 3px;
  border: 2px solid #bbb7b7;
  box-shadow: 0 5px 5px 0 rgba(128, 123, 123, 0.35);
  cursor: pointer;
}
.talmodern_gaversions .vealauplicates {
  position: relative;
  z-index: 1;
  height: 100px;
}
.talmodern_gaversions .vealauplicates .tuouslanub {
  position: relative;
  z-index: 1;
  height: 100px;
  overflow: hidden;
  transition: all 0.3s;
}
.talmodern_gaversions:hover .vealauplicates .tuouslanub {
  height: 175px;
}
.talmodern_gaversions .vealauplicates .tuouslanub img {
  position: absolute;
  z-index: -1;
  top: -43%;
  transition: all 0.3s;
  width:100%;
}
.talmodern_gaversions:hover .vealauplicates .tuouslanub img {
  top: 0;
}
.talmodern_gaversions .vealauplicates .tuouslanub:before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(251, 249, 249, 0.29);
}
.talmodern_gaversions:hover .vealauplicates .tuouslanub:before {
  background: rgba(249, 247, 247, 0.01);
}
.talmodern_gaversions .vealauplicates .nudelopag {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate3d(-47%, -8px, 0);
  transition: all 0.4s;
}
.talmodern_gaversions:hover .vealauplicates .nudelopag {
  transform: translate3d(-47%, -18px, 0);
}
.talmodern_gaversions .vealauplicates .nudelopag img,
.talmodern_gaversions .vealauplicates .nudelopag i
{
  border-radius: 95%;
  border: 2px solid #2b699e;
  font-size: 71px;
  color: #276aa2;
  padding:28px;
  box-sizing: content-box;
  width:71px;
  height:71px;
  background: linear-gradient(to top, #BDE1FF, #FFF);
}
.talmodern_gaversions:hover .vealauplicates .nudelopag img,
.talmodern_gaversions:hover .vealauplicates .nudelopag i
{
  background: #f2f4f7;
}
.talmodern_gaversions .body {
  text-align: center;
  margin-top: 87px;
}
.talmodern_gaversions h3 {
  transition: all 0.5s ease 0s;
  color: #256dab;
  font-size:19px;
  margin:7px 0;
}
.talmodern_gaversions:hover h3 {
  color: #3e3b3b;
}

.kadunidesa {
  width: 37%;
}

Вероятно кто-то рассмотрит, где такой каркас больше подходит на вид материалов, что не удивлюсь, так как с него больше было взято элементов, только сделано под современный вид, который можно применять в различной функциональности.

Что есть возможность увидеть как на главной странице в отдельном месте, так и не исключению в нижней части, все создано на стилях, и все красиво можно отредактировать на любой дизайн.

Демонстрация

04 Августа 2018 Просмотров: 1932 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0