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

Красивые блоки из фигур с анимацией CSS

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

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

Как пример:

По умолчанию или с открытием страницы.

Этот вид преобразился в тот момент, когда навели курсор.

Установка:

HTML

Код

<div class="oformleniye_blokov">
  <div class="akmatsuva-1"></div>
  <div class="akmatsuva-2"></div>
  <div class="akmatsuva-txt">
  <h3>ZorNet.Ru — сайт для вебмастера</h3>
  <p>Интересные решения для вебмастера в создание и продвижение сайтов</p>
  </div>
</div>

CSS

Код

.oformleniye_blokov {
  margin: 20px auto;
  padding: 50px 0;
  position: relative;
  max-width: 640px;
}
.oformleniye_blokov .akmatsuva-1,
.oformleniye_blokov .akmatsuva-2,
.oformleniye_blokov .akmatsuva-1:after,
.oformleniye_blokov .akmatsuva-2:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.oformleniye_blokov .akmatsuva-1,
.oformleniye_blokov .akmatsuva-2 {
  filter: drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.4));
}
.oformleniye_blokov .akmatsuva-1:after {
  clip-path: polygon(0 0, 40% 0, 20% 100%, 20% 100%);
  content: "";
  transition: all .5s ease-in-out;
  background: #337AB7;
}

.oformleniye_blokov:hover .akmatsuva-1:after {
  clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
}
.oformleniye_blokov .akmatsuva-2:after {
  clip-path: polygon(80% 0, 100% 100%, 60% 100%, 80% 0);
  content: "";
  transition: all .5s ease-in-out;
  background: #BFE2FF;
}
.oformleniye_blokov:hover .akmatsuva-2:after {
  clip-path: polygon(100% 0, 100% 100%, 40% 100%, 60% 0);
}
.oformleniye_blokov .akmatsuva-txt {
  position: relative;
  text-align: center;
  z-index: 1;
  padding: 20px;
  margin: 0 50px;
  left: 0;
  background: #FFF;
  box-shadow: 2px 12px 15px rgba(0, 0, 0, 0.4);
  transition: all .5s ease-in-out;
}
.oformleniye_blokov .akmatsuva-txt h3 {
  text-transform: uppercase;
  color: #337AB7;
  font-weight: bold;
  font-family: Verdana, sans-serif;
  font-size: 20px;
  margin: 6px 0;
}
.oformleniye_blokov .akmatsuva-txt p {
  font-family: Verdana, sans-serif;
  font-size: 16px;
  margin: 6px 0;
}
@media (max-width: 540px) {
  .oformleniye_blokov .akmatsuva-txt h3 {
  font-size: 18px;
  }
  .oformleniye_blokov .akmatsuva-txt p {
  font-size: 14px;
  }
}
@media (max-width: 400px) {
  .oformleniye_blokov .akmatsuva-txt h3 {
  font-size: 16px;
  }
  .oformleniye_blokov .akmatsuva-txt p {
  font-size: 13px;
  }
}

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

Демонстрация
Автор: atuin.ru

31 Декабря 2020 Загрузок: 4 Просмотров: 1255 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 31 Декабря 2020 15:23¹ +1 Остальные вариаций таких блоков можно посмотреть в этом материале, как блоки из фигур треугольника на чистом CSS с разной трансформацией.