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>
charset="utf-8"> data-yashareType="button" data-
yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus">
data-mrc-config="{'cm' : '1', 'sz' : '20', 'st' : '1', 'tp' : 'mm'}">Нравится
|
|
| |