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

Светлый слайдер контента при помощи HTML и CSS

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

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

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

HTML

Код

<div id="saztulom_dkituntas">
<ul>
  <li>
  <div class="kalpetsa-lutvestim">
  <h4>ZorNet: Создание сайта на uCoz</h4>
  <p>Здесь идет первый слайт с описанием или материалом</p>
  </div>
  </li>
  <li>
  <div class="kalpetsa-lutvestim">
  <h4>Графика для сайта</h4>
  <p>Это уже второе, что также описываем и оформляем.</p>
  </div>
  </li>
  <li>
  <div class="kalpetsa-lutvestim">
  <h4>Шаблоны для uCoz</h4>
  <p>Третье, которое аналогично первым</p>
  </div>
  </li>
  <li>
  <div class="kalpetsa-lutvestim">
  <h4>Скрипты для uCoz</h4>
  <p>Также четвертое, что можно сделать, то количество, что вам нужно.</p>
  </div>
  </li>
</ul>
</div>

CSS

Код

a
{
  text-decoration: none;
  color: #0e1c5a;
}

a:hover
{
  border-bottom: 1px dashed #c17d1e;
  color: #b5751b;
}

#saztulom_dkituntas, ul
{
  height: 199px;
}

#saztulom_dkituntas {
  margin: auto;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgba(27, 25, 25, 0.35);
  margin-top: 47px;
  border-radius: 10px;
  box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.52);
  position: relative;
  width: 600px;
}

#saztulom_dkituntas li
{
  float: left;
  position: relative;
  width: 600px;
  display: inline-block;
  height: 199px;
}

#saztulom_dkituntas ul {
  list-style: none;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 9000px;
  transition: left .3s cubic-bezier(0, 0, 0.79, 0.96);
  -moz-transition: left .3s linear;
  -o-transition: left .3s linear;
  -webkit-transition: left .3s cubic-bezier(0, 0, 0.84, 0.99);
  margin-left: -25px;
  font-family: century gothic;
  color: #353131;
}

/*** Content ***/

.kalpetsa-lutvestim
{
  margin: 0 auto;
  padding: 0;
  width: 550px;
  min-height: 180px;
  border-bottom: 1px solid #ccc;
}

.kalpetsa-lutvestim h4 {
  color: #0c5f80;
  text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.52);
}

.kalpetsa-lutvestim p {
  margin: 5px 1px;
  font-weight: semi-bold;
  line-height: 143%;
  text-align: justify;
}

/*** target hooks ****/

@-webkit-keyframes slide-animation {
  0% {opacity:0;}
  2% {opacity:1;}
  20% {left:0px; opacity:1;}
  22.5% {opacity:0.6;}
  25% {left:-600px; opacity:1;}
  45% {left:-600px; opacity:1;}
  47.5% {opacity:0.6;}
  50% {left:-1200px; opacity:1;}
  70% {left:-1200px; opacity:1;}
  72.5% {opacity:0.6;}
  75% {left:-1800px; opacity:1;}
  95% {opacity:1;}
  98% {left:-1800px; opacity:0;}
  100% {left:0px; opacity:0;}
}

#saztulom_dkituntas ul
{
  -webkit-animation: slide-animation 25s infinite;
}

/* use to paused the content on mouse over */

#saztulom_dkituntas ul:hover
{
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
}

На этом вся установка, что теперь можете просмотреть в реальности как все будет работать.

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

30 Апреля 2018 Просмотров: 2022 Комментариев: (0)

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

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

Kosten

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