ZorNet.Ru — сайт для вебмастера » HTML и CSS » Дизайн слайд-шоу изображений на чистом CSS

Дизайн слайд-шоу изображений на чистом CSS

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

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

Как пример, рассмотрим один слайд:

Простой и адаптивный слайдер на CSS для сайта

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

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

Установка:

HTML

Код

<slider>
 <slide>ZORNET.RU</slide>
 <slide>САЙТЫ</slide>
 <slide>блоги</slide>
 <slide>❤️</slide>
</slider>

CSS

Код

body, html {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
}

slider {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1f1f1f;
  overflow: hidden;
  position: absolute;
}

slider > * {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 100%;
  background-color: #1f1f1f;
  -webkit-animation: slide 12s infinite;
  -moz-animation: slide 12s infinite;
  -o-animation: slide 12s infinite;
  animation: slide 12s infinite;
  overflow: hidden;
}

slide:nth-child(1) {
  left: 0%;
  -webkit-animation-delay: -1s;
  -moz-animation-delay: -1s;
  -o-animation-delay: -1s;
  animation-delay: -1s;
  background-image: url(http://zornet.ru/_fr/56/0625876.jpg);
  background-size: cover;
  background-position: bottom;
}

slide:nth-child(2) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
  background-image: url(http://zornet.ru/_fr/56/8144942.jpg);
  background-size: cover;
  background-position: bottom;
}

slide:nth-child(3) {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  animation-delay: 5s;
  background-image: url(http://zornet.ru/_fr/56/7033799.jpg);
  background-size: cover;
  background-position: bottom;
}

slide:nth-child(4) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

slide p {
  font-family: 'Sue Ellen Francisco', cursive;
  font-size: 20vh;
  text-align: center;
  display: inline-block;
  width: 100%;
  margin-top: 30vh;
  color: white;
  text-shadow: 0px 0px 500px black;
}

slide:nth-child(4) p {
  color: red;
}

@-webkit-keyframes slide {
  0% {left: 100%; width: 100%}
  5% {left: 0%;} /* IN */
  25% {left: 0%;} /*SHOW*/
  30% {left: -100%; width: 100%;} /*OUT*/
  30.00001% {left: -100%; width: 0%}
  100% {left: 100%;width: 0%;} /*SLEEP*/
}

@-moz-keyframes slide {
  0% {left: 100%; width: 100%}
  5% {left: 0%;} /* IN */
  25% {left: 0%;} /*SHOW*/
  30% {left: -100%; width: 100%;} /*OUT*/
  30.00001% {left: -100%; width: 0%}
  100% {left: 100%;width: 0%;} /*SLEEP*/
}

@-o-keyframes slide {
  0% {left: 100%; width: 100%}
  5% {left: 0%;} /* IN */
  25% {left: 0%;} /*SHOW*/
  30% {left: -100%; width: 100%;} /*OUT*/
  30.00001% {left: -100%; width: 0%}
  100% {left: 100%;width: 0%;} /*SLEEP*/
}

@keyframes slide {
  0% {left: 100%; width: 100%}
  5% {left: 0%;} /* IN */
  25% {left: 0%;} /*SHOW*/
  30% {left: -100%; width: 100%;} /*OUT*/
  30.00001% {left: -100%; width: 0%}
  100% {left: 100%;width: 0%;} /*SLEEP*/
}

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

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

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

14 Мая 2021 Загрузок: 2 Просмотров: 1420 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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