Главная » Файлы » Прочие скрипты » CSS |
Необычная галерея с 3D поворотом блоков при наведении на CSS3 для uCoz
24.06.14, 16:34:36 | |
Очень даже неплохая галерея с 3D поворотом блока при наведении и всплывающим модальным окном с описанием для вашего сайта. Галерея очень проста в установке и использует лишь возможности CSS3 Для начала посмотрите ДЕМО Моё тестирование в фидле:ДЕМО Установка: Туда, где должна быть галерея, поместите следующий код: Код <link rel="stylesheet" href="/css/css3_3d.css" media="screen" /> <ul id="grid" class="group"> <li> <div class="details"> <h3>Заголовок 1</h3> <a class="more" href="#info1">Подробнее...</a> </div> <a class="more" href="#info1"><img src="Ссылка на картинку" /></a> </li> <li> <div class="details"> <h3>Заголовок 2</h3> <a class="more" href="#info2">Подробнее...</a> </div> <a class="more" href="#info2"><img src="Ссылка на картинку" /></a> </li> <li> <div class="details"> <h3>Заголовок 3</h3> <a class="more" href="#info3">Подробнее...</a> </div> <a class="more" href="#info3"><img src="Ссылка на картинку" /></a> </li> <li> <div class="details"> <h3>Заголовок 4</h3> <a class="more" href="#info4">Подробнее...</a> </div> <a class="more" href="#info4"><img src="Ссылка на картинку" /></a> </li> <li> <div class="details"> <h3>Заголовок 5</h3> <a class="more" href="#info5">Подробнее...</a> </div> <a class="more" href="#info5"><img src="Ссылка на картинку" /></a> </li> <li> <div class="details"> <h3>Заголовок 6</h3> <a class="more" href="#info6">Подробнее...</a> </div> <a class="more" href="#info6"><img src="Ссылка на картинку" /></a> </li> </ul> <ul id="information"> <li id="info1"> <div> <h3>Заголовок 1</h3> Описание к блоку 1</p> <a href="#" class="close">x</a> </div> <span class="backface"></span> </li> <li id="info2"> <div> <h3>Заголовок 2</h3> Описание к блоку 2</p> <a href="#" class="close">x</a> </div> <span class="backface"></span> </li> <li id="info3"> <div> <h3>Заголовок 3</h3> Описание к блоку 3</p> <a href="#" class="close">x</a> </div> <span class="backface"></span> </li> <li id="info4"> <div> <h3>Заголовок 4</h3> Описание к блоку 4</p> <a href="#" class="close">x</a> </div> <span class="backface"></span> </li> <li id="info5"> <div> <h3>Заголовок 5</h3> Описание к блоку 5</p> <a href="#" class="close">x</a> </div> <span class="backface"></span> </li> <li id="info6"> <div> <h3>Заголовок 6</h3> Описание к блоку 6</p> <a href="#" class="close">x</a> </div> <span class="backface"></span> </li> </ul> Стиль из прикреплённого архива залейте в папку css Материал адаптирован и подготовлен Apocalypse | |
Просмотров: 431 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |