» »

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


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

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

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

Слайдер для сайта

Для начало давайте пропишем стили, которые здесь, копируем и ставим в CSS вашего сайта.

И переходим к основе, что где ставить, но можно даже в шапку, просто сделать размер меньше.

Каркас:

Код
<div id="slider-shadow">  
  <div id="slider">  
  <div id="mask">  
  <ul>  
  <li>  
  <a href="#"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/Q4jvbfM.png" /></a>
<span><h2>ZorNet.Ru-1</h2></span>  
  </li>  
  <li>  
  <a href="#"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/5wgGHEm.jpg" /></a>  
  <span><h2>ZorNet.Ru-2</h2></span>  
  </li>  
  <li>  
  <a href="#"><img src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/CsbP4SS.jpg" /></a>  
  <span><h2>ZorNet.Ru-3</h2></span>  
  </li>  
  <li>  
   
  </li>  
  </ul>  
  </div>  
  <div id="progress">  
  </div>  
  <div id="overlay">  
  </div>  
  <div id="pause">  
  </div>  
  </div>  
</div>


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

11.05.2016 Просмотров: 509 Комментарий: (9)

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

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

Комментарий: 9
Сафрон
Сафрон 11.05.2016 06:301
0
Костен, ты только с модальных окон слез, теперь на слайдеры. biggrin
Kosten
Kosten 11.05.2016 06:392
0
Сафрон, ты о чем, видишь на стилях, запелить было не проблема и на демку выставить.
XemorDio
XemorDio 11.05.2016 07:023
0
Ого, и это всё на CSS о_О
Первый раз вижу такое biggrin
Kosten
Kosten 11.05.2016 07:184
0
Но с демонстрацией все ровно вышло, что можно посмотреть.
feliksteg
feliksteg 11.05.2016 18:535
0
Так сделано стандартно, только не понимаю для чего эффект при наведение. Также там две ссылки не понятные, толи битые, толи так нужно, если их убрать интересно работать будет.
Kosten
Kosten 11.05.2016 19:376
0
Да хрен его знает, не стал убирать, в демо они присутствуют, так как весь код с него.
Сопрано
Сопрано 11.05.2016 19:457
0
Но видать нужные, здесь точно не сказать, что битые, просто выводят, кудато, вот это не понятно.
egoistprovokator
egoistprovokator 28.09.2016 17:248
0
все классно но можно ли ссs в файле добавить если да то как а то у меня на юкоз пишет максимум символов
FeStemBer
FeStemBer 28.09.2016 17:299
0
Все можно, если знать как, общем Здесь все описано как делать.
avatar