Как создать простой лайтбокс эффект с помощью магии CSS3

Здравствуйте друзья! Надеюсь всем знаком такой замечательный эффект, как Lightbox (Лайтбокс), используемый для отображения изображений большего размера на страницах сайтов. Существует множество специальных Lightbox плагинов, хороших и не очень, построенных на jQuery. Меня в свое время заинтересовала возможность создания лайтбокс эффекта без применения javascript, построить работу исключительно на функциях CSS3, благо что современные браузеры, за исключением некоторых, поддерживают новые стандарты.
Сегодня хочу рассказать и показать на примере, как с помощью «магии» CSS3 можно быстро и без особых проблем, создать простой, но от этого не менее интересный, лайтбокс эффект для полномасштабных изображений.

Для начала, в наличии у нас должно быть два изображения (необязательно совсем), одно оригинального размера (image1-big.jpg), другое — его уменьшенная копия (миниатюра image1.jpg). Миниатюру расположим в виде анкора ссылки с параметром href="#image1":

<a href="#image1"></a>

 
Параметр href очень важен, так как это будет именно тот параметр, который свяжет нашу маленькую картинку с увеличенным изображением. Ссылке ведущей на открытие полноразмерного изображения мы присвоим идентификатор с таким же именем, как у нашей миниатюры. Незабываем так же прописать класс(class), который сыграет ключевую роль в оформлении вывода увеличенной картинки на странице. В html это будет выглядеть следующим образом:

<a href="#close" id="image1" class="lbox"></a>

Можно обойтись и одной картинкой, то есть не обязательно создавать миниатюру для оригинального изображения, необходимо просто при выводе миниатюры установить нужную ширину width и соответственно высоту height уменьшенной копии. Тем самым мы избежим путаницы и излишних телодвижений при раскладке непосредственно в html коде страницы, да и лишняя картинка, это опять же, расточительное использование дискового пространства. Для меня больше привлекателен именно такой способ:

<a href="#image1"></a>
<a href="#close" id="image1" class="lbox"></a>

Вот так, теперь на странице у нас будет выводиться миниатюра размером 120 x 120px, а при нажатии на нее мы увидим изображение реального размера, с замечательным эффектом затемнения.
Как говориться, шире — далее, можно с помощью CSS совсем избавить себя от рутинных задач и размер миниатюр задать непосредственно в стилях, в селектор img добавить width и height с нужными вам параметрами, в нашем случае, это будет width: 120px; и height: 120px; соответственно.
 

img {
margin: 0 10px 0 0;
border: 3px solid #ccc;
width: 120px; height: 120px; /* высота и ширина миниатюры */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, .6);
}

 
Чтобы полномасштабное изображение не унаследовало параметры миниатюр, а выводилось корректно в полном, или необходимом вам размере, следует в классе .lbox img указать width: auto; height: auto;, или же выставить свой размер увеличенной картинки. Тем самым мы избавимся от необходимости каждый раз прописывать атрибуты изображений в коде html, при формировании галереи или вставке картинки в запись, да и сам код в этом случае выглядит проще:

<a href="#image1"></a>
<a href="#close" id="image1" class="lbox"></a>

 
Обратите внимание на class="lbox", имя присвоено мною от фонаря, можете прописать свое, главное чтобы оно соответствовало классу стиля в css. Таким образом мы тихо-мирно подобрались к стилям CSS нашего лайтбокс-эффекта. Здесь получилось все довольно просто, без излишних наворотов весь код css эффекта выглядит примерно так:

.lbox {
width: 0;
height: 0;
position: fixed;
overflow: hidden;
left: 0;
top: 0;
z-index: 99999;
text-align: center;
background: rgba(0,0,0,0.7);
}
.lbox img {
opacity: 0;
padding: 8px;
background: #ffffff;
margin-top: 100px;
width: auto; height: auto; /* высота и ширина масштабной картинки */
    /* скругяем углы и добавляем тень */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 2px solid #ccc;
-moz-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;
box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;
        /* трансформации прозрачности при открытии  */
-webkit-transition: opacity 250ms ease-in;
-moz-transition: opacity 500ms ease-in;
transition: opacity 500ms ease-in;          
}
/* показываем окно с содержанием */
.lbox:target {
width: auto;
height: auto;
bottom: 0;
right: 0;
}
.lbox:target img {
opacity: 1;
}

Вот и все, наш замечательный лайтбокс-эффект готов, кто хоть немного знаком с CSS, разберётся с параметрами, экспериментируя, а может и методом «тыка», создаст что-нибудь свое, более интересное. А эта моя статья, лишь небольшой пример того, что можно сделать с помощью волшебных свойств CSS3.

Да, и не забывайте, что эффект лайтбокса будет корректно работать только в следующих браузерах:

• Firefox 1.0+
• Safari 3.1+
• Opera 9.5+
• Chrome 2+
• IE 9+ — наконец то снялись с ручника)))

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: