Галереи и сетки фотографий для Блоггер. Продолжение

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

Коды галерей нашла в сети. Некоторые пришлось подстраивать под Блоггер. 

Галерея — поляроид

В прошлой статье я писала о другой галерее, тоже интересной внешне.

Галерея с hover-эффектом. При наведении курсором на фото, оно становится цветным и увеличивается

<div class="wrapper"> <div class="item"> <div class="polaroid"><img src="ваша картинка 1"> <div class="caption">Название картинки</div> </div> </div> <div class="item"> <div class="polaroid"><img src="ваша картинка 2"> <div class="caption">Название картинки</div> </div> </div> <div class="item"> <div class="polaroid"><img src="ваша картинка 3"> <div class="caption">Название картинки </div> </div> </div> <div class="item"> <div class="polaroid"><img src="ваша картинка 4"> <div class="caption">Название картинки</div> </div> </div> <div class="item"> <div class="polaroid"><img src="ваша картинка 5"> <div class="caption">Название картинки</div> </div> </div> </div> <style> .wrapper { width: 100%; padding: 0 2rem; text-align: center; } .polaroid { background: #FFF; padding: 1rem; box-shadow: 0 0.2rem 1.2rem rgba(0,0,0,0.2); } .polaroid > img{ max-width: 100%; height: auto; } .caption { font-size: 1.8rem; text-align: center; line-height: 2em; } .item { width: 30%; display: inline-block; margin-top: 2rem; filter: grayscale(100%); } .item .polaroid:before { content: ''; position: absolute; z-index: -1; transition: all 0.35s; } .item:nth-of-type(4n+1) { transform: scale(0.8, 0.8) rotate(5deg); transition: all 0.35s; } .item:nth-of-type(4n+1) .polaroid:before { transform: rotate(6deg); height: 20%; width: 47%; bottom: 30px; right: 12px; box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4); } .item:nth-of-type(4n+2) { transform: scale(0.8, 0.8) rotate(-5deg); transition: all 0.35s; } .item:nth-of-type(4n+2) .polaroid:before { transform: rotate(-6deg); height: 20%; width: 47%; bottom: 30px; left: 12px; box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.4); } .item:nth-of-type(4n+4) { transform: scale(0.8, 0.8) rotate(3deg); transition: all 0.35s; } .item:nth-of-type(4n+4) .polaroid:before { transform: rotate(4deg); height: 20%; width: 47%; bottom: 30px; right: 12px; box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3); } .item:nth-of-type(4n+3) { transform: scale(0.8, 0.8) rotate(-3deg); transition: all 0.35s; } .item:nth-of-type(4n+3) .polaroid:before { transform: rotate(-4deg); height: 20%; width: 47%; bottom: 30px; left: 12px; box-shadow: 0 2.1rem 2rem rgba(0,0,0,0.3); } .item:hover { filter: none; transform: scale(1, 1) rotate(0deg) !important; transition: all 0.35s; } .item:hover .polaroid:before { content: ''; position: absolute; z-index: -1; transform: rotate(0deg); height: 90%; width: 90%; bottom: 0%; right: 5%; box-shadow: 0 1rem 3rem rgba(0,0,0,0.2); transition: all 0.35s; }

Выделенное в коде: 

красный — вставляем адреса картинок.

синий — пишем название картинок.

оранжевый — меняем цвет рамки картинки при наведении курсора.

зелёный — меняем фильтр (о фильтрах), в данном коде применяется чёрно-белый фильтр.

А ещё бывают фильтры:

blur (размытие) - значение задается в единицах длины, например px, em

brightness (яркость) - в %

contrast (контрастность) - в %

grayscale (чёрно-белое) - в %

saturate (насыщенность цвета) - в %

invert (негатив) - в %

opacity (прозрачность) - в %

sepia - работает только при 100%

hue-rotate (смещение цвета, поворот оттенка) - значение задаётся в deg

Генератор поможет выбрать фильтр и настроить его.

Автор кода галереи - Wanderson

Галерея, с увеличением фото по клику

<div class="gallery"> <a tabindex="1"><img src="фото 1"></a> <a tabindex="2"><img src="фото 2"></a> <a tabindex="3"><img src="фото 3"></a> <a tabindex="4"><img src="фото 4"></a> <a tabindex="5"><img src="фото 5"></a> <a tabindex="6"><img src="фото 6"></a> <a tabindex="7"><img src="фото 7"></a> <a tabindex="8"><img src="фото 8"></a> <a tabindex="9"><img src="фото 9"></a> <a tabindex="10"><img src="фото 10"></a> <a tabindex="11"><img src="фото 11"></a> <a tabindex="12"><img src="фото 12"></a> </div> <style> .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: 8px 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); } </style>

В код добавляем фото – место отметила красным.

Синим отметила цвет рамок вокруг фото.

Оранжевым – ширину рамок картинки, если внизу (border-bottom) сделать у рамок ширину больше других, то фотографии будут выглядеть поляроидными.

Зелёным – цвет тени у фотографий.

Автор кода - vavik

Галерея, с показом большой картинки 

Галерея на 4 картинки, а при наведении курсора на маленькое изображение, снизу появляется большая картинка.

<div class="galeria"> <div class="imagen"></div> <div class="imagen"></div> <div class="imagen"></div> <div class="imagen"></div> </div> <style> .galeria { position: relative; width: 90%; padding-bottom: 60%; margin: 10px auto; background-color: #FFF; box-shadow: 1px 1px 6px #000; overflow: hidden; } .galeria:before { content: ""; position: absolute; margin-top: 24%; width: 100%; height: 74%; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_w5Ct8yIfrOkwj_NdAYTRh6yDLicvlGFojCcxAk03hkEE7c4_pXsMoyeJrFbVP28ZAMzPUp-E6MvT7CbMD27l_gcXmUbJdWGbNBiYeI2lururRo_ocuqwinpUEVYdtiwVXQszpI7pImA/s663/Foto-dlya-saita-177.jpg); background-size: cover; opacity: .3; } .imagen { position: relative; width: 24%; padding-bottom: 24%; background-position: 50% 50%; background-size: cover; cursor: pointer; display: inline-block; } .imagen:nth-of-type(1) { background-image: url(ваше фото 1); } .imagen:nth-of-type(2) { background-image: url(ваше фото 2); } .imagen:nth-of-type(3) { background-image: url(ваше фото 3); } .imagen:nth-of-type(4) { background-image: url(ваше фото 4); } .imagen:before { content: ""; position: absolute; top: 400%; width: 415%; height: 280%; background-image: inherit; background-size: cover; transition: all .8s; } .imagen:nth-of-type(1):before { left: 0; } .imagen:nth-of-type(2):before { left: -102%; /* -100*(nºimag-1)-(nºimag-1)*2 */ } .imagen:nth-of-type(3):before { left: -204%; /* -100*(nºimag-1)-(nºimag-1)*2 */ } .imagen:nth-of-type(4):before { left: -306%; /* -100*(nºimag-1)-(nºimag-1)*2 */ } .imagen:hover:before { top: 100%; } </style>

Красным в коде отметила цвет заднего фона галереи и цвет затемнения большой фотографии. Синим цветом – цвет тени галереи. 

Зелёным – адрес фото, которое всегда будет внизу (большое) 

Розовым – ваши картинки.

Автор кода – Jorge Mg