Здравствуйте, уважаемые читатели XoZbloga! У многих, хотя наверное у всех на сайтах есть плагин для создания lightbox эффекта, т.е. когда картинка открывается в полный размер, а остальной контент затемняется. Используя CSS3 можно максимально упростить создание такого эффекта. В данной статье, эффект реализован благодаря псевдоклассу :target.
Для начала нам нужна миниатюра, либо отдельное изображение с меньшими размерами либо играем с шириной основного изображения. Окружаем эту миниатюру ссылкой.
1 | <a href="#image1"><img src="kartinka.jpg" width="100px"></a> |
Теперь добавляем еще строку кода. Здесь то же самое изображение, но уже в оригинальном размере, также окруженное ссылкой у которой значение атрибута id равно значению атрибута href у ссылки выше. И есть класс pressbox.
1 | <a href="#" id="image1" class="pressbox"><img src="kartinka.jpg"></a> |
Вот сами правила CSS3, позволяющие реализовать lightbox эффект.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | .pressbox { width: 0; height: 0; position: fixed; overflow: hidden; left: 0; top: 0; /* Поверх всех остальных элементов */ z-index: 9999; text-align: center; /* Полупрозрачный серый фон */ background: rgba(0,0,0,0.7); } .pressbox img { /* изначально полностью прозрачная картинка */ 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; } .pressbox:target { width: auto; height: auto; bottom: 0; right: 0; } .pressbox:target img { opacity: 1; } |
Изначально элемент с классом pressbox не виден так как ширина и высота равна 0, а изображение полностью прозрачное. Но как только в адресной строке браузера появляется #image1, то есть щелчок по миниатюре, происходит переход к целевому элементу (к элементу с id равным image1). А псевдокласс :target применяется к целевому элементу. Поэтому для ссылки ширину и высоту изменяем на максимальную, а изображение лишаем прозрачности (opacity: 1).
Ах да, не забывайте что работает только в:
- Firefox 1.0 +
- Safari 3.1 +
- Opera 9.5 +
- Chrome 2 +
Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Спасибо!