Автор

Создание лайтбокс-галереи с помощью CSS3

Создание лайтбокс-галереи с помощью CSS3


 

Галереи, как много мы уже о них писали и приводили различные примеры и конструкции. Но, как говорят, прогресс не стоит на месте, и с каждой минутой все улучшается и становиться лучше, это относиться и к галереям. В данном уроке мы рассмотрим как создать замечательную галерею миниатюр, при нажатии на которую происходит плавная анимация, и изображение раскрывается в определенную величину, казалось все примитивно, и мы такое не раз уже видели, но не так все просто, идея заключается в красивом появлении изображения, в этом и есть вся фишка данного лайтбокса.

 

ДЕМО
ИСХОДНИКИ

 

В данном уроке мы рассмотрим несколько примеров с различными эффектами появления изображения. Данная галерея отлично подойдет для любого сайта-портфолио, или простого фотосайта, которому веб-мастер хочет придать особую изюминку, которой нет в других сайтах аналогичной тематики.

 

Следует заметить, что в уроке мы будем использовать изображения, от Joanna Kustra, они используются на условиях лицензии Attribution-NonCommercial 3.0 Unported Creative Commons License.

 

Для начала мы рассмотрим структуру HTML. Сначала создадим набор миниатюр, каждая из которых имеет название, которое будет отображаться при наведении курсора. При нажатии на миниатюру, мы будем показывать большую версию изображения в блоке с классом lb-overlay, который изначально будет спрятан. Итак, мы будем использовать неупорядоченный список, где каждый элемент списка будет содержать миниатюру и блок с соответствующим большим изображением:

 

<ul class="lb-album">
 <li>
 <a href="#image-1">
 <img src="images/thumbs/1.jpg" alt="image01">
 <span>Pointe</span>
 </a>
 <div class="lb-overlay" id="image-1">
 <img src="images/full/1.jpg" alt="image01" />
 <div>
 <h3>pointe <span>/point/</h3>
 <p>Dance performed on the tips of the toes</p>
 <a href="#image-10" class="lb-prev">Предыдущий</a>
 <a href="#image-2" class="lb-next">Следующий</a>
 </div>
 <a href="#page" class="lb-close">x Закрыть</a>
 </div>
 </li>
 <li>
 <!-- ... -->
 </li>
</ul>

Якорь в миниатюрах, например, href="#image-1" будет указывать на элемент с id image-1, который представляет собой div классом lb-overlay. Для того, чтобы переходить по изображениям, мы добавим две ссылки, которые указывают на предыдущее и следующее (большое) изображение.

Для того, чтобы «закрыть» lightbox, мы будем просто кликать на ссылку с классом lb-close, которая указывает на элемент с ID page, который является, в нашем примере, тегом body.

Теперь рассмотрим стили CSS. Мы буем опускать префиксы различных браузеров для некоторых новых свойств, чтобы не перегружать статью. Но их можно, конечно, найти в исходных файлах. Ниже представлены стили нашего основного слоя, неупорядоченного списка и миниатюр:

.lb-album{
 width: 900px;
 margin: 0 auto;
 font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
}
.lb-album li{
 float: left;
 margin: 5px;
 position: relative;
}
.lb-album li > a,
.lb-album li > a img{
 display: block;
}
.lb-album li > a{
 width: 150px;
 height: 150px;
 position: relative;
 padding: 10px;
 background: #f1d2c2;
 box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
 border-radius: 4px;
}

Название каждой миниатюры будут невидимым и мы будем добавлять переход для непрозрачности, которая станет равной 1, когда мы наведем курсор мыши на якорь миниатюры. Мы будем использовать гладкий радиальный градиент в качестве фона:

.lb-album li > a span{
 position: absolute;
 width: 150px;
 height: 150px;
 top: 10px;
 left: 10px;
 text-align: center;
 line-height: 150px;
 color: rgba(27,54,81,0.8);
 text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
 font-size: 24px;
 opacity: 0;
 background:
 radial-gradient(
 center,
 ellipse cover,
 rgba(255,255,255,0.56) 0%,
 rgba(241,210,194,1) 100%
 );
 transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
 opacity: 1;
}

Слоя наложения будет иметь такой же радиальный градиент, также мы установим свойство position равное fixed, с нулевой высотой и шириной:

.lb-overlay{
 width: 0px;
 height: 0px;
 position: fixed;
 overflow: hidden;
 left: 0px;
 top: 0px;
 padding: 0px;
 z-index: 99;
 text-align: center;
 background:
 radial-gradient(
 center,
 ellipse cover,
 rgba(255,255,255,0.56) 0%,
 rgba(241,210,194,1) 100%
 );
}

Как только мы нажмем на миниатюру, мы раскроем на весь экран этот блок поверх остальных, но сначала давайте посмотрим на дочерние элементы. Давайте зададим стили для основного названия и описания:

.lb-overlay > div{
 position: relative;
 color: rgba(27,54,81,0.8);
 width: 550px;
 height: 80px;
 margin: 40px auto 0px auto;
 text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
}
.lb-overlay div h3,
.lb-overlay div p{
 padding: 0px 20px;
 width: 200px;
 height: 60px;
}
.lb-overlay div h3{
 font-size: 36px;
 float: left;
 text-align: right;
 border-right: 1px solid rgba(27,54,81,0.4);
}
.lb-overlay div h3 span,
.lb-overlay div p{
 font-size: 16px;
 font-family: Constantia, Palatino, serif;
 font-style: italic;
}
.lb-overlay div h3 span{
 display: block;
 line-height: 6px;
}
.lb-overlay div p{
 font-size: 14px;
 text-align: left;
 float: left;
 width: 260px;
}

Разместим ссылку для закрытия lightbox-a чуть выше картинки:

.lb-overlay a.lb-close{
 background: rgba(27,54,81,0.8);
 z-index: 1001;
 color: #fff;
 position: absolute;
 top: 43px;
 left: 50%;
 font-size: 15px;
 line-height: 26px;
 text-align: center;
 width: 50px;
 height: 23px;
 overflow: hidden;
 margin-left: -25px;
 opacity: 0;
 box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

Изображение будет иметь максимальную высоту 100%. Мы также добавим переход для создания полупрозрачности. Как только мы «откроем» большое изображение, прозрачность будет анимирована. Позже мы увидим, как мы можем использовать анимацию для изображения.

.lb-overlay img{
 max-height: 100%;
 position: relative;
 opacity: 0;
 box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
 transition: opacity 0.5s linear;
}

Теперь давайте зададим стили для элементов навигации:

.lb-prev, .lb-next{
 text-indent: -9000px;
 position: absolute;
 top: -32px;
 width: 24px;
 height: 25px;
 left: 50%;
 opacity: 0.8;
}
.lb-prev:hover, .lb-next:hover{
 opacity: 1;
}
.lb-prev{
 margin-left: -30px;
 background: transparent url(../images/arrows.png) no-repeat top left;
}
.lb-next{
 margin-left: 6px;
 background: transparent url(../images/arrows.png) no-repeat top right;
}

Когда мы нажимаем на якорь миниатюры, он будет указывать на соответствующее большое изображение, которое находится в блоке с классом lb-overlay. Таким образом, с целью нахождения этого элемента мы можем использовать псевдо-класс :target.

Мы добавим padding для lb-overlay и «растянем» его, установив ширину и высоту auto (это на самом деле не обязательно) и установим right и bottom равные 0px. Помните, что мы уже установили top и left раньше.

.lb-overlay:target {
 width: auto;
 height: auto;
 bottom: 0px;
 right: 0px;
 padding: 80px 100px 120px 100px;
}

Теперь мы установим прозрачность для изображения и ссылки закрытия равную 1:

.lb-overlay:target img,
.lb-overlay:target a.lb-close{
 opacity: 1;
}

Теперь рассмотрим анимацию. В первом примере мы сделали так, что изображение появляется с помощью анимации, изменяя его масштаб и увеличивает его значение непрозрачности:

.lb-overlay:target img {
 animation: fadeInScale 1.2s ease-in-out;
}
@keyframes fadeInScale {
 0% { transform: scale(0.6); opacity: 0; }
 100% { transform: scale(1); opacity: 1; }
}

Во втором примере мы создали обратный эффект, то есть масштаб изображения уменьшается:

.lb-overlay:target img {
 animation: scaleDown 1.2s ease-in-out;
}
@-webkit-keyframes scaleDown {
 0% { transform: scale(10,10); opacity: 0; }
 100% { transform: scale(1,1); opacity: 1; }
}

 

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Создание лайтбокс-галереи с помощью CSS3

Предлагаю вам, на мой взгляд, стильные и креативные SVG иконки с длинными тенями (46 шт.). Это коллекция иконок, распространяемых под лицензионным соглашением Creative Commons Attribution, а это значит, что вы можете использовать их бесплатно как в личных, так и в коммерческих проектах.


Создание лайтбокс-галереи с помощью CSS3

Сделаем необычные кнопки с использованием только одного тега ссылки, и конечно же благодаря CSS3.

В статье не будут учитываться префиксы для разных браузеров, но в исходниках вы их найдете.


Создание лайтбокс-галереи с помощью CSS3

В данном уроке мы рассмотрим как можно стилизовать подвал, или как его еще называют, футер сайта. Если вы присматривались, то внизу сайта можно найти схожие ссылки, которые находятся в панели навигации, это делается с целью упростить навигацию на сайте, чтобы вы не возвращались в самое начало. Мы создадим фиксированную  панель в подвале сайта с отзывчивым интерфейсом, кроме этого добавим несколько социальных иконок. Кроме этого панель легко настроить под цветовой интерфейс сайта.


Создание лайтбокс-галереи с помощью CSS3

Интересные плагины, которые вы сможете использовать при создании навигации в ваших проектах.

Представляю вашему вниманию jQuery, Mootools, CSS меню, выполненные в различных вариантах и стилевых исполнениях: вертикальные и горизонтальные меню,  меню c анимированными JavaScript эффектами, круговые меню, графические меню, прокручивающиеся меню, меню с CSS3 эффектами, фиксированные навигационные панели, всегда находящиеся в поле видимости и другие примеры навигации.

 


Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close