У многих на сайтах есть плагин для создания lightbox эффекта, т.е. когда картинка открывается в полный размер, а остальной контент затемняется. Используя CSS3 можно упростить создание такого эффекта. В данной статье, эффект реализован благодаря псевдоклассу :target.
1.Для начала нам нужна миниатюра. Окружаем эту миниатюру ссылкой.
Код:
<a href="#image1"><img src="kartinka.jpg" width="100px"></a>
2.Теперь добавляем еще строку кода. Здесь то же самое изображение, но уже в оригинальном размере, также окруженное ссылкой у которой значение атрибута id равно значению атрибута href у ссылки выше. И есть класс pressbox.
Код:
<a href="#" id="image1" class="pressbox"><img src="kartinka.jpg"></a>
3.Вот сами и стили, позволяющие реализовать lightbox эффект.
Код:
.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;
}вот и все
Можешь почитать и вот эту статейку "Плавающий блок закладок"
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
