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

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

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

Можешь почитать и вот эту статейку "Анимированная,пульсирующая кнопка "Записаться""

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

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

Теги

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

Статистика

  • Caйту: 4490 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [7]
  • Гости: [6]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 30
  • Генерация страницы: 0.294сек
  • Потребление памяти: 5.156 Mb 
  •   Яндекс.Метрика