Создаем эффект lightbox при помощи CSS3

Главная

Статьи

Верстка сайтов

26.12.2011 14:50

Сегодня мы хотим показать вам, как создать эффект lightbox, используя только CSS. Идея заключается в создании нескольких миниатюр, при клике по которым показывается соответствующее большое изображение. Используя CSS переходы и анимацию, мы можем сделать появление большого изображения различными симпатичными способами.

С помощью псевдо-класса :target, мы сможем показывать изображения и переходить по ним.

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

Обратите внимание, что эти примеры будут работать только в браузерах, которые поддерживают псевдо класс :target.

Итак, давайте сделаем это!

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>

Создаем эффект lightbox при помощи CSS3

Якорь в миниатюрах, например, 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;

}

Создаем эффект lightbox при помощи CSS3

Когда мы нажимаем на якорь миниатюры, он будет указывать на соответствующее большое изображение, которое находится в блоке с классом 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;

}

И это все стили!

Давайте также посмотрим на два других варианта, которые мы используем в примере 1 и примере 2.

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

.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; }

}

Демо-примеры

Пример 1: Scale-up/fade-in animation
Пример 2: Scale-down/fade-in animation
Пример 3: Fade-in & navigation

Как вы увидите, каждый браузер работает совершенно по-разному, когда речь идет о переходах/анимации. Регулируя длительность, временные функции и задержки, вы сможете сделать эффекты более гладкими, т.е. вы можете изменить время анимации для Firefox только изменив -moz-свойства.

Это все! Я надеюсь, вам понравились эти примеры!

Скачать исходники

Перевод статьи с tympanus.net/codrops