ZorNet.Ru — сайт для вебмастера » HTML и CSS » Адаптивная галерея CSS шестиугольников

Адаптивная галерея CSS шестиугольников

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

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

Так реально выглядит, после установочного процесса:

Создать шестиугольник с помощью чистого CSS

Установка:

HTML

Код

CSS

Код

:root{
  --width: 100%;
  --height: 100%;
  --border-width: 200px;
  --border-height: 200px;

}

html, body {
  background: radial-gradient(#c894ef,#600a96);
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hexagon{
  position:relative;
  height:100%;
  width:100%;
}

.hexagon:after{
  content:'';
}

.kesiugon{
  position: absolute;
  top: 500px;
  left: 100px;
  width: 500px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(#805d78,rgba(0,0,0,0) 70%);
}

img{
  width:var(--width);
  height:var(--height);
}

.responsive-hexagon{
  -webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
  padding:5px;
  background:linear-gradient(grey,lightgrey);
  width:var(--border-width);
  height:var(--border-height);
  max-height:250px;
  max-width:250px;
  height: var(--height);
  width:var(--width);
  transition:transform 0.2s;
  position:absolute;
  cursor:pointer;
}

.responsive-hexagon:before{
  content:'';
  position:absolute;
  opacity:0.5;
  width:350px;
  height:70px;
  background:white;
  top:0;
  left:0;
  z-index:1;
  transform:rotate(45deg);
  transition:transform 0.5s;
}

.responsive-hexagon:hover:before{
  transform: translate(-100px,400%) rotate(45deg);
  transition:transform 0.5s;
}

.responsive-hexagon:nth-child(2){
  top:196px;
  left:118px;
}

.responsive-hexagon:nth-child(3){
  top:0;
  left:235px;
}

.responsive-hexagon:nth-child(4){
  top:196px;
  left:353px;
}

.responsive-hexagon:nth-child(5){
  top:0;
  left:470px;
}

#abreviated {
-webkit-clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);

}

.responsive-hexagon:hover{
  transform:scale(1.2);
  transition:transform 0.2s;
  z-index:10;
}

.hexagon {
  width: 250px;
  height: 250px;
  position: absolute;
  top: 30%;
  left: 30%;
  margin: -125px 0 0 -125px;

  img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border: none;
  }
}

@media screen and (max-width:500px){
  .responsive-hexagon{
  width:100px;
  height:100px;
  }

  .responsive-hexagon:nth-child(2){
  top:0;
  left:100px;
  }

  .responsive-hexagon:nth-child(3){
  left:200px;
  }

  .responsive-hexagon:nth-child(4){
  top:82px;
  left:50px;
  }

  .responsive-hexagon:nth-child(5){
  top:82px;
  left:150px;
  }
}

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

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

29 Февраля 2020 Загрузок: 4 Просмотров: 1023 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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