Хаки и Скрипты Next Generation CMS

Простой способ сделать Lightbox на CSS3

irbees2008 irbees2008 Опубликовано - 19 - мая Изображения
5139 - 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).
вот и все

Можешь почитать и вот эту статейку "Аннимированный 3D прогресс бар на CSS3"

Опрос

Ваше мнение

Какой поисковой системой пользуетесь?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 4629 дней
  • Новостей: 568
  • Комменты: 257
  • Зарегистрированно : 673
  • Онлайн всего: [8]
  • Гости: [8]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 31
  • Генерация страницы: 1.796сек
  • Потребление памяти: 5.164 Mb 
  •   Яндекс.Метрика