Товаров: 0 (0р.)

Css галерея: Галерея на CSS. Создание галереи с помощью CSS

Содержание

Фотогалерея 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

Popup галерея для сайта при помощи CSS3 и JS

Красивая галерея для сайта является неотъемлемой его частью. Разработчики прибегают к разным вариациям создания такой галереи, обычно это простое модальное окно, которое не украшено никакими эффектами и служит для простого отображения картинки. Но что если пойти дальше и разнообразить данное окно, добавив эффект анимации, и не обычное, которое есть уже у всех, благодаря стандартным модулям и плагинам. В данном уроке мы рассмотрим как же создать разработчику сайта простую Popup галерея для сайта с красивой анимацией.

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

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

Шаг 1. HTML

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

<div>

<figure>

<img src=»1.jpg» alt=»» />

<figcaption>Daytona Beach <small>United States</small></figcaption>

</figure>

<figure>

<img src=»2.jpg» alt=»» />

<figcaption>Териберка, gorod Severomorsk <small>Russia</small></figcaption>

</figure>

</div>

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

Шаг 2. CSS

Следующий шаг будет стилизация и построение разметки. На самом деле мы хотели минимизировать стили, чтобы галерея оставалась просто и не габаритной. Для начала определим общие стили галереи:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

img {

display: block;

}

 

.gallery {

position: relative;

z-index: 2;

padding: 10px;

display: flex;

flex-flow: row wrap;

justify-content: space-between;

transition: all .5s ease-in-out;

transform: translateZ(0);

 

&.pop {

filter: blur(10px);

}

Затем мы добавляем базовые стили для развернутого окна:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

. popup {

position: fixed;

z-index: 2;

top: 0;

left: 0;

width: 100%;

height: 100vh;

background: #fff;

opacity: 0;

transition: opacity .5s ease-in-out .2s;

 

&.pop {

opacity: 1;

transition: opacity .2s ease-in-out 0s;

 

figure {

margin-top: 0;

opacity: 1;

}

}

И стилизацию изображения которое у нас будет находиться в данном окне, тени и стили:

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

figcaption {

position: absolute;

bottom: 50px;

background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0. 78));

z-index: 2;

width: 100%;

padding: 100px 20px 20px 20px;

color: #fff;

font-family: ‘Open Sans’, sans-serif;

font-size: 32px;

 

small {

font-size: 11px;

display: block;

text-transform: uppercase;

margin-top: 12px;

text-indent: 3px;

opacity: .7;

letter-spacing: 1px;

}

}

 

.shadow {

position: relative;

z-index: 1;

top: -56px;

margin: 0 auto;

background-position: center bottom;

background-repeat: no-repeat;

width: 98%;

height:

Скрипты галерей изображений на CSS | HTML и CSS

Евгений Белодед в рубрику HTML и CSS

10 июня 2008

21

3.5 из 5

Скрипты галерей изображений на CSS

В продолжение статьи о скриптах галерей на JS, сегодняшняя статья посвящена скриптам галерей, которые сделаны исключительно средствами CSS.

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

Галерея фотографа

Очень простая и легкая в эксплуатации галерея. Можно добавлять примечания к каждой из картинок. Вам нужен красивый и удобный фотоальбом? Значит это ваш выбор.

Простенький CSS фотоальбом

Весьма незамысловатая галерея. Показывается номер картинки и соответственно сама картинка. Но, ни номер, ни рисунок не помечены больше ничем. Одна из самых простых галерей.

Многостраничная галерея фотографа

Основано на Suckerfish HoverLightbox. Картинки могут быть разбросаны по темам, что, несомненно, очень удобно для посетителей ваших галерей. А, следовательно, посетителей будет больше… Рисунки, при наведении на них курсоом мышки, увеличиваются.

CSS-ная картинная галерея

Основанная на CSS галерея. Картинки представлены в маленьком размере, но опять же при наведении на курсором мышки, они отображаются на экране увеличенными. И опять же довольно простая в обращении.

СSS-ная фото-витрина

Использует CSS. Никаких особых наворотов в этой галерее нет. Самая обычная галерея. Всё просто – а простота ещё никому не мешала.

Галерея Hoverbox

По сути, это фото галерея, которой ничего не нужно, кроме CSS. И притом весит всего 8КБ!

Галерея Photo-scroll

Комбинация некоторых предыдущих галерей. Ничем особенным она не отличается от предыдущих, представленных на нашем сайте. Такая же простая и лёгкая в обращении.

«Раздвижная» галерея фотографа

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

Перевод с сайта Smashing Magazine.

Автор: Евгений Белодед

Сооснователь Временно. нет. Занимается проектированием интерфейсов, клиентским и серверным программированием в компании Comet Technologies.

Его твиттер и домашняя страничка.

Профиль в Google+ — Evgenij Beloded.

Расскажите друзьям

Оцените статью:

Галерея с увеличением с использованием только 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. =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. =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

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

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

Оригинальная анимированная галерея на CSS3