Все для веб-дизайнера
Галерея с увеличением изображений на CSS3
Наверное вам не раз уже приходилось сталкиваться с лайтбоксами или обыкновенными модальными окнами. Но если вы ведете свой блог или курируете сайт то вы, наверняка, сталкивались с нюансом вывода изображений на сайте. Дела в том, что вставить большие изображения на сайт это не практично, так как это занимает достаточно много места, а если слишком маленькие, то не будет понятно, что на изображении, по этому приходится идти на компромисс. В данном уроке мы рассмотрим, как создать простое увеличение изображений с помощью css.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
И так, нам необходимо, чтобы по нажатию на изображение оно увеличивалось, кроме этого добавим кнопку закрытия изображения. И так, давайте приступим.
Шаг 1. HTML
И так, рассмотрим структуру, у нас есть общий контейнер, который содержит всю структуру, в середину этого контейнера помещены дочерние элементы, как изображения и классы закрытия развернутых изображений. Кроме этого мы используем класс :target который обеспечит работоспособность окон.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div id="images-box"> <div class="holder"> <div id="image-1" class="image-lightbox"> <span class="close"><a href="#">X</a></span> <img src="1.jpg" alt="earth!"> <a class="expand" href="#image-1"></a> </div> </div> <div class="holder"> <div id="image-2" class="image-lightbox"> <span class="close"><a href="#">X</a></span> <img src="2.jpg" alt="earth!"> <a class="expand" href="#image-2"></a> </div> </div> <div class="holder"> <div id="image-3" class="image-lightbox"> <span class="close"><a href="#">X</a></span> <img src="3.jpg" alt="earth!"> <a class="expand" href="#image-3"></a> </div> </div> </div> |
С разметкой мы разобрались, если вы хоть не много в этом разбираетесь, то сложностей не должно вызвать.
Шаг 2. CSS
Для начала нам необходимо определить некоторые базовые стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
#images-box { / * Общая ширина изображения контейнера, в основном, для центрирования * / width: 850px; margin: 0px auto; position: relative; top: 70px; } .image-lightbox img { width: inherit; height: inherit; z-index: 3000; } .holder { / * Ширина и высота, вы можете их изменить * / width: 250px; height: 166px; float: left; margin: 0 20px 0 0; } .image-lightbox { width: inherit; height: inherit; padding: 10px; /* Тени */ box-shadow: 0px 0px 10px rgba(0,0,0,0.1); background: #fff; border-radius: 5px; position: absolute; top: 0; font-family: Arial, sans-serif; /* Переходы */ -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 , для того, чтобы сделать кнопку закрытия, которая появляется, когда пользователь нажимает на изображение.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.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); /* Фиксы для IE */ 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); } |
Далее необходимо добавить позиционирование для изображений, если вы хотите добавить новые, то вам необходимо внести дополнения в данный раздел:
|
1 2 3 |
div#image-1 { left: 0; } div#image-2 { left: 290px; } div#image-3 { left: 580px; } |
При открытии изображения происходит его позиционирование на странице:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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; } |
Мы не используем различных плагинов, что весьма упростит скорость загрузки, и обеспечит большую практичность.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 16.02.2013 в 20:38, в категории CSS. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
