CSS3 Lightbox

Главная

Статьи

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

CSS3 Lightbox

05.12.2011 12:00

css3 lightbox

Все вы часто встречали на различных сайтах эффект lightbox, обычно его создают при помощи JavaScript, но в данной статье я опишу создание этого эффекта при помощи одного только CSS3. Это отличный эффект если им не злоупотреблять. Очень многих раздражает когда lightbox всплывает c просьбой зарегистрироваться на сайте или купить один из каких-либо товаров. Это может превратить прекрасный сайт в сайт раздражающий своих посетителей.

Шаг 1: HTML

Вот HTML для lightbox:

<div class="lightbox" id="lightbox1">

 <div class="lightbox-content">

 <div class="lightbox-close"><a href="#">Закрыть</a></div>

 <img src="images/test1.jpg" alt="test1">

 <h2>Это заголовок</h2>

 <div class="caption">

Тут может быть описание или всё что вы захотите сюда добавить

 </div>

 </div>

</div>

Итак, мы имеем класс lightbox. Это основной контейнер. Мы также собираемся использовать этот div для создания эффекта полупрозрачного затемнения страницы. Также, обратите внимание, он имеет идентификатор lightbox1. Если у нас будет несколько lightbox-ов на одной странице, мы будем использовать идентификаторы чтобы контролировать то, какой из них будет показан. Внутри у нас есть класс lightbox-content. Это будет белый блок в центре страницы. Там также ссылка "закрыть", что очень важно.

Далее у нас пример html-кода, который будет заполнять нашу главную страницу.

<div id="container">

<div id="nav">

<a href="#lightbox1" class="button">

Lightbox

</a>

</div>

 Sagittis sociis egestas platea augue nec nunc montes, vel turpis sit nascetur phasellus a massa, vel parturient ultrices sit! Amet sed porttitor ut montes, in tortor enim, amet duis a scelerisque dis odio rhoncus in ac, amet a? Porttitor lacus, sociis adipiscing, vel et et, phasellus, a placerat tincidunt sit rhoncus, odio massa a, porttitor. Dapibus? Nisi sed sed parturient vut, in tristique, dictumst amet. Ut placerat porta! Duis lacus, in magna nec velit adipiscing, in rhoncus etiam, porta adipiscing mattis eu parturient turpis scelerisque porta, pulvinar risus aliquam nec natoque, ultricies quis, duis nisi augue, duis sociis etiam natoque velit magna, ultricies et, ac sit dapibus quis, mus velit, sit nascetur, placerat montes turpis montes ut, urna. Cum! Parturient.

</div>

Просто заполним ее некоторым текстом. Можно воспользоваться для этого расширением для хрома: Lorem ipsum generator.

Ок! Теперь мы можем перейти к CSS.

Шаг 2: CSS

Он на самом деле предельно прост. Там div с "position:absolute", который в обычном состоянии скрыт. Затем, когда к URL добавляется #lightbox[num], lightbox с соответствующим номером будет показываться. Кроме того, не забудьте подключить CSS reset от Эрика Мейера.

#lightbox1:target  {

visibility: visible;

-webkit-transition: opacity 500ms ease;

-moz-transition: opacity 500ms ease;

-o-transition: opacity 500ms ease;

transition: opacity 500ms ease;

opacity: 1;

}

.lightbox {

visibility:hidden;

opacity: 0;

position: fixed;

width: 100%;

height: 100%;

background: rgba(0,0,0,0.75);

}

Вот и все. Ниже еще находятся некоторые стили, которые вы можете использовать, чтобы ваш lightbox хорошо выглядел.

.lightbox-close {

float: right;

position: relative;

left: 15px;

bottom: 20px;

}

.lightbox-close a{

text-decoration: none;

font-size: 12px;

color: #595959;

}

.lightbox-close a:hover{

color: #797979;

}

.lightbox-close a:active{

color: #393939;

}

.lightbox-content {

padding: 30px;

width: 600px;

margin: 0 auto;

margin-top: 100px;

background: #ffffff;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

}

.lightbox-content img {

display: block;

margin: 0 auto;

}

.lightbox-content h2 {

font-size: 26px;

margin-top: 15px;

margin-bottom: 7px;

}

body {

background: url("bg.png");

font-family: arial;

font-size: 15px;

line-height: 25px;

color: #515151;

}

#container {

width: 600px;

margin: 0 auto;

padding-top: 50px;

text-indent: 15px;

}

#nav {

margin-left: -200px;

position: fixed;

}

Ну, вот и все. Как я уже сказал, это очень просто. Это действительно может быть очень полезно в ближайшем будущем, поскольку все больше и больше людей переходит на современные браузеры. Вы можете использовать этот пример для современных браузеров, а для старых - решение на JavaScript. Честно говоря, если бы не Internet Explorer, этот пример, вероятно, уже можно было бы использовать на рабочих сайтах.