Заработок в интернете и раскрутка вашего сайта Вторник, 17.10.2017, 19:56
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Создание сайта » HTML коды для uCoz » Фото-слайдер книжка-аккордеон на uCoz (Фото-слайдер книжка-аккордеон на uCoz)
Фото-слайдер книжка-аккордеон на uCoz
adminДата: Суббота, 21.12.2013, 16:07 | Сообщение # 1
Главный админ
Группа: Администраторы
Сообщений: 336
Награды: 0
Репутация: 1
Статус: Offline
Фото-слайдер книжка-аккордеон на uCoz

Очередная уникальная адаптация различных классных готовых решений для uCoz сайтов от сайта rabota-i.ucoz.ru и на этот раз это удивительно красивый фото-слайдер книжка-аккордеон для сайта бесплатного хостинга uCoz, который сделан исключительно на CSS 3 и HTML кодах без использования каких-либо скриптов. Очень полезная штука, при правильном подходе сможет украсить любой сайт и привлечь большее количество пользователей.

При нажатие на одну из картинок в этом слайдере - она плавко открывается, как бы листая книжку. Очень красиво и прикольно. Смотрится отлично.

Не забудьте сменить в коде Ссылка на картинку на саму ссылку на картинку в слайдере.

Установка:

В самый низ вашего css вставляйте:
Код
figure {  
margin: 0;  
-webkit-margin-before: 0;  
-webkit-margin-after: 0;  
-webkit-margin-start: 0;  
-webkit-margin-end: 0;  
}  

.ia-container {  
width: 685px;  
margin: 20px auto;  
overflow: hidden;  
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.08);  
border: 7px solid rgba(255, 255, 255, 0.6);  
}  
.ia-container figure {  
position: absolute;  
top: 0;  
left: 50px;  
/* width of visible piece */  
width: 335px;  
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);  
-webkit-transition: all 0.3s ease-in-out;  
-moz-transition: all 0.3s ease-in-out;  
-o-transition: all 0.3s ease-in-out;  
-ms-transition: all 0.3s ease-in-out;  
transition: all 0.3s ease-in-out;  
}  
.ia-container > figure {  
position: relative;  
left: 0 !important;  
}  
.ia-container img {  
display: block;  
width: 100%;  
}  
.ia-container input {  
position: absolute;  
top: 0;  
left: 0;  
width: 50px;  
/* just cover visible part */  
height: 100%;  
cursor: pointer;  
border: 0;  
padding: 0;  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
filter: alpha(opacity=0);  
opacity: 0;  
z-index: 100;  
-webkit-appearance: none;  
-moz-appearance: none;  
appearance: none;  
}  
.ia-container input:checked {  
width: 5px;  
left: auto;  
right: 0px;  
}  
.ia-container input:checked ~ figure {  
-webkit-transition: all 0.7s ease-in-out;  
-moz-transition: all 0.7s ease-in-out;  
-o-transition: all 0.7s ease-in-out;  
-ms-transition: all 0.7s ease-in-out;  
transition: all 0.7s ease-in-out;  
left: 335px;  
}  
.ia-container figcaption {  
width: 100%;  
height: 100%;  
background: rgba(87, 73, 81, 0.1);  
position: absolute;  
top: 0px;  
-webkit-transition: all 0.2s linear;  
-moz-transition: all 0.2s linear;  
-o-transition: all 0.2s linear;  
-ms-transition: all 0.2s linear;  
transition: all 0.2s linear;  
}  
.ia-container figcaption span {  
position: absolute;  
top: 40%;  
margin-top: -30px;  
right: 20px;  
left: 20px;  
overflow: hidden;  
text-align: center;  
background: rgba(87, 73, 81, 0.3);  
line-height: 20px;  
font-size: 18px;  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
filter: alpha(opacity=0);  
opacity: 0;  
text-transform: uppercase;  
letter-spacing: 4px;  
font-weight: 700;  
padding: 20px;  
color: #fff;  
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);  
}  
.ia-container input:checked + figcaption, .ia-container input:checked:hover + figcaption {  
background: rgba(87, 73, 81, 0);  
}  
.ia-container input:checked + figcaption span {  
-webkit-transition: all 0.4s ease-in-out 0.5s;  
-moz-transition: all 0.4s ease-in-out 0.5s;  
-o-transition: all 0.4s ease-in-out 0.5s;  
-ms-transition: all 0.4s ease-in-out 0.5s;  
transition: all 0.4s ease-in-out 0.5s;  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";  
filter: alpha(opacity=99);  
opacity: 1;  
top: 50%;  
}  
.ia-container #ia-selector-last:checked + figcaption span {  
-webkit-transition-delay: 0.3s;  
-moz-transition-delay: 0.3s;  
-o-transition-delay: 0.3s;  
-ms-transition-delay: 0.3s;  
transition-delay: 0.3s;  
}  
.ia-container input:hover + figcaption {  
background: rgba(87, 73, 81, 0.03);  
}  
.ia-container input:checked ~ figure input {  
z-index: 1;  
}  
@media screen and (max-width: 720px) {  
.ia-container {  
width: 540px;  
}  
.ia-container figure {  
left: 40px;  
width: 260px;  
}  
.ia-container input {  
width: 40px;  
}  
.ia-container input:checked ~ figure {  
left: 260px;  
}  
.ia-container figcaption span {  
font-size: 16px;  
}  
}  
@media screen and (max-width: 520px) {  
.ia-container {  
width: 320px;  
}  
.ia-container figure {  
left: 20px;  
width: 180px;  
}  
.ia-container input {  
width: 20px;  
}  
.ia-container input:checked ~ figure {  
left: 180px;  
}  
.ia-container figcaption span {  
font-size: 12px;  
letter-spacing: 2px;  
padding: 10px;  
margin-top: -20px;  
}  
}


