logo

Lightbox на чистом CSS3 без JavaScript

Эффект Lightbox для всплывающей картинки, в основном служит для экономии пространства на странице сайта. Эффект состоит в том, что на странице размещается графическая информация уменьшенного размера. Если читателю необходимо более подробно ознакомиться с этой информацией, он кликает по ней и на странице выводится увеличенное изображение поверх основного контента.

Ранее Lightbox-эффект можно было создать только с помощью Java-скриптов. Однако Java-скрипты не отличаются большой производительностью. Распространение разметки CSS3 и поддержка ее современными браузерами, позволило создавать эффект всплывающего поверх контента изображения без использования Java-скриптов т.е на чистом CSS3.

Используя CSS переходы и анимацию, мы можем сделать вывод увеличенного изображения различными способами.

Псевдокласс :target позволяет сделать переход к элементу с определенным id. Этим мы и воспользуемся для создания эффекта Lightbox.

Для начала создадим блок миниатюр (один из трех, расположенных на демо-странице).


<div class="cat_block">
  <a href="#cat_1"><img class="cat" src="img/cat_1.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_2"><img class="cat" src="img/cat_2.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_3"><img class="cat" src="img/cat_3.jpg" alt="" width="240" height="138"></a>
  <a href="#cat_4"><img class="cat" src="img/cat_4.jpg" alt="" width="240" height="138"></a>
</div>

Блоку для вывода картинки с большим размером присвоим class= «lb»   и id= «cat_1» . Классы и идентификаторы могут иметь любое имя, но чтобы не мудрить использовал lbLightbox, и cat, т.к картинки с кошками. Этот блок первоначально спрятан и при клике на картинку выводиться на экран. Ссылка с class== «lb-close»   позволяет закрыть большую картинку после просмотра. Блок с class= «lb_p»   содержит текст (если это необходимо).

Т.к картинки выводится на экран с различными видами анимации class= «lb»   присвоены еще и числовые значения. Если же вывод картинок будет осуществляться одним способом — достаточно одного класса.


<div class="lb" id="cat_1">
   <img src="img/cat_1.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>Без анимации</p>
   </div>
</div> 
<div class="lb_2" id="cat_2">
   <img src="img/cat_2.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: scaleDown</p>
   </div>
</div> 
<div class="lb_3" id="cat_3">
   <img src="img/cat_3.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: fadeInScale</p>
   </div>
</div> 
<div class="lb_4" id="cat_4">
   <img src="img/cat_4.jpg" alt="">
   <a href="#" class="lb-close">Закрыть</a>
   <div class="lb_p">
      <p>animation: rotate</p>
   </div>
</div> 

Для <div class= «lb» >   прописываем свойство position равное fixed, с нулевой высотой и шириной, а также затемнение основного контента.


.lb{
   width: 0px;
   height: 0px;
   position: fixed;
   overflow: hidden;
   left: 0px;
   top: 0px;
   padding: 0px;
   z-index:1000;
   text-align: center;
 /*затемнение основного контента*/
   opacity:0;
   background: rgba(47,47,56,0.4);       
   transition: opacity 1.2s linear; 
} 

Оформление внешнего вида миниатюр и картинок большего размера каждый делает по своему усмотрению.

Для картинок прописываем:


.lb img {
   max-height: 100%;
   position: relative;
   opacity:1;
/* оформление на свой вкус*/
   border:3px solid #ccc;
   box-shadow: 0px 0px 8px #333;
}

Текст под картинкой:


.lb > .lb_p{
   position: relative;
   opacity:0;
 /* оформление на свой вкус*/
   width: 550px;
   margin:10px auto 0px auto;
   transition: opacity 0.3s linear 1.3s;
}

Ссылка «Закрыть»:


.lb a.lb-close {
   display: block;
   position:absolute;
   z-index: 1001;
 /* оформление на свой вкус*/ 
   top:131px;
   left:46%;
   width:100px;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 400;
   overflow:hidden;
   opacity: 0;
   transition: opacity  0.5s 1.5s;
} 

Ссылка-якорь в миниатюрах ihref= «#cat-1»   указывает на элемент c id= «#cat-1»  , который представляет собой <div class= «lb» id= «cat_1» > . Для вывода картинки на экран используем псевдоэлемент :target.


/*вывод блока "под картинку" */
.lb:target {
   width: auto;
   height: auto;
   bottom: 0px;
   right: 0px;
   padding: 175px 100px 120px 100px;
}

/* вывод картинки  без анимации */
.lb:target img,
.lb:target a.lb-close,
.lb:target >.lb_p {
   opacity: 1;
}  
 
  /* вывод картинки с анимацией*/

.lb_2:target img {
	animation: scaleDown 1.2s ease-in-out;
}
.lb_2:target a.lb-close,
.lb_2:target,
.lb_2:target >.lb_p {
	opacity: 1;
}
@keyframes scaleDown {
  0% { transform: scale(10,10); opacity: 0; }
  100% { transform: scale(1,1); opacity: 1; }
}

Изменяя время, виды анимации, применяя различные комбинации анимаций можно получить «красивую подачу» любой информации. На демонстрационной странице показаны некоторые виды всплывающих картинок. Но на этом возможности Lightbox не ограничиваются. Дерзайте!!!






Практические примеры, Эффекты для изображений 0

Рекомендую прочитать...

Свойство border-radius
Свойство border-radius

В CSS3 появилось замечательное свойство border-radius. Это свойство позволяет задать для элемента скругление углов. Ранее для этого использовались картинки ( сколько трудов стоило вырезать каждый скругленный уголок из шаблона, а затем «распихивать» их по нужным местам при верстке).

Читать полностью
Псевдоэлементы ::before и ::after
Псевдоэлементы

Из самого наименования предполагаем, что это вроде не настоящий элемент для верстки, а как бы подделка. Но эта «подделка» дорогого стоит.

Псевдоэлементы ::before и ::after ничего не изменяют в HTML-документе, их не существует и в дереве элементов документа.

Эти псевдоэлементы позволяют вставить на странице ту информацию, которой нет в HTML-коде.

Читать полностью
Оформление кнопок для сайта
Оформление кнопок для сайта

Практически на любом сайте Вы найдете хотя бы одну кнопку. Это может быть кнопка «Поиск», или «Скачать», или «Читать полностью», или какая то другая.
Ранее в качестве кнопок использовался ссылка-рисунок. При наведении на нее курсора одна картинка замещалась другой, чтобы создать иллюзию движения. В настоящее время с помощью CSS3 появилась возможность создавать всевозможные кнопки совершенно не используя картинки.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.