Адаптивний Lightbox Ефект на чистому CSS3
Lightbox Ефект 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: можна регулювати ефект переходу між двома станами елемента, це і є своєрідний анімаційний ефект.
Як бачите все досить просто, немає необхідності в створенні та завантаженні додаткових картинок, ніяких нагромаджень непотрібногокоду, зручна структура для організації невеликої такої галереї на сторінках сайту.
Залишається додати деяку плавність переходу від одного стану зображень до іншого за допомогою властивості transition: у прикладі виставив значення500ms, в результаті прозорість змінюється не миттєво, а із затримкою в пів секунди. У результаті у нас вийшов досить легкий і цілком зрозумілий виконуваний код CSS, за допомогою якого в майбутньому вам не складе особливих труднощів змінити будь-які параметри самого ефекту, і параметри картинок, що виводяться. А невеликі мої пояснення допоможуть вам швидше розібратися що, куди й навіщо
От і все! Найцікавіший ефект «Lightbox» готовий до роботи. Все добре, тільки засмучує той факт, що в повній мірі даний метод на чистому CSS3, використовувати поки все ж передчасно, враховуючи, що все ще популярний серед користувачів IE8, позбавлений підтримки деяких властивостей CSS3. Мені наприклад, щоразу так і хочеться, забити на цей сумний факт і розвернутися на повну, використовувати без постійної оглядки на цей недобраузер, усю міць CSS3, але реалії диктують свої правила і поки що доводиться шукати компромісні рішення.
Ще раз дивимося живий приклад, забираємо архів з вихідними джерелами з мого Яндекс.Диска, кому воно треба звичайно, і творимо, творимо, творимо.
Буду вдячний, якщо поділіться посиланням на запис у своїх соціальних мережах: