ZorNet.Ru — сайт для вебмастера » HTML и CSS » Простой слайдер отзывов на чистый CSS

Простой слайдер отзывов на чистый CSS

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

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

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

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

Установка:

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

Код

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

HTML

Код

<div class="kopansecegun">
  <input type="radio" name="kopansecegun" title="slide1" checked="checked" class="kopansecegun__nav"/>
  <input type="radio" name="kopansecegun" title="slide2" class="kopansecegun__nav"/>
  <input type="radio" name="kopansecegun" title="slide3" class="kopansecegun__nav"/>
  <input type="radio" name="kopansecegun" title="slide4" class="kopansecegun__nav"/>
  <div class="kopansecegun__ccpisicon">
  <div class="kopansecegun__cegunpisicing"><i class="kopansecegun__image fa fa-codepen"></i>
  <h2 class="kopansecegun__simusceguns">ZorNet - портал для вебмастера</h2>
  <p class="kopansecegun__omnismus">Здесь написан первый отзыв на материал.</p>
  </div>
  <div class="kopansecegun__cegunpisicing"><i class="kopansecegun__image fa fa-newspaper-o"></i>
  <h2 class="kopansecegun__simusceguns">Ключевая фраза</h2>
  <p class="kopansecegun__omnismus">Второй отзыв покупателя.</p>
  </div>
  <div class="kopansecegun__cegunpisicing"><i class="kopansecegun__image fa fa-television"></i>
  <h2 class="kopansecegun__simusceguns">Название</h2>
  <p class="kopansecegun__omnismus">Также можнте написать пожелание на сайте.</p>
  </div>
  <div class="kopansecegun__cegunpisicing"><i class="kopansecegun__image fa fa-diamond"></i>
  <h2 class="kopansecegun__simusceguns">Ключевое слово</h2>
  <p class="kopansecegun__omnismus">Очередной отзыв, где сам веь разработчик выставлчяет нумерацию.</p>
  </div>
  </div>
</div>

CSS

Код

.kopansecegun {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.kopansecegun__nav {
  width: 12px;
  height: 12px;
  margin: 2rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid #989393;
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #101010, 0 0 0 0 rgba(45, 43, 43, 0);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.kopansecegun__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
  animation: check 0.4s linear forwards;
}
.kopansecegun__nav:checked:nth-of-type(1) ~ .kopansecegun__ccpisicon {
  left: 0%;
}
.kopansecegun__nav:checked:nth-of-type(2) ~ .kopansecegun__ccpisicon {
  left: -100%;
}
.kopansecegun__nav:checked:nth-of-type(3) ~ .kopansecegun__ccpisicon {
  left: -200%;
}
.kopansecegun__nav:checked:nth-of-type(4) ~ .kopansecegun__ccpisicon {
  left: -300%;
}
.kopansecegun__ccpisicon {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
}
.kopansecegun__cegunpisicing {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.kopansecegun__image {
  font-size: 2.7rem;
  color: #2196F3;
}
.kopansecegun__simusceguns {
  font-weight: 500;
  margin: 2rem 0 1rem;
  text-shadow: 0 1px 1px rgba(27, 26, 26, 0.1);
  text-transform: uppercase;
}
.kopansecegun__omnismus {
  color: #736f6f;
  margin-bottom: 3rem;
  max-width: 415px;
}

@-webkit-keyframes check {
  50% {
  outline-color: #333;
  box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
  outline-color: #333;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

@keyframes check {
  50% {
  outline-color: #333;
  box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
  outline-color: #333;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

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

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

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

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

23 Марта 2019 Загрузок: 1 Просмотров: 2101 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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