Привіт, шановні читачі XoZblog a! У багатьох, хоча напевно у всіх на сайтах є плагін для створення lightbox ефекту, тобто коли картинка відкривається в повний розмір, а інший контент затемнюється. Використовуючи CSS3 можна максимально спростити створення такого ефекту. У даній статті, ефект реалізований завдяки псевдоклас: target.
Для початку нам потрібна мініатюра, або окреме зображення з меншими розмірами або граємо з шириною основного зображення. Оточуємо цю мініатюру посиланням.
Тепер додаємо ще рядок коду. Тут те ж саме зображення, але вже в оригінальному розмірі, також оточене посиланням у якій значення атрибута id дорівнює значенню атрибута href у посилання вище. І є клас pressbox.
Ось самі правила CSS3, що дозволяють реалізувати lightbox ефект.
pressbox # 123;
width. 0;
height. 0;
position. fixed;
overflow. hidden;
left. 0;
top. 0;
/ * Поверх всіх інших елементів * /
z-index. 9999;
text-align. center;
/ * Напівпрозорий сірий фон * /
background. rgba # 40; 0. 0. 0. 0.7 # 41; ;
# 125;
pressbox img # 123;
/ * Спочатку повністю прозора картинка * /
opacity. 0;
padding. 10px;
background. #ffffff;
margin-top. 100px;
/ * Тіні * /
-webkit-box-shadow. 0px 0px 15px # 444;
-moz-box-shadow. 0px 0px 15px # 444;
box-shadow. 0px 0px 15px # 444;
/ * Властивість прозорості змінюється не відразу а за чверть секунди * /
-moz-transition. opacity .25s ease-in-out;
-webkit-transition. opacity .25s ease-in-out;
transition. opacity .25s ease-in-out;
# 125;
pressbox. target # 123;
width. auto;
height. auto;
bottom. 0;
right. 0;
# 125;
pressbox. target img # 123;
opacity. 1;
# 125;
Ах да, не забувайте що працює тільки в:
Щоб залишатися в курсі свіжих статей і уроків підписуйтесь на сторінку ВКонтакте або додавайте в кола на Google+. Дякуємо!