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

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

Коллекция Hover.css
Коллекция Hover.css

Hover.css это коллекция CSS3 эффектов, которые можно использовать для анимации при наведении на них курсора. Содержит более 100 эффектов: 2D-трансформации, тени, границы, использование библиотеки иконок.
Пользоваться данной коллекцией очень просто: скачиваем архив ZIP, в папке css находим файл hover.css и загружаем его на сайт. Лучше конечно воспользоваться его минимизированной копией hover-min.css

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

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

Читать полностью
Свойство clip-path
clip-[ath

Свойство clip-path можно применять ко всем элементам HTML, а также графическим элементам SVG и элементам-контейнерам SVG. Оно позволяет «обрезать» элемент практически любой формы. Это может быть отсечение прямоугольной формы, в виде круга или овала, а также фигура произвольной формы — много-много-многоугольник.

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

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

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

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