• 2826
  • 0
  • Автор: --------------
  • Обсудить нана форуме
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css hmlt

У многих на сайтах есть плагин для создания 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;
}
Изначально элемент с классом pressbox не виден так как ширина и высота равна 0, а изображение полностью прозрачное. Но как только в адресной строке браузера появляется #image1, то есть щелчок по миниатюре, происходит переход к целевому элементу (к элементу с id равным image1). А псевдокласс :target применяется к целевому элементу. Поэтому для ссылки ширину и высоту изменяем на максимальную, а изображение лишаем прозрачности (opacity: 1).
вот и все

Можешь почитать и вот эту статейку "Подключаем интересный вариант слайдера в новость или ваш сайт"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Как вам наш дизайн сайта?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element