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

Слайдер для сайта в стиле аккордеон на CSS3

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

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

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

1. Так выглядит при открытии страницы или заходе на портал.

2. Это вид по левую сторону, где как модно заметить, что не исчезает кадр.

3. Здесь уже происходит сдвиг по правую сторону, все зависит какую обложку открываете.

Тематический слайд с переходами по сайту

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

HTML

Код

<div class="cereatunga-sogabutung">
  <ul>
  <li>
  <div class="pogunsah-bkosamies">
  <a href="#konsumsecan">Слива</a>
  </div>
  <a href="#konsumsecan">
  <img src="http://zornet.ru/ABVUN/Anisa/zauyt.png" />
  </a>
  </li>
  
  <li>
  <div class="pogunsah-bkosamies">
  <a href="#konsumsecan">Вкусные</a>
  </div>
  <a href="#konsumsecan">
  <img src="http://zornet.ru/ABVUN/Anisa/yretyoji.png" />
  </a>
  </li>
  
  <li>
  <div class="pogunsah-bkosamies">
  <a href="#konsumsecan">Яблоня</a>
  </div>
  <a href="#konsumsecan">
  <img src="http://zornet.ru/ABVUN/Anisa/juniper.png" />
  </a>
  </li>
  
  <li>
  <div class="pogunsah-bkosamies">
  <a href="#konsumsecan">Овощи</a>
  </div>
  <a href="#konsumsecan">
  <img src="http://zornet.ru/ABVUN/Anisa/tykon.png" />
  </a>
  </li>
  </ul>
</div>

CSS

Код

.cereatunga-sogabutung {
  width: 715px; height: 295px;
  overflow: hidden;
  margin: 30px auto;
  -webkit-box-shadow: 0 0 8px 1px rgba(16, 16, 16, 0.35);
  -moz-box-shadow: 0 0 8px 1px rgba(16, 16, 16, 0.35);
  box-shadow: 0 0 8px 1px rgba(16, 16, 16, 0.35);
  box-shadow: 0px 8px 19px rgba(25, 23, 23, 0.63), 0px 10px 30px -15px rgba(29, 28, 28, 0.42);
  border: 2px solid #cac6c6;
  }

  .cereatunga-sogabutung ul {
  width: 2000px;
  }

  .cereatunga-sogabutung li {
  position: relative;
  display: block;
  width: 175px;
  float: left;
  border-left: 1px solid #888;
  -webkit-box-shadow: 0 0 23px 8px rgba(21, 20, 20, 0.5);
  -moz-box-shadow: 0 0 23px 8px rgba(21, 20, 20, 0.5);
  box-shadow: 0 0 23px 8px rgba(21, 20, 20, 0.5);

  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all 0.7s;
  }

  .cereatunga-sogabutung ul:hover li {
  width: 39px;
  }

  .cereatunga-sogabutung ul li:hover {
  width: 598px;
  }

  .cereatunga-sogabutung li img {
  display: block;
  }

  .pogunsah-bkosamies {
  background: rgba(16, 16, 16, 0.57);
  position: absolute;
  left: 0;
  bottom: 0;
  width: 598px;
  }

  .pogunsah-bkosamies a {
  display: block;
  color: #f9f8f8;
  text-shadow: 0 1px 0 #464141;
  text-decoration: none;
  padding: 18px;
  font-size: 17px;
  }

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

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

02 Ноября 2018 Просмотров: 1258 Комментариев: (0)

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

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

Kosten

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