» »

Красиво оформленные блоки по дизайн на CSS

Красиво оформленные блоки по дизайн на CSS

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

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

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

Так смотрится при проверки на работоспособность по всем функциям, где ширина обвода 2 пикселя.

Адаптивный блок для сайта

Это вид, когда навели клик на основу.

Анимационнный блок для информации сайта

HTML

Код
<div class="kamaganus">  
<div class="sapectrum-okolumanit">
  <div class="icon">
  <i class="fa fa-bus"></i>
  </div>
  <h3>ZorNet.Ru: Портал Вебмастера №1</h3>
  <p>Здесь подключен шрифт кнопок "Font Awesome"</p>
</div>  
</div>  
   
<div class="kamaganus">
<div class="sapectrum-okolumanit">
  <div class="icon">
  <img src="https://atuin.ru/demo/icons/icon-4.png">
  </div>
  <h3>Сайт по созданию интернет ресурса</h3>
  <p>Изображение подключено по прямой ссылке</p>
</div>
  </div>

CSS

Код
.sapectrum-okolumanit {
  width: 100%;
  border: 1.3px solid #b1abab;
  padding: 7px;
  text-align: center;
  transition: 0.3s all;
  overflow: hidden;
  margin: 18px 0;
  cursor: pointer;
  border-radius: 3px;
  box-shadow: 3px 3px 14px 0px rgba(144, 137, 137, 0.24), 0px 9px 27px -12px rgba(33, 31, 31, 0.1);
}
.sapectrum-okolumanit:hover {
  box-shadow: 0px 9px 18px 0 rgba(19, 18, 18, 0.21);
}
.sapectrum-okolumanit .icon {
  margin: 19px auto;
  transition: all 0.5s ease 0s;
  font-size: 73px;
  width: 73px;
  height: 75px;
  color: #2b87d6;
}
.sapectrum-okolumanit:hover .icon ,  
.sapectrum-okolumanit:hover .icon {
  transform: scale(20);
  position:relative;
  opacity:0;
}  
.sapectrum-okolumanit h3 {
  transition: all 0.6s ease 0s;
  color: #174771;
  font-size: 19px;
  margin: 0 0 4px 0;
  padding: 5px;
}  
.sapectrum-okolumanit:hover h3 {
  color: #337AB7;
  transform: translateY(-44px) scale(1.3);
}  

p {
  color: #223844;
  font-size: 14px;
  font-weight: bold;
}

.kamaganus {
  width: 32%;
}

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

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

Демонстрация
01.08.2018 Просмотров: 203 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 01.08.2018 17:001
0
Такой блок больше для рекламного характера может отлично подойти.
avatar