В то место, где должен быть слайдер, вставляйте:
Код
<section class="main">  
<div class="ia-container">  
<figure>  
<img src="Ссылка на картинку" alt="image01" />  
<input type="radio" name="radio-set" checked="checked" />  
<figcaption><span>Заголовок</span>  

</figcaption>  
<figure>  
<img src="Ссылка на картинку" alt="image02" />  
<input type="radio" name="radio-set" />  
<figcaption><span>Заголовок</span>  

</figcaption>  
<figure>  
<img src="Ссылка на картинку" alt="image03" />  
<input type="radio" name="radio-set" />  
<figcaption><span>Заголовок</span>  

</figcaption>  
<figure>  
<img src="Ссылка на картинку" alt="image04" />  
<input type="radio" name="radio-set" />  
<figcaption><span>Заголовок</span>  

</figcaption>  
<figure>  
<img src="Ссылка на картинку" alt="image05" />  
<input type="radio" name="radio-set" />  
<figcaption><span>Заголовок</span>  

</figcaption>  
<figure>  
<img src="Ссылка на картинку" alt="image06" />  
<input type="radio" name="radio-set" />  
<figcaption><span>Заголовок</span>  

</figcaption>  
<figure>  
<img src="Ссылка на картинку" alt="image07" />  
<input type="radio" name="radio-set" />  
<figcaption><span>Заголовок</span>  

</figcaption>  
<figure>  
<img src="Ссылка на картинку" alt="image08" />  
<input id="ia-selector-last" type="radio" name="radio-set" />  
<figcaption><span>Заголовок</span>  

</figcaption>  
</figure>  
</figure>  
</figure>  
</figure>  
</figure>  
</figure>  
</figure>  
</figure>  
</div>  
<!-- ia-container -->  
</section>



data-yashareType="button" data-

yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus">



data-mrc-config="{'cm' : '1', 'sz' : '20', 'st' : '1', 'tp' : 'mm'}">Нравится

 

Нравится







Форум » Создание сайта » HTML коды для uCoz » Фото-слайдер книжка-аккордеон на uCoz (Фото-слайдер книжка-аккордеон на uCoz)
Страница 1 из 11
Поиск:

Заработок в интернете и продвижение вашего сайта © 2013-2017
Копирование материалов сайта без согласия запрещено!

Яндекс.Метрика

СЕГОДНЯ НАС ПОСЕТИЛИ:

200