Автор

Создание лайтбокс-галереи с помощью 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

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


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

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


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close