Красивый слайдер сайта создан на 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> Пишем под каждое изображение его название, но а точнее название темы, на которую вы можете перейти. Все находится в прозрачном тоне, и очень красиво и все понятно видно.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 9 | |
| |
