Css фотогалерея для сайта css – Урок 9. Фотогалерея для сайта Lightbox 2.04 | Фотогалерея для сайта как подключить фотогалерею на сайте | Уроки MODx Evo

Leave a Comment / Css / By /

Фотогалерея CSS | Веб-мастерская Ларисы Ворониной

В этой статье я приведу простой пример создания фотогалереи на чистом CSS, без использования JavaScript и JQuery.

Фотогалерея CSS представляет собой сетку изображений – миниатюр. При щелчке мыши по миниатюре  изображение  открывается полностью, так же при щелчке мыши закрывается.

Создаём папку Gallery, в ней создаём папку Images идва файла index.html и style.css.

В index.html пишем разметку галереи.

<!DOCTYPE html>
<html>
     <head>
          <meta charset=»utf-8″>
          <link rel=»stylesheet» type=»text/css» href=»style.css» >
          <title>Фотогалерея CSS</title>
     </head>
     <body>
          <div>
               <input type=»checkbox»>
               <label for=»img1″><img src=»images/img1.jpg»></label>

               <input type=»checkbox»>
               <label for=»img2″><img src=»images/img2.jpg»></label>
               <input type=»checkbox»>
               <label for=»img3″><img src=»images/img3.jpg»></label>
               <input type=»checkbox»>
               <label for=»img4″><img src=»images/img4.jpg»></label>
               <input type=»checkbox»>
               <label for=»img5″><img src=»images/img5.jpg»></label>
               <input type=»checkbox»>
               <label for=»img6″><img src=»images/img6.jpg»></label>
               <input type=»checkbox»>
               <label for=»img7″><img src=»images/img7.jpg»></label>
               <input type=»checkbox»>
               <label for=»img8″><img src=»images/img8.jpg»></label>
               <input type=»checkbox»>
               <label for=»img9″><img src=»images/img9.jpg»></label>
               <input type=»checkbox»>
               <label for=»img10″><img src=»images/img10.jpg»></label>
               <input type=»checkbox»>
               <label for=»img11″><img src=»images/img11.jpg»></label>
               <input type=»checkbox»>
               <label for=»img12″><img src=»images/img12.jpg»></label>
               <input type=»checkbox»>
               <label for=»img13″><img src=»images/img13.jpg»></label>
               <input type=»checkbox»>
               <label for=»img14″><img src=»images/img14.jpg»></label>
               <input type=»checkbox»>
               <label for=»img15″><img src=»images/img15.jpg»></label>
               <input type=»checkbox»>
               <label for=»img16″><img src=»images/img16.jpg»></label>
               <input type=»checkbox»>
               <label for=»img17″><img src=»images/img17.jpg»></label>
               <input type=»checkbox»>
               <label for=»img18″><img src=»images/img18.jpg»></label>
               <div>
                    <label for=»img1″><img src=»images/img1.jpg»></label>
                    <label for=»img2″><img

Простая фотогалерея на CSS для сайта

Как при помощи чистого css и пары вспомогательных картинок создать свою фотогалерею для сайта. Простой урок по верстке фотогалереи для веб-сайта.

Для организации фотогалереи на сайте часто используют готовые скрипты на PHP. Я пробовал пару-тройку раз заняться этим полезным делом и пришел к выводу, что если нужна динамическая галерея, где могут оценивать ваши работы другие люди, и где можно легко и быстро вставлять фотки и тексты описания к ним прямо с рабочего стола, то лучше воспользоваться готовыми онлайн сервисами, коих в сети целая куча. Вот хотя бы старый добрый Flickr.

Цеплять к своему сайту скрипт, потом настраивать его — тот еще геморрой. Те бесплатные скрипты, что лежат в сети, либо простые, но страшненькие в оформлении и глючные в работе, либо настолько тяжеловесные и перегруженные всякими излишествами, что править и затачивать их под свой сайт запаришься.

Но если вы хотите просто разместить на своем сайте несколько фоток с подписями, то это очень легко и красиво можно оформить с помощью чистого CSS и пары вспомогательных картинок, что мы сейчас и сделаем.

Для начала нам нужно заготовить парочку вот таких картинок:

  

Сразу поясним, для чего они у нас такие длинные. Обе картинки мы будем использовать фоном под наши превью (превью — уменьшенная копия фотографии).

Так как превью могут быть разного размера и ориентации (горизонтальные или вертикальные), и подписи к ним могут быть разной длинны, то мы сделаем следующую хитрость: привяжем первую картинку фоном к тэгу div, а вторую — к тэгу p, который задействуем для подписи.

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

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

Итак, запишем для начала код нашей главной страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="style.css" type="text/css">

<title>Фотогалерея | Урок с сайта Websovet.com</title>
</head>
<body>
<div></div>
<div>
<div>
<a href="foto1.html"><img src="1_sm.jpg" alt="okno_v_nebo" /></a>
<p>Окно в небо</p>
</div>
<div>
<a href="foto2.html"><img src="2_sm.jpg" alt="zloy_indeets" /></a>
<p>Злой индеец</p>
</div>
<div>
<a href="foto3.html"><img src="3_sm.jpg" alt="pod_krylom_samoleta" /></a>
<p>Под крылом самолета</p>
</div>
<div>
<a href="foto4.html"><img src="4_sm.jpg" alt="nasyp_kamney_na_pirse" /></a>
<p>Насыпь камней на пирсе</p>
</div>
<div>
<a href="foto5.html"><img src="5_sm.jpg" alt="tsvetushy_kust" /></a>
<p>Цветущий куст</p>
</div>
<div>
<a href="foto6.html"><img src="6_sm.jpg" alt="goryachaya_kamennaya_baba" /></a>
<p>Горячая каменная баба</p>
</div>
</div>
</body>
</html>

Код совсем простой. Мы поместили содержимое страницы в «коробочку» — container, которую расположили по центру, а каждую превьюшку с подписью оформили отдельным div с классом tumb.

Рассмотрим теперь подробнее файл стилей CSS:

* {
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
}
body {
background: #fff;
}
#container {
width: 860px;
margin: 0 auto;
}
#header {
background: url(header.gif) no-repeat;
width: 860px;
height: 160px;
margin: 0 auto;
clear: both;
}
div.tumb {
background: url(tumb01.gif) no-repeat;
width: 210px;
float: left;
margin: 0 30px 20px;
}
div.tumb img {
margin:5px 4px;
}
div.tumb p {
background: url(tumb02.gif) no-repeat 0 100%;

font: 85% Verdana, Arial, sans-serif;
color: #333;
margin: 0;
padding: 0 25px 20px 10px;
}

Начнем по порядку. Для всей страницы разом мы установили поля, отступы и границы равными 0. Фон указали белого цвета, у ссылок выключили подчеркивание, а размер контейнера задали в 860 пикселей по ширине и автовыравнивание.

Для шапки нарисовали симпатичный зоголовок и поместили его там в виде фона, задав ширину и высоту. Это все просто. А вот дальше будет хитрость.

Для превьюшек, как уже говорилось, мы использовали div с классом tumb. При этом самому селектору tumb мы в правилах задали отображение фона в виде первой нашей картинки, показанной выше, указав ее ширину в 210 пикселей и запретив повтор. Высоту при этом не указываем!

Кроме того, мы сюда же добавили правило обтекания слева float: left, ибо хотим расположить по горизонтали несколько превьюшек. Если этого не сделать, то все превьюшки будут располагаться на странице в столбик одна под другой.

В следующем наборе правил мы уже задали самим превьюшкам с тэгом img отступы, чтобы картинки не лепились одна к другой.

Обратите внимание на запись — div.tumb img. Она показывает, что мы не просто какому-то произвольному тэгу img задаем эти правила, а именно тому, который входит в блок div с классом tumb.

Далее мы для тэга p, опять же, входящего в блок div с классом tumb, задали размер и цвет шрифта, поля и отступы и, самое важное, указали в качестве фона вторую нашу замечательную картинку. При этом кроме запрета на повтор мы показали ее координаты относительно осей х и у, 0 и 100% соответственно.

