Красивый и эффектный слайдер на CSS3

Эффектный слайдер работающий на CSS3 без использования JavaScript.
Слайдер работает в автоматическом режиме смены изображений, с функцией паузы при наведении мыши.
Помимо изображений в слайдер можно ставить что угодно, начиная с обычной текстовой информации, заканчивая IFrame.
Каждый блок можно подписать своим названием.

Простая разметка HTML.

Код: Выделить всё

<div id="slider-shadow"> 
	<div id="slider"> 
		<div id="mask"> 
			<ul> 
				<li>
					<a href="#"><img src="/images/1.png" /></a>
				</li> 
				<li>
					<a href="#"><img src="/images/2.png" /></a> 
					<span><h2>Изображение</h2></span> 
				</li> 
				<li> 
					<iframe src="http://cabinetadmina.ru" width="600" height="200" frameborder="0" scrolling="no"></iframe> 
					<span><h2>IFrame</h2></span> 
				</li> 
				<li> 
					<a href="#"><img src="/images/3.png" /></a> 
				</li> 
			</ul> 
		</div> 
		<div id="progress"></div> 
		<div id="overlay"></div> 
		<div id="pause"></div> 
	</div> 
</div>
Стили для нашего слайдера.

Код: Выделить всё

#slider { 
	width: 600px; 
	height: 200px; 
	margin: 40px auto 0; 
	overflow: visible; 
	background-color: #362c30; 
	border: 10px solid #362c30; 
	-moz-transition: all 150ms ease-in; 
	-webkit-transition: all 150ms ease-in; 
	-o-transition: all 150ms ease-in; 
	position: relative; 
	transform: rotate(0deg); 
	-ms-transform: rotate(0deg); 
	-moz-transform: rotate(0deg); 
	-webkit-transform: rotate(0deg); 
	-o-transform: rotate(0deg); 
} 
#mask { 
	overflow: hidden; 
} 
#slider:hover { 
	background-color: #cccccc; 
	border: 10px solid #cccccc; 
	-webkit-animation: rotatey 400ms ease-out; 
	-moz-animation: rotatey 400ms ease-out; 
} 
#slider:hover #pause { 
	opacity: 1; 
} 
#slider:hover #progress { 
	background-color: rgba(255,255,255,0.0); 
} 
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { 
	-moz-animation-play-state: paused; 
	-webkit-animation-play-state: paused; 
} 
#pause { 
	width: 600px; 
	height: 200px; 
	position: absolute; 
	top: 0; 
	opacity: 0; 
	background-image: url('/images/paused.png'); 
	background-position: 566px 10px; 
	background-repeat: no-repeat; 
	pointer-events: none; 
	-moz-transition: all 150ms ease-in; 
	-webkit-transition: all 150ms ease-in; 
	-o-transition: all 150ms ease-in; 
} 
#progress { 
	width: 1px; 
	height: 1px; 
	background-color: #ffd000; 
	-moz-animation: progress 18s infinite; 
	-webkit-animation: progress 18s infinite; 
	position: relative; 
	top: -1px; 
	-moz-transition: all 150ms ease-in; 
	-webkit-transition: all 150ms ease-in; 
	-o-transition: all 150ms ease-in; 
} 
#overlay { 
	width: 600px; 
	height: 200px; 
	position: absolute; 
	top: 0; 
	background-image: url('/images/overlay.png'); 
	background-position: center; 
	background-repeat: no-repeat; 
	pointer-events: none; 
	-moz-transition: all 150ms ease-in; 
	-webkit-transition: all 150ms ease-in; 
	-o-transition: all 150ms ease-in; 
	opacity: 0.5; 
	-moz-animation: overlay-fade 18s infinite; 
	-webkit-animation: overlay-fade 18s infinite; 
} 
#slider ul { 
	width: 2400px; 
	list-style: none; 
	padding: 0; 
	margin: 0; 
	-moz-animation: slide-animation 18s infinite; 
	-webkit-animation: slide-animation 18s infinite; 
	position: relative; 
	left: 0px; 
} 
#slider li { 
	display: inline; 
	width: 600px; 
	height: 200px; 
	margin: 0; 
	padding: 0; 
	float: left; 
	position: relative; 
	background-image: url('/images/loader.gif'); 
	background-position: 50% 50%; 
	background-repeat: no-repeat; 
} 
#slider li:last-of-type { 
	background-color: #362c30; 
} 
#slider li a { 
	display: block; 
	text-decoration: none; 
} 
#slider li span { 
	display: block; 
	width: 560px; 
	padding: 15px 20px; 
	position: absolute;  
	bottom: 0;  
	left: 0; 
	background-color: rgba(54,44,48,0.6); 
	border-top: 1px solid #362c30; 
	text-shadow: 1px 1px 1px #362c30; 
	pointer-events: none; 
	text-align: left; 
}
#slider ul li span h2 { 
	font-size: 24px; 
	line-height: 24px; 
	color: #fff; 
	font-weight: normal; 
	font-family: 'Communist-Regular'; 
	text-shadow: 1px 1px 1px #362c30; 
}
#slider-shadow { 
	width: 100%; 
	height: 260px; 
	background-image: url('/images/slider-shadow.png'); 
	background-position: center bottom; 
	background-repeat: no-repeat; 
	margin: 10px auto 0; 
}
@-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;} 
} 
@-moz-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;} 
} 
@-webkit-keyframes progress { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:600px; opacity:1;} 
22.5% {width:600px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:600px; opacity:1;} 
47.5% {width:600px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:600px; opacity:1;} 
72.5% {width:600px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:600px; opacity:1;} 
98% {width:600px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-moz-keyframes progress { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:600px; opacity:1;} 
22.5% {width:600px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:600px; opacity:1;} 
47.5% {width:600px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:600px; opacity:1;} 
72.5% {width:600px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:600px; opacity:1;} 
98% {width:600px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-webkit-keyframes rotatey { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-moz-keyframes rotatey { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-webkit-keyframes overlay-fade { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
} 
@-moz-keyframes overlay-fade { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
}

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

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

romaamor 18 янв 2014, 03:50 Сообщение

Поставил себе в шапку эту фишку с рекламными блоками. Но блин, они, блоки, останавлеваются на половине. Еак исправить ? Что за это отвечает ? И как убрать ту жолтую полоску ? Или хотя бы подогнать по длине. Посмотреть можно у меня на форуме в шапке. Блогодарствую.
  • 0

CabinetAdmin 18 янв 2014, 06:11 Сообщение

Меняй значения width: 600px; в разных местах кода.
Потом начиная от @-webkit-keyframes slide-animation { и всё вниз, там менять значения, подгонять.
Например был блок width:600px;, нам нужно 800, меняем в этом месте и везде где есть это же значение (и left:-600px; тоже). Потом меняем left:-1200px;, так как блок теперь 800, то вместо 1200 ставим 1600 - left:-1600px;, следующее значение для left плюс ещё 800 - left:-2200px;...
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 18 янв 2014, 06:13 Сообщение

Сейчас буду ковырять. :drink:
  • 0

romaamor 18 янв 2014, 07:18 Сообщение

Блин, получается одна пустая ячейка. Если добавить еще один блок рекламы то она всеравно пустая а в конце вылазят сразу два блока. :(
  • 0

CabinetAdmin 18 янв 2014, 08:38 Сообщение

Я так полагаю где-то значения не правильные... :unknown
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 18 янв 2014, 09:20 Сообщение

CabinetAdmin » 39 минут назад писал(а):Я так полагаю где-то значения не правильные..
Та я уже устал перепроверять. Может я что то упустил ? Шерина 728, толщина 90.

Код: Выделить всё

#slider { 
   width: 728px; 
   height: 90px; 
   margin: 10px auto 0; 
   overflow: visible; 
   background-color: #362c30; 
   border: 10px solid #362c30; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
   position: relative; 
   transform: rotate(0deg); 
   -ms-transform: rotate(0deg); 
   -moz-transform: rotate(0deg); 
   -webkit-transform: rotate(0deg); 
   -o-transform: rotate(0deg); 
} 
#mask { 
   overflow: hidden; 
} 
#slider:hover { 
   background-color: #cccccc; 
   border: 10px solid #cccccc; 
   -webkit-animation: rotatey 400ms ease-out; 
   -moz-animation: rotatey 400ms ease-out; 
} 
#slider:hover #pause { 
   opacity: 1; 
} 
#slider:hover #progress { 
   background-color: rgba(255,255,255,0.0); 
} 
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { 
   -moz-animation-play-state: paused; 
   -webkit-animation-play-state: paused; 
} 
#pause { 
   width: 728px; 
   height: 90px; 
   position: absolute; 
   top: 0; 
   opacity: 0; 
   background-image: url('/images/paused.png'); 
   background-position: 566px 10px; 
   background-repeat: no-repeat; 
   pointer-events: none; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
} 
#progress { 
   width: 1px; 
   height: 1px; 
   background-color: #ffd000; 
   -moz-animation: progress 18s infinite; 
   -webkit-animation: progress 18s infinite; 
   position: relative; 
   top: -1px; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
} 
#overlay { 
   width: 728px; 
   height: 90px; 
   position: absolute; 
   top: 0; 
   background-image: url('/images/overlay.png'); 
   background-position: center; 
   background-repeat: no-repeat; 
   pointer-events: none; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
   opacity: 0.5; 
   -moz-animation: overlay-fade 18s infinite; 
   -webkit-animation: overlay-fade 18s infinite; 
} 
#slider ul { 
   width: 2184px; 
   list-style: none; 
   padding: 0; 
   margin: 0; 
   -moz-animation: slide-animation 18s infinite; 
   -webkit-animation: slide-animation 18s infinite; 
   position: relative; 
   left: 0px; 
} 
#slider li { 
   display: inline; 
   width: 728px; 
   height: 90px; 
   margin: 0; 
   padding: 0; 
   float: left; 
   position: relative; 
   background-image: url('/images/loader.gif'); 
   background-position: 50% 50%; 
   background-repeat: no-repeat; 
} 
#slider li:last-of-type { 
   background-color: #362c30; 
} 
#slider li a { 
   display: block; 
   text-decoration: none; 
} 
#slider li span { 
   display: block; 
   width: 90px; 
   padding: 15px 20px; 
   position: absolute;  
   bottom: 0;  
   left: 0; 
   background-color: rgba(54,44,48,0.6); 
   border-top: 1px solid #362c30; 
   text-shadow: 1px 1px 1px #362c30; 
   pointer-events: none; 
   text-align: left; 
}
#slider ul li span h2 { 
   font-size: 24px; 
   line-height: 24px; 
   color: #fff; 
   font-weight: normal; 
   font-family: 'Communist-Regular'; 
   text-shadow: 1px 1px 1px #362c30; 
}
#slider-shadow { 
   width: 100%; 
   height: 90px; 
   background-image: url('/images/slider-shadow.png'); 
   background-position: center bottom; 
   background-repeat: no-repeat; 
   margin: 10px auto 0; 
}
@-webkit-keyframes slide-animation { 
0% {opacity:0;} 
2% {opacity:1;} 
20% {left:0px; opacity:1;} 
22.5% {opacity:0.6;} 
25% {left:-728px; opacity:1;} 
45% {left:-728px; opacity:1;} 
47.5% {opacity:0.6;} 
50% {left:-1456px; opacity:1;} 
70% {left:-1456px; opacity:1;} 
72.5% {opacity:0.6;} 
75% {left:-2184px; opacity:1;} 
95% {opacity:1;} 
98% {left:-2184px; opacity:0;} 
100% {left:0px; opacity:0;} 
} 
@-moz-keyframes slide-animation { 
0% {opacity:0;} 
2% {opacity:1;} 
20% {left:0px; opacity:1;} 
22.5% {opacity:0.6;} 
25% {left:-728px; opacity:1;} 
45% {left:-728px; opacity:1;} 
47.5% {opacity:0.6;} 
50% {left:-1456px; opacity:1;} 
70% {left:-1456px; opacity:1;} 
72.5% {opacity:0.6;} 
75% {left:-2184px; opacity:1;} 
95% {opacity:1;} 
98% {left:-2184px; opacity:0;} 
100% {left:0px; opacity:0;} 
} 
@-webkit-keyframes progress { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:728px; opacity:1;} 
22.5% {width:728px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:728px; opacity:1;} 
47.5% {width:728px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:728px; opacity:1;} 
72.5% {width:728px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:728px; opacity:1;} 
98% {width:728px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-moz-keyframes progress { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:728px; opacity:1;} 
22.5% {width:728px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:728px; opacity:1;} 
47.5% {width:728px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:728px; opacity:1;} 
72.5% {width:728px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:728px; opacity:1;} 
98% {width:728px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-webkit-keyframes rotatey { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-moz-keyframes rotatey { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-webkit-keyframes overlay-fade { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
} 
@-moz-keyframes overlay-fade { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
}
  • 0
Последний раз редактировалось romaamor 18 янв 2014, 16:17, всего редактировалось 1 раз.

CabinetAdmin 18 янв 2014, 10:45 Сообщение

Вроде бы нет, наверно дело в keyframes, в процентах, значениях... :unknown
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 22 фев 2014, 14:53 Сообщение

Надо поставить еще одну такую крутюльку. Не будет конфликтов со старой ? Или можно просто новый в кодах обозвать как то по другому. Типа

Код: Выделить всё

#slider2
  • 0

CabinetAdmin 22 фев 2014, 15:21 Сообщение

Если такой же класс, будет конфликт. Да, можно просто #slider2.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 22 фев 2014, 16:08 Сообщение

В разметке HTML как я понимаю тоже прописывать ?

Код: Выделить всё

<div id="slider2-shadow"> 
   <div id="slider2"> 
  • 0

CabinetAdmin 22 фев 2014, 16:24 Сообщение

Конечно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 22 фев 2014, 16:28 Сообщение

Спасибо. Буду ночью ковыряться. :)
  • 0

romaamor 23 фев 2014, 18:28 Сообщение

Что то конфликтуют. Так надо ?

Код: Выделить всё

#slider2 { 
   width: 225px; 
   height: 200px; 
   margin: 40px auto 0; 
   overflow: visible; 
   background-color: #362c30; 
   border: 10px solid #362c30; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
   position: relative; 
   transform: rotate(0deg); 
   -ms-transform: rotate(0deg); 
   -moz-transform: rotate(0deg); 
   -webkit-transform: rotate(0deg); 
   -o-transform: rotate(0deg); 
} 
#mask2 { 
   overflow: hidden; 
} 
#slider2:hover { 
   background-color: #cccccc; 
   border: 10px solid #cccccc; 
   -webkit-animation: rotatey 400ms ease-out; 
   -moz-animation: rotatey 400ms ease-out; 
} 
#slider2:hover #pause { 
   opacity: 1; 
} 
#slider2:hover #progress { 
   background-color: rgba(255,255,255,0.0); 
} 
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay { 
   -moz-animation-play-state: paused; 
   -webkit-animation-play-state: paused; 
} 
#pause2 { 
   width: 225px; 
   height: 200px; 
   position: absolute; 
   top: 0; 
   opacity: 0; 
   background-image: url('/images/paused.png'); 
   background-position: 566px 10px; 
   background-repeat: no-repeat; 
   pointer-events: none; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
} 
#progress2 { 
   width: 1px; 
   height: 1px; 
   background-color: #ffd000; 
   -moz-animation: progress 18s infinite; 
   -webkit-animation: progress 18s infinite; 
   position: relative; 
   top: -1px; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
} 
#overlay2 { 
   width: 225px; 
   height: 200px; 
   position: absolute; 
   top: 0; 
   background-image: url('/images/overlay.png'); 
   background-position: center; 
   background-repeat: no-repeat; 
   pointer-events: none; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
   opacity: 0.5; 
   -moz-animation: overlay-fade 18s infinite; 
   -webkit-animation: overlay-fade 18s infinite; 
} 
#slider2 ul { 
   width: 2400px; 
   list-style: none; 
   padding: 0; 
   margin: 0; 
   -moz-animation: slide-animation 18s infinite; 
   -webkit-animation: slide-animation 18s infinite; 
   position: relative; 
   left: 0px; 
} 
#slider2 li { 
   display: inline; 
   width: 600px; 
   height: 200px; 
   margin: 0; 
   padding: 0; 
   float: left; 
   position: relative; 
   background-image: url('/images/loader.gif'); 
   background-position: 50% 50%; 
   background-repeat: no-repeat; 
} 
#slider2 li:last-of-type { 
   background-color: #362c30; 
} 
#slider2 li a { 
   display: block; 
   text-decoration: none; 
} 
#slider2 li span { 
   display: block; 
   width: 560px; 
   padding: 15px 20px; 
   position: absolute;  
   bottom: 0;  
   left: 0; 
   background-color: rgba(54,44,48,0.6); 
   border-top: 1px solid #362c30; 
   text-shadow: 1px 1px 1px #362c30; 
   pointer-events: none; 
   text-align: left; 
}
#slider2 ul li span h2 { 
   font-size: 24px; 
   line-height: 24px; 
   color: #fff; 
   font-weight: normal; 
   font-family: 'Communist-Regular'; 
   text-shadow: 1px 1px 1px #362c30; 
}
#slider2-shadow { 
   width: 100%; 
   height: 260px; 
   background-image: url('/images/slider-shadow.png'); 
   background-position: center bottom; 
   background-repeat: no-repeat; 
   margin: 10px auto 0; 
}
@-webkit-keyframes slide-animation2 { 
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;} 
} 
@-moz-keyframes slide-animation2 { 
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;} 
} 
@-webkit-keyframes progress2 { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:600px; opacity:1;} 
22.5% {width:600px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:600px; opacity:1;} 
47.5% {width:600px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:600px; opacity:1;} 
72.5% {width:600px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:600px; opacity:1;} 
98% {width:600px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-moz-keyframes progress2 { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:600px; opacity:1;} 
22.5% {width:600px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:600px; opacity:1;} 
47.5% {width:600px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:600px; opacity:1;} 
72.5% {width:600px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:600px; opacity:1;} 
98% {width:600px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-webkit-keyframes rotatey2 { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-moz-keyframes rotatey2 { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-webkit-keyframes overlay-fade2 { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
} 
@-moz-keyframes overlay-fade2 { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
}
и -

Код: Выделить всё

<div id="slider2-shadow"> 
   <div id="slider2"> 
      <div id="mask2"> 
         <ul> 
            <li>
               <a href="#"><img src="/images/1.png" /></a>
            </li> 
            <li>
               <a href="#"><img src="/images/2.png" /></a> 
               <span><h2>Изображение</h2></span> 
            </li> 
            <li> 
               <iframe src="http://cabinetadmina.ru" width="600" height="200" frameborder="0" scrolling="no"></iframe> 
               <span><h2>IFrame</h2></span> 
            </li> 
            <li> 
               <a href="#"><img src="/images/3.png" /></a> 
            </li> 
         </ul> 
      </div> 
      <div id="progress2"></div> 
      <div id="overlay2"></div> 
      <div id="pause2"></div> 
   </div> 
</div>
И как будет правильно
slider2-shadow или slider-shadow2 ?
  • 0

CabinetAdmin 23 фев 2014, 18:55 Сообщение

romaamor » 18 минут назад писал(а):slider2-shadow или slider-shadow2 ?
Хоть так, хоть так.

Вроде как-то так:

Код: Выделить всё

#slider2 { 
   width: 225px; 
   height: 200px; 
   margin: 40px auto 0; 
   overflow: visible; 
   background-color: #362c30; 
   border: 10px solid #362c30; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
   position: relative; 
   transform: rotate(0deg); 
   -ms-transform: rotate(0deg); 
   -moz-transform: rotate(0deg); 
   -webkit-transform: rotate(0deg); 
   -o-transform: rotate(0deg); 
} 
#mask2 { 
   overflow: hidden; 
} 
#slider2:hover { 
   background-color: #cccccc; 
   border: 10px solid #cccccc; 
   -webkit-animation: rotatey2 400ms ease-out; 
   -moz-animation: rotatey2 400ms ease-out; 
} 
#slider2:hover #pause2 { 
   opacity: 1; 
} 
#slider2:hover #progress2 { 
   background-color: rgba(255,255,255,0.0); 
} 
#slider2:hover ul, #slider2:hover #progress2, #slider2:hover #overlay2 { 
   -moz-animation-play-state: paused; 
   -webkit-animation-play-state: paused; 
} 
#pause2 { 
   width: 225px; 
   height: 200px; 
   position: absolute; 
   top: 0; 
   opacity: 0; 
   background-image: url('/images/paused.png'); 
   background-position: 566px 10px; 
   background-repeat: no-repeat; 
   pointer-events: none; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
} 
#progress2 { 
   width: 1px; 
   height: 1px; 
   background-color: #ffd000; 
   -moz-animation: progress2 18s infinite; 
   -webkit-animation: progress2 18s infinite; 
   position: relative; 
   top: -1px; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
} 
#overlay2 { 
   width: 225px; 
   height: 200px; 
   position: absolute; 
   top: 0; 
   background-image: url('/images/overlay.png'); 
   background-position: center; 
   background-repeat: no-repeat; 
   pointer-events: none; 
   -moz-transition: all 150ms ease-in; 
   -webkit-transition: all 150ms ease-in; 
   -o-transition: all 150ms ease-in; 
   opacity: 0.5; 
   -moz-animation: overlay-fade2 18s infinite; 
   -webkit-animation: overlay-fade2 18s infinite; 
} 
#slider2 ul { 
   width: 2400px; 
   list-style: none; 
   padding: 0; 
   margin: 0; 
   -moz-animation: slide-animation2 18s infinite; 
   -webkit-animation: slide-animation2 18s infinite; 
   position: relative; 
   left: 0px; 
} 
#slider2 li { 
   display: inline; 
   width: 600px; 
   height: 200px; 
   margin: 0; 
   padding: 0; 
   float: left; 
   position: relative; 
   background-image: url('/images/loader.gif'); 
   background-position: 50% 50%; 
   background-repeat: no-repeat; 
} 
#slider2 li:last-of-type { 
   background-color: #362c30; 
} 
#slider2 li a { 
   display: block; 
   text-decoration: none; 
} 
#slider2 li span { 
   display: block; 
   width: 560px; 
   padding: 15px 20px; 
   position: absolute;  
   bottom: 0;  
   left: 0; 
   background-color: rgba(54,44,48,0.6); 
   border-top: 1px solid #362c30; 
   text-shadow: 1px 1px 1px #362c30; 
   pointer-events: none; 
   text-align: left; 
}
#slider2 ul li span h2 { 
   font-size: 24px; 
   line-height: 24px; 
   color: #fff; 
   font-weight: normal; 
   font-family: 'Communist-Regular'; 
   text-shadow: 1px 1px 1px #362c30; 
}
#slider2-shadow { 
   width: 100%; 
   height: 260px; 
   background-image: url('/images/slider-shadow.png'); 
   background-position: center bottom; 
   background-repeat: no-repeat; 
   margin: 10px auto 0; 
}
@-webkit-keyframes slide-animation2 { 
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;} 
} 
@-moz-keyframes slide-animation2 { 
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;} 
} 
@-webkit-keyframes progress2 { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:600px; opacity:1;} 
22.5% {width:600px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:600px; opacity:1;} 
47.5% {width:600px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:600px; opacity:1;} 
72.5% {width:600px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:600px; opacity:1;} 
98% {width:600px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-moz-keyframes progress2 { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:600px; opacity:1;} 
22.5% {width:600px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:600px; opacity:1;} 
47.5% {width:600px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:600px; opacity:1;} 
72.5% {width:600px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:600px; opacity:1;} 
98% {width:600px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-webkit-keyframes rotatey2 { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-moz-keyframes rotatey2 { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-webkit-keyframes overlay-fade2 { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
} 
@-moz-keyframes overlay-fade2 { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
}
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!