Ваш IP: 18.117.105.40
Изменить стиль
Главная » Файлы » 5. CSS эффекты » Лайтбокс эффект с помощью магии CSS3 - CSS

Лайтбокс эффект с помощью магии CSS3 - CSS


Для начала, в наличии у нас должно быть два изображения (необязательно совсем), одно оригинального размера (image1-big.jpg), другое — его уменьшенная копия (миниатюра image1.jpg). Миниатюру расположим в виде анкора ссылки с параметром href="#image1":
Код
<a href="#image1"><img src="http://yoursite.ru/images/image1.jpg" alt=""/></a>


Параметр href очень важен, так как это будет именно тот параметр, который свяжет нашу маленькую картинку с увеличенным изображением. Ссылке ведущей на открытие полноразмерного изображения мы присвоим идентификатор с таким же именем, как у нашей миниатюры. Незабываем так же прописать класс(class), который сыграет ключевую роль в оформлении вывода увеличенной картинки на странице. В html это будет выглядеть следующим образом:
Код
<a href="#" id="image1" class="lbox"><img src="http://yoursite.ru/images/image1-big.jpg" alt=""/></a>


Можно обойтись и одной картинкой, то есть не обязательно создавать миниатюру для оригинального изображения, необходимо просто при выводе миниатюры установить нужную ширину «width» и соответственно высоту «height» уменьшенной копии. Тем самым мы избежим путаницы и излишних телодвижений при раскладке непосредственно в html коде страницы, да и лишняя картинка, это опять же, расточительное использование дискового пространства. Для меня больше привлекателен именно такой способ:
Код
<a href="#image1"><img title=""src="http://yoursite.ru/images/yourimage.jpg" width="120" height="120" alt="" /></a>  
  <a href="#" id="image1" class="lbox"><img title="" src="http://yoursite.ru/images/yourimage.jpg" alt=""/></a>


Вот так, теперь на странице у нас будет выводиться миниатюра размером 120 x 120px, а при нажатии на нее мы увидим изображение реального размера, с замечательным эффектом затемнения.

Обратите внимание на параметр class="lbox", имя присвоено мною от фонаря, можете прописать свое, главное чтобы оно соответствовало классу стиля в css. Таким образом мы тихо-мирно подобрались к стилям CSS нашего лайтбокс-эффекта. Здесь получилось все довольно просто, без излишних наворотов весь код css эффекта выглядит примерно так:
Код
.lbox {  
  width: 0;  
  height: 0;  
  position: fixed;  
  overflow: hidden;  
  left: 0;  
  top: 0;  
  z-index: 99999;  
  text-align: center;  
  background: rgba(0,0,0,0.7);  
  }  
  .lbox img {  
  opacity: 0;  
  padding: 8px;  
  background: #ffffff;  
  margin-top: 100px;  
  /* Закругляем углы и добавляем тень */  
  -webkit-border-radius: 10px;  
  -moz-border-radius: 10px;  
  border-radius: 10px;  
  border: 2px solid #ccc;  
  -moz-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;  
  -webkit-box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;  
  box-shadow: 5px 5px 10px #000, -5px -5px 10px #000;  
  /* Трансформации прозрачности при открытии */  
  -webkit-transition: opacity 250ms ease-in;  
  -moz-transition: opacity 500ms ease-in;  
  transition: opacity 500ms ease-in;  
  }  
  /* Показываем окно с содержанием */  
  .lbox:target {  
  width: auto;  
  height: auto;  
  bottom: 0;  
  right: 0;  
  }  
  .lbox:target img {  
  opacity: 1;  
  }


Вот и все, наш замечательный лайтбокс-эффект готов, кто хоть немного знаком с CSS, разберется с параметрами и при необходимости, экспериментируя, а может и методом «тыка», создаст что-нибудь свое, более интересное. А эта моя статья лишь небольшой пример того, что можно сделать с помощью волшебных свойств магии CSS3.


  Мне Нравится 0


Всего комментариев: 0
Информация:
Посетители, находящиеся в группе Гости, не могут оставлять комментарии.








Счётчик материалов

     60 - Комментариев
     142 - Тем форума
     2694 - Постов форума
     31 - Фотографий
     11 - Новостей
     301 - Скачиваний
     5 - Видео

Новые пользователи

Популярные теги

Статистика сайта

Кто сегодня был?
Хостинг от uCoz
счетчик хитов сайта
Хиты сайта