То есть, несмотря на размер наших превьюшек и описательного текста (в разумных пределах конечно), эта фоновая картинка всегда будет показывать свою нижнюю часть и правый край, автоматически подстраиваясь под длину и ширину превьюшки.

Вот, собственно, и все!

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

Готовый пример галереи можно посмотреть здесь: Фотогалерея, пример на CSS.

Надеюсь, вам понравилось. Enjoy!

Если есть вопросы, задавайте их в комментариях. С удовольствием отвечу.

UPD от 03.11.2018: На сегодняшний день это уже морально устаревший способ — использовать в качестве подкладки фон из пары картинок. Все делается элементарно инструментами из арсенала CSS3.

Урок 9. Фотогалерея для сайта Lightbox 2.04 | Фотогалерея для сайта как подключить фотогалерею на сайте | Уроки MODx Evo

Как создать свой сайт? Уроки HTML и CSS

Ярким и привлекательным элементом является фотогалерея для сайта, которая может содержать миниатюры фотографий, возможности прокрутки, различные эффекты, наложенные на изображения. Как подключить

фотогалерею для сайта мы изучим в данном уроке.

Фотогалереи и слайдеры пишутся с использованием языков программирования, особенно популярны скрипты, написанные на языке JavaScript. Мы с вами изучим, как вставлять в html-страницы готовые скрипты, написанные профессиональными программистами.

Способы подключения JavaScript (источник http://javascript.ru/tutorial/foundation/start)

  1. Подключение в любом месте
  2. Вынос скриптов в заголовок  HEAD
  3. Внешние скрипты

1. Подключение в любом месте

Когда браузер читает HTML-страничку, и видит <script> – он первым делом читает и выполняет код, а только потом продолжает читать страницу дальше.

Так, в следующем примере будет показано начало страницы, затем три раза выполнится функция alert, которая выводит окошко с информацией, а только потом появится остальная часть страницы.

 

2. Вынос скриптов в заголовок HEAD

Обычно javascript стараются отделить от собственно документа.

Для этого его помещают внутрь тега HEAD, а в теле страницы по возможности оставляется чистая верстка.

В следующем примере javascript-код только описывает функцию count_rabbits, а ее вызов осуществляется по нажатию на кнопку input.

Для указания запускаемой по клику функции в input был использован атрибут onclick. Это лишь вершина мощного айсберга javascript-событий.

3. Внешние скрипты

Обычно javascript-код вообще не пишут в HTML, а подключают отдельный файл со скриптом, вот так:

<script src=»/my/script.js»></script>

При этом файл /my/script.js содержит javascript-код, который иначе мог бы находиться внутри тега <script>.

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

Чтобы подключить несколько скриптов — используйте несколько таких тегов:

<script src="/js/script1.js"></script>

<script src="/js/script2.js"></script>

При указании атрибута src содержимое тега игнорируется.

То есть одновременно подключить внешний файл и написать что-то внутри тега нельзя. Придется делать два разных тега <script>: первый с src, второй – с командами, которые будут выполнены после выполнения внешнего файла.

В этом уроке мы изучим, как вставлять в html-страницы готовый скрипт фотогалереи, написанный профессиональными программистами.

Будем создавать фотогалерею на основе готового скрипта Lightbox2.04.

1. Просмотрите фотогалерею, созданную на базе этого скрипта. Откроется в новой вкладке/окне.

2. Скачайте здесь дистрибутив фотогалереи LIGHTBOX 2.04.

3. Создайте папку, в которой будете создавать фотогалерею.

4. Скопируйте в нее скачанный дистрибутив фотогалереи lightbox2.04.zip и разархивируйте его.

5. Запустите файл index.html, полученный из архива. Вы увидите следующую страницу (рис. 1).

Рисунок 1

6. Щелкните по изображению с зелеными листьями. Получите увеличенное изображение этой миниатюры (рис. 2).

Рисунок 2

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

8. Откроем код страницы в блокноте и проанализируем его (рис. 3).
Строка 6: в теге <title> Вы можете написать свой заголовок, который будет иметь Ваша web-страница;

Строка 8: тег <link> связывает эту web-страницу с таблицей стилей, которая получена из архива и находится в папке css. Вы уже умеете работать с таблицами стилей, поэтому, открыв файл lightbox.css, Вы можете внести в него изменения, и тем самым задать другое оформление самой фотогалерее. Возможно, для этого Вам придется дополнительно почитать справочники по таблицам стилей;

Строки 10-12: этот блок подключает готовый скрипт фотогалереи, которая находится в папке js (мы ее получили из архива). Здесь мы менять ничего не будем, как и в самих скриптах;

Строка 15: это внедренная таблица стилей, которая отвечает за оформление самой web-страницы. Здесь Вы точно сумеете задать свое новое оформление, т.к. изучили таблицы стилей;

Строка 22: здесь Вы и без моих подсказок догадались, что это заголовок самой web-страницы и текст под ним. Оба являются ссылками на интернет-ресурс разработчика фотогалереи. Этот текст можно заменить на свое содержание;

Строка 27: эта строка включает в web-страницу миниатюру с зелеными листочками. Давайте проанализируем эту строку подробней. Читайте дальше текст после рисунка.

Рисунок 3

9. Рассмотрим строку <a href=»images/image-1.jpg» rel=»lightbox»><img src=»images/thumb-1.jpg» alt=»» /></a>:

<a href=»images/image-1.jpg» rel=»lightbox»> — это гиперссылка, при нажатии на которую загрузится изображение image-1.jpg из папки images. Это большое изображение (рис. 2), которое появляется при щелчке по миниатюре на web-странице;

<img src=»images/thumb-1.jpg» alt=»» /> — это миниатюра , которая имеет название thumb-1.jpg, ширину 100px (width=»100″), высоту 40px (height=»40″), и расположена в папке images.

Ну вот, в общем, и все.

Сейчас Вам необходимо создать свои изображения в крупном размере, потом для каждого изготовить миниатюру в Photoshop. Все это сложить в одну папку и добавить на web-страницу. Структура гиперссылки на каждое изображение будет аналогична строке 27 на рисунке 3. Только имена Ваших миниатюр, больших картинок и папки могут быть другими.

Контрольное задание

Создать web-страницу, включающую:

  1. Заголовок web-страницы. Тему надо продумать предварительно, т.к. этой теме будет посвящена фотогалерея.
  2. Web-страница должна иметь фон, отличный от белого.
  3. Фотогалерею (не менее 10 изображений).
  4. Дополнительный пояснительный текст по данной теме (2-3 абзаца).

Красивая галерея для сайта с помощью CSS3

.gallery {

margin: 100px auto 0;

width: 800px;

}

.gallery a {

display: inline-block;

height: 135px;

position: relative;

width: 180px;

 

/* Отключаем выделение */

-moz-user-select: none;

-webkit-user-select: none;

-khtml-user-select: none;

user-select: none;

}

.gallery a img {

border: 8px solid #fff;

border-bottom: 20px solid #fff;

cursor: pointer;

display: block;

height: 100%;

left: 0px;

position: absolute;

top: 0px;

width: 100%;

z-index: 1;

 

/* Свойства для изменения рамки */

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

-o-box-sizing: border-box;

box-sizing: border-box;

 

/* Правила перехода */

-webkit-transition: all 1.0s ease;

-moz-transition: all 1.0s ease;

-o-transition: all 1.0s ease;

transition: all 1.0s ease;

 

/* Тени */

-moz-box-shadow: 2px 2px 4px #444;

-webkit-box-shadow: 2px 2px 4px #444;

-o-box-shadow: 2px 2px 4px #444;

box-shadow: 2px 2px 4px #444;

}

 

/* Вращение */

.gallery a:nth-child(1) img {

-moz-transform: rotate(-25deg);

-webkit-transform: rotate(-25deg);

transform: rotate(-25deg);

}

.gallery a:nth-child(2) img {

-moz-transform: rotate(-20deg);

-webkit-transform: rotate(-20deg);

transform: rotate(-20deg);

}

.gallery a:nth-child(3) img {

-moz-transform: rotate(-15deg);

-webkit-transform: rotate(-15deg);

transform: rotate(-15deg);

}

.gallery a:nth-child(4) img {

-moz-transform: rotate(-10deg);

-webkit-transform: rotate(-10deg);

transform: rotate(-10deg);

}

.gallery a:nth-child(5) img {

-moz-transform: rotate(-5deg);

-webkit-transform: rotate(-5deg);

transform: rotate(-5deg);

}

.gallery a:nth-child(6) img {

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

.gallery a:nth-child(7) img {

-moz-transform: rotate(5deg);

-webkit-transform: rotate(5deg);

transform: rotate(5deg);

}

.gallery a:nth-child(8) img {

-moz-transform: rotate(10deg);

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

.gallery a:nth-child(9) img {

-moz-transform: rotate(15deg);

-webkit-transform: rotate(15deg);

transform: rotate(15deg);

}

.gallery a:nth-child(10) img {

-moz-transform: rotate(20deg);

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

}

.gallery a:nth-child(11) img {

-moz-transform: rotate(25deg);

-webkit-transform: rotate(25deg);

transform: rotate(25deg);

}

.gallery a:nth-child(12) img {

-moz-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

 

.gallery a:focus img {

cursor: default;

height: 250%;

left: -150px;

top: -100px;

position: absolute;

width: 250%;

z-index: 25;

 

/* Правила перехода */

-webkit-transition: all 1.0s ease;

-moz-transition: all 1.0s ease;

-o-transition: all 1.0s ease;

transition: all 1.0s ease;

 

/* Правила перехода */

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}

Галерея с увеличением с использованием только CSS3

В этом уроке мы создадим галерею изображений с увеличением изображения при нажатии на него. Еще мы добавим кнопку для закрывания увеличенного изображения. И, что самое главное, мы сделаем это на чистом CSS! Лучше всего, чтобы страница с галереей не прокручивалась, так как псевдокласс :target прокрутит страницу до активного элемента, что будет раздражать, если страница может прокручиваться.

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

 

Демонстрация работы – Скачать исходный код

Начнем 

Для начала давайте рассмотрим код HTML. Он состоит из родительского элемента, который содержит несколько блоков класса holder, каждый из которых работает как одно изображение. У каждого блока есть дочерние элементы, такие как закрывающая кнопка, изображение и ссылка, при нажатии на которую изображение увеличивается. Каждая такая ссылка связана с родительским блоком, так что можно использовать псевдокласс :target в коде CSS:

<div>
    <div>
        <div>
            <span><a href="#">X</a></span>
            <img src="1.jpg" alt="earth!">
            <a href="#image-1"></a>
        </div>
    </div>
    <div>
        <div>
            <span><a href="#">X</a></span>
            <img src="2.jpg" alt="earth!">
            <a href="#image-2"></a>
        </div>
    </div>
    <div>
        <div>
            <span><a href="#">X</a></span>
            <img src="3.jpg" alt="earth!">
            <a href="#image-3"></a>
        </div>
    </div>
</div>

 

CSS 

Код CSS несложный. Для начала зададим стили для родительских элементов класса holder:

#images-box {
    /* The total width of the image-box, mainly for centering */
    width: 850px;
    margin: 0px auto;
    position: relative;
    top: 70px;
}

.image-lightbox img {
    /* Inherit the width and height from the parent element */
    width: inherit;
    height: inherit;
    z-index: 3000;
}

.holder {
    /* The width and height, you can change these */
    width: 250px;
    height: 166px;
    /* Float left, so everything aligns right */
    float: left;
    margin: 0 20px 0 0;
}
.image-lightbox {
    /* Inherit width and height from the .holder */
    width: inherit;
    height: inherit;
    padding: 10px;
    /* Box shadow */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    background: #fff;
    border-radius: 5px;
    /* Position absolutely so we can zoom it out later */
    position: absolute;
    top: 0;
    font-family: Arial, sans-serif;
    /* Transitions to provide some eye candy */
    -webkit-transition: all ease-in 0.5s;
    -moz-transition: all ease-in 0.5s;
    -ms-transition: all ease-in 0.5s;
    -o-transition: all ease-in 0.5s;
}

 

После этого нам нужно задать стили внутренним элементам. Мы задали элементам <span> свойство display: none, чтобы закрывающая кнопка появлялась, когда пользователь нажимает на изображение. Ссылка была изменена, чтобы заполнить собой весь родительский элемент, и на него можно было нажимать.

.image-lightbox span {
    display: none;
}

.image-lightbox .expand {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 4000;
    background: rgba(0,0,0,0); /* Fixes an IE bug */
    left: 0;
}

.image-lightbox .close {
    position: absolute;
    width: 20px; height: 20px;
    right: 20px; top: 20px;
}

.image-lightbox .close a {
    height: auto; width: auto;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    background: #22272c;
    box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
    border-radius: 5px;
    font-weight: bold;
    float: right;
}
.image-lightbox .close a:hover {
    box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}

 

До того, как мы перейдем к тому, что относится к псевдоклассу :target, нужно задать расположение элементам. Если у Вас будет больше изображений, Вам нужно будет добавить им расположение таким же образом.

div#image-1 { left: 0; }
div#image-2 { left: 290px; }
div#image-3 { left: 580px; }

 

Использовать псевдокласс :target не очень сложно. Нужно изменить расположение, свойство z-index и свойства отображения некоторых элементов:

div[id^=image]:target {
    width: 450px;
    height: 300px;
    z-index: 5000;
    top: 50px;
    left: 200px;
}
div[id^=image]:target .close {
    display: block;
}

div[id^=image]:target .expand {
    display: none;
}
div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }

 

И это все! Вот полный код CSS с комментариями, и можете посмотреть демонстрацию работы.

#images-box {
    /* The total width of the image-box, mainly for centering */
    width: 850px;
    margin: 0px auto;
    position: relative;
    top: 70px;
}

.image-lightbox img {
    /* Inherit the width and height from the parent element */
    width: inherit;
    height: inherit;
}

.holder {
    /* The width and height, you can change these */
    width: 250px;
    height: 166px;
    /* Float left, so everything aligns right */
    float: left;
    margin: 0 20px 0 0;
}

.image-lightbox {
    /* Inherit width and height from the .holder */
    width: inherit;
    height: inherit;
    padding: 10px;
    /* Box shadow */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    background: #fff;
    border-radius: 5px;
    /* Position absolutely so we can zoom it out later */
    position: absolute;
    top: 0;
    font-family: Arial, sans-serif;
    /* Transitions to provide some eye candy */
    -webkit-transition: all ease-in 0.5s;
    -moz-transition: all ease-in 0.5s;
    -ms-transition: all ease-in 0.5s;
    -o-transition: all ease-in 0.5s;
}

.image-lightbox span {
    display: none;
}

.image-lightbox .expand {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.image-lightbox .close {
    position: absolute;
    width: 20px; height: 20px;
    right: 20px; top: 20px;
}

.image-lightbox .close a {
    height: auto; width: auto;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    background: #22272c;
    box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
    border-radius: 5px;
    font-weight: bold;
    float: right;
}

.close a:hover {
    box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}

div[id^=image]:target {
    width: 450px;
    height: 300px;
    z-index: 5000;
    top: 50px;
    left: 200px;
}
div[id^=image]:target .close {
    display: block;
}

div[id^=image]:target .expand {
    display: none;
}

div#image-1:target, div#image-2:target, div#image-3:target { left: 200px; }
div#image-1 { left: 0; }
div#image-2 { left: 290px; }
div#image-3 { left: 580px; }

 

Автор урока Johnny Simpson

Перевод — Дежурка

Смотрите также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *