Ефект Lightbox CSS3

89

Lightbox Эффект CSS3

Майже два роки минуло з моменту написання статті присвяченій цікавому способом реалізації lightbox-ефекту при перегляді повно-розмірних зображень, без підключення до роботи javascript, виключно з допомогою властивостей CSS3.

Час не стоїть на місці, стандарти, вимоги веб-розробки і дизайну змінюються, прийшов час трохи підкоригувати деякі властивості ефекту, додавши до нього нові функції.
За великим рахунком нічого особливо міняти не довелося, хіба що підключив трохи більш плавну трансформацію при прояві картинок, та додав правила @media для різних типів пристроїв, адаптивний дизайн бачите нині в моді…

Отже, для початку, як завжди можете подивитися на ефект у справі, поізменять розміри вікна браузера, поглянути на сирці, а потім більш детально розберемо деякі деталі.
Відразу хочу відзначити, що коректно і у повному обсязі даний метод працює в браузерах що підтримують псевдоклас :target(на ньому власне весь ефект і заснований) це Firefox 1.0+, Chrome 1.0+, Opera 9.6+, Safari 3.0+ і Internet Explorer 9.0+, користувачі щільно підсіли на IE 8, на жаль нічого не побачать.

Демо

Спочатку, для приховування і появи картинок повного розміру використовував властивості display:none і display:block, але у такому разі картинки проявлялися миттєво без будь-якої затримки. Щоб створити візуальну ілюзію анімації при появі зображень повного розміру, замінив приховування елемента на властивість прозорості opacity: 0;.
По суті дана властивість виконує теж саме, приховує елемент на сторінці, роблячи його невидимим, але в зв’язці з універсальним властивістю transition:, можна регулювати ефект переходу між двома станами елемента, це і є своєрідний анімаційний ефект.

Як і раніше, для початку нам потрібні мініатюри, створювати для цього окремі картинки з меншим розміром зовсім необов’язково, так само відмовився від використання вказівки фіксованої ширини зображення width=”100px” в самому тегу картинки . Досить при формуванні стилів css вказати значення у відсотках для властивостей max-width: max-height:, визначають розміри майбутньої мініатюри в залежності від розмірів блоку в якому вони розміщені. Дуже гнучке і зручне рішення, рятує від необхідності кожного разу в тегах картинок прописувати розміри.
І так, створюємо мініатюри, оточуємо їх посиланнями з атрибутом href, точно відповідним ідентифікатором id посилань зображень в оригінальному розмірі, поміщаємо їх у будь-який контейнер, в моєму випадку це спеціально створений div з класом thumb, і отримуємо в результаті ось таку нескладну конструкцію у html:

<div class="thumb">
<a href="#img1">
<img src="images/img1.jpg">
</a>
<a href="#img2">
<img src="images/img2.jpg">
</a>
<a href="#img3">
<img src="images/img3.jpg">
</a>
<a href="#img4">
<img src="images/img4.jpg">
</a>
<a href="#img5">
<img src="images/img5.jpg">
</a>
<a href="#img6">
<img src="images/img6.jpg">
</a>
</div>






Потім необхідно організувати посилання на зображення реального розміру з усіма потрібними атрибутами для активації ефекту. Для цього достатньо ссылке картинки присвоїти id зв’язує її з адресою href посилання мініатюри і прописати клас class=”lightbox” для зв’язки з класом css, за допомогою значень властивостей якого і буде активуватися наш чудовий ефект Lightbox при натисканні на обрану мініатюру.

<a href="#close" class="lightbox" id="img1">
<img src="images/img1.jpg">
</a>
<a href="#close" class="lightbox" id="img2">
<img src="images/img2.jpg">
</a>
<a href="#close" class="lightbox" id="img3">
<img src="images/img3.jpg">
</a>
<a href="#close" class="lightbox" id="img4">
<img src="images/img4.jpg">
</a>
<a href="#close" class="lightbox" id="img5">
<img src="images/img5.jpg">
</a>
<a href="#close" class="lightbox" id="img6">
<img src="images/img6.jpg">
</a>






Як бачите, все досить просто, немає необхідності в створенні і завантаження додаткових картинках, ніяких нагромаджень непотрібного коду, зручна структура для організації невеликої такої галереї на сторінках сайту.

Ефект реалізований завдяки псевдоклассу :target. Тобто, якщо спочатку для зображень з класом lightbox в стилях ми визначили значення для властивості прозорості opacity: 0;, тим самим візуально приховавши повно-розмірні картинки на час, то визначивши правило з псевдоклассом :target для цих самих картинок, то по кліку на мініатюрі, відбувається зміна значень ширини та висоти на максимальну, а зображення стає видимим завдяки зміні значення властивості opacity: 1;

Залишається додати деяку плавність переходу від одного стану зображень до іншого з допомогою властивості transition:, у прикладі виставив значення 500ms, в результаті прозорість змінюється не миттєво, а з затримкою у пів секунди.
У результаті у нас вийшов досить легкий і цілком зрозумілий виконуваний код CSS, за допомогою якого в майбутньому вам не складе особливих труднощів змінити будь-які параметри самого ефекту, і параметри виведених картинок. А невеликі мої пояснення, допоможуть вам швидше розібратися що, куди і навіщо

 a img {
border: none; /* прибираємо рамку */
}
.lightbox {
/** визначаємо базовий стиль lightbox */
position: fixed;
overflow: hidden;
z-index: 9999;
width: 0;
height: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
/** базовий стиль зображень lightbox*/
width: 95%;
max-width: 800px;
height: auto;
margin: 5% auto;
/** повна прозорість спочатку */
opacity: 0;
border: 1px solid #4D4D4D;
/** тіні картинки - це за бажанням */
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
/* трансформація прозорості при відкритті */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.lightbox:target {
/** активуємо lightbox при натисканні */
width: auto;
height: auto;
bottom: 0;
right: 0;
/** видаляємо контур за замовчуванням */
outline: none;
}
.lightbox:target img {
/** робимо елемент непрозорим */
opacity: 1;
}
/** стиль мініатюр для демо-сторінки */
.thumb img{
width: 45%;
margin:2%;
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
}

a img {
border: none; /* прибираємо рамку */
}
.lightbox {
/** визначаємо базовий стиль lightbox */
position: fixed;
overflow: hidden;
z-index: 9999;
width: 0;
height: 0;
text-align: center;
top: 0;
left: 0;
background: rgba(0,0,0,0.8);
}
.lightbox img {
/** базовий стиль зображень lightbox*/
width: 95%;
max-width: 800px;
height: auto;
margin: 5% auto;
/** повна прозорість спочатку */
opacity: 0;
border: 1px solid #4D4D4D;
/** тіні картинки – це за бажанням */
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
/* трансформація прозорості при відкритті */
-webkit-transition: opacity 500ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;
}
.lightbox:target {
/** активуємо lightbox при натисканні */
width: auto;
height: auto;
bottom: 0;
right: 0;
/** видаляємо контур за замовчуванням */
outline: none;
}
.lightbox:target img {
/** робимо елемент непрозорим */
opacity: 1;
}
/** стиль мініатюр для демо-сторінки */
.thumb img{
width: 45%;
margin:2%;
box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.6);
}

От і все! Цікавий ефект «Lightbox» готовий до роботи. Все добре, тільки засмучує той факт, що в повній мірі, даний метод на чистому CSS3, використовувати поки передчасно, враховуючи, що все ще популярний серед користувачів браузер IE8, позбавлений підтримки деяких властивостей CSS3.
Мені наприклад, кожен раз так і хочеться забити на цей прикрий факт і розвернутися по повній, використовувати без постійної оглядки на цей недобраузер, всю міць CSS3, але реалії диктують свої правила і поки доводиться шукати компромісні рішення.

Ще раз дивимося живий приклад, забираємо архів з исходниками з мого Яндекс.Диска, кому воно треба звичайно, і творимо, творимо, творимо…

ДемоИсходники

З повагою, Андрій