Галереи и сетки для Блоггер. Завершение
Сегодня завершающая статья о галереях и сетках для фотографий. Конечно, будут ещё коды интересных галерей, но не сразу так много.
Подходят галереи и сетки для блогов и сайтов, в которых используется много картинок и их нужно компактно расположить, например, сайты о кулинарии, путешествиях, обзорах различных товарах, личные блоги-дневники и т.д.
Все коды без скриптов, а значит не "утяжеляют" сайт.
Работоспособность кодов проверяйте в визуальном редакторе.
Галерея вращается как колесо.
Сетка
При наведении курсора на фото, оно слегка приподнимается.
<div class="photo-grid">
<div class="card card-tall" style="background-image:url('фото')">
</div>
<div class="card card-tall" style="background-image:url('фото')">
</div>
<div class="card card-tall" style="background-image:url('фото')">
</div>
<div class="card card-wide" style="background-image:url('фото')">
</div>
<div class="card" style="background-image:url('фото')">
</div>
<div class="card" style="background-image:url('фото')">
</div>
<div class="card" style="background-image:url('фото')">
</div>
<div class="card" style="background-image:url('фото')">
</div>
<div class="card card-wide card-tall" style="background-image:url('фото')">
</div>
<div class="card" style="background-image:url('фото')">
</div>
<div class="card" style="background-image:url('фото')">
</div>
<div class="card" style="background-image:url('фото')">
</div>
</div>
<style>
.photo-grid {
height: 100%;
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-auto-rows: 240px;
}
.card {
height: 100%;
width: 100%;
border-radius: 4px;
transition: transform 200ms ease-in-out;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.card:hover {
box-shadow: rgba(2, 8, 20, 0.1) 0px 0.35em 1.175em,
rgba(2, 8, 20, 0.08) 0px 0.175em 0.5em;
transform: translateY(-3px) scale(1.1);
}
@media screen and (min-width: 500px) {
.card-tall {
grid-row: span 2 / auto;
}
.card-wide {
grid-column: span 2 / auto;
}
}
</style>
В галерее возможно придётся подбирать укладку фотографий так, что бы не было пустот. Для этого нужно будет менять у фотографий размеры окошек, укладка напоминает игру "тетрис":
card - маленький квадрат
card card-tall - прямоугольник из двух маленьких квадратов в высоту
card card-wide - прямоугольник из двух маленьких квадратов в ширину
card card-wide card-tall - большой квадрат.
Эти значения в коде отметила синим цветом.
Красным цветом отметила место, куда нужно добавлять адреса картинок.
Сетка на 12 фоток, её можно увеличить, добавляя строки: <div class="card" style="background-image:url('фото')"> </div>
Сетка 2
В этой галерее-сетке картинки одного размера, но при клике на маленькое изображение всплывает окно с большим фото. Изображений 12, но можно добавлять ещё или удалять ряды.
<div class="gallery">
<a tabindex="1"><img src="фото 1"></a>
<a tabindex="1"><img src="фото 2"></a>
<a tabindex="1"><img src="фото 3"></a>
<a tabindex="1"><img src="фото 4"></a>
<a tabindex="1"><img src="фото 5"></a>
<a tabindex="1"><img src="фото 6"></a>
<a tabindex="1"><img src="фото 7"></a>
<a tabindex="1"><img src="фото 8"></a>
<a tabindex="1"><img src="фото 9"></a>
<a tabindex="1"><img src="фото 10"></a>
<a tabindex="1"><img src="фото 11"></a>
<a tabindex="1"><img src="фото 12"></a>
</div>
<style>
.gallery {
width:610px;
margin:0 auto;
}
.gallery a {
display:inline-block;
height:150px;
position:relative;
width:200px;
}
.gallery a img {
border:5px solid #fff;
cursor:pointer;
display:block;
height:100%;
left:0px;
position:absolute;
top:0px;
width:100%;
z-index:1;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
-webkit-transition-duration:0.5s;
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
-moz-transition-duration:0.5s;
-o-transition-property:width, height, top, bottom, left, right, z-index, border;
-o-transition-duration:0.5s;
transition-property:width, height, top, bottom, left, right, z-index, border;
transition-duration:0.5s;
}
.gallery a:focus img {
border:15px solid #FFF;
cursor:default;
height:250%;
position:absolute;
width:250%;
z-index:25;
box-shadow:1px 1px 5px #888;
-moz-box-shadow:1px 1px 5px #888;
-webkit-box-shadow:1px 1px 5px #888;
-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
-webkit-transition-duration:0.5s;
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
-moz-transition-duration:0.5s;
-o-transition-property:width, height, top, bottom, left, right, z-index, border;
-o-transition-duration:0.5s;
transition-property:width, height, top, bottom, left, right, z-index, border;
transition-duration:0.5s;
}
.gallery a:focus:nth-child(3n+1) img {
left:150px;
}
.gallery a:focus:nth-child(3n+2) img {
left:-50px;
}
.gallery a:focus:nth-child(3n+3) img {
left:-250px;
}
.gallery a:focus:nth-child(-n+3) img {
top:140px;
}
.gallery a:focus:nth-child(n+7) img {
top:-150px;
}
.gallery a:focus:nth-child(n+10) img {
top:-295px;
}
.gallery .close {
background:transparent;
cursor:pointer;
display:none;
height:352px;
left:170px;
position:absolute;
top:160px;
width:500px;
z-index:30;
}
.gallery a:focus ~ .close {
display:block;
}
</style>
Что можно поменять в оформлении сетки:естественно, добавляем свои фото - отметила в коде красным цветом
можно поменять ширину окаёмки фотографии - выделила в коде оранжевым
цвет окаёмки - выделила синим
ширину окаёмки окна с большим фото, которое появляется при клике - выделила голубым
цвет окаёмки окна с большим фото, которое появляется при клике - выделила зелёным
так же можно поменять размер и цвет тени окна - выделила фиолетовым цветом
Автор кода vavik
Галерея 3D
<button id="scroll"></button>
<div id="photo_viewer" class="photo_viewer">
<div class="photos" id="photo-1"><img src="фото" width="200" height="200"/></div>
<div class="photos" id="photo-2"><img src="фото" width="200" height="200"/></div>
<div class="photos" id="photo-3"><img src="фото" width="200" height="200"/></div>
<div class="photos" id="photo-4"><img src="фото" width="200" height="200"/></div>
<div class="photos" id="photo-5"><img src="фото" width="200" height="200"/></div>
<div class="photos" id="photo-6"><img src="фото" width="200" height="200"/></div>
<div class="photos" id="photo-7"><img src="фото" width="200" height="200"/></div>
<div class="photos" id="photo-8"><img src="фото" width="200" height="200"/></div>
</div>
<style>
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#BFEFFF), to(#9AC0CD));
background: url('https://cssdeck.com/uploads/media/items/0/08fHqEB.png'), -webkit-linear-gradient(top, #BFEFFF, #9AC0CD);
background: url('https://cssdeck.com/uploads/media/items/0/08fHqEB.png'), -moz-linear-gradient(top, #BFEFFF, #9AC0CD);
background: url('https://cssdeck.com/uploads/media/items/0/08fHqEB.png'), -o-linear-gradient(top, #BFEFFF, #9AC0CD);
background: url('https://cssdeck.com/uploads/media/items/0/08fHqEB.png'), -ms-linear-gradient(top, #BFEFFF, #9AC0CD);
background: url('https://cssdeck.com/uploads/media/items/0/08fHqEB.png'), linear-gradient(top, #BFEFFF, #9AC0CD);
background-color: #9AC0CD;
}
#wrapper {
margin: 0 auto;
width: 960px;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
position: relative;
}
#scroll {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEE), to(#CCC));
background: -webkit-linear-gradient(top, #EEE 0%, #CCC 100%);
background: -moz-linear-gradient(top, #EEE 0%, #CCC 100%);
background: -o-linear-gradient(top, #EEE 0%, #CCC 100%);
background: -ms-linear-gradient(top, #EEE 0%, #CCC 100%);
width: 40px;
height: 40px;
border: none;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
-ms-border-radius: 100%;
border-radius: 100%;
position: absolute;
right: 250px;
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.6);
-o-box-shadow: 0px 3px 3px rgba(0,0,0,0.6);
-ms-box-shadow: 0px 3px 3px rgba(0,0,0,0.6);
box-shadow: 0px 3px 3px rgba(0,0,0,0.6);
}
#scroll:after {
content: " ";
position: absolute;
top: 12px;
left: 12px;
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 16px solid #a9a9a9;
-webkit-box-shadow: 0px 1px 0px #000;
-moz-box-shadow: 0px 1px 0px #000;
-o-box-shadow: 0px 1px 0px #000;
-ms-box-shadow: 0px 1px 0px #000;
box-shadow: 0px 1px 0px #000;
}
#scroll:active {
box-shadow: inset 0px 1px 5px #000;
-webkit-box-shadow: inset 0px 1px 5px #000;
-moz-box-shadow: inset 0px 1px 5px #000;
-o-box-shadow: inset 0px 1px 5px #000;
-ms-box-shadow: inset 0px 1px 5px #000;
}
#scroll:active:after {
box-shadow: 0px 0px 0px #000;
-webkit-box-shadow: 0px 0px 0px #000;
-moz-box-shadow: 0px 0px 0px #000;
-o-box-shadow: 0px 0px 0px #000;
-ms-box-shadow: 0px 0px 0px #000;
}
#scroll:active ~ #photo_viewer {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}
#photo_viewer {
width: 260px;
height: 200px;
margin: 220px auto;
position: relative;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: scroll 4s infinite linear;
-moz-animation: scroll 4s infinite linear;
-o-animation: scroll 4s infinite linear;
-ms-animation: scroll 4s infinite linear;
-o-animation: scroll 4s infinite linear;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;
}
#photo_viewer .photos {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
#photo_viewer #photo-1 {
-webkit-transform: translateZ(250px);
-moz-transform: translateZ(250px);
-o-transform: translateZ(250px);
-ms-transform: translateZ(250px);
transform: translateZ(250px);
}
#photo_viewer #photo-2 {
-webkit-transform: rotateX(45deg) translateZ(250px);
-moz-transform: rotateX(45deg) translateZ(250px);
-o-transform: rotateX(45deg) translateZ(250px);
-ms-transform: rotateX(45deg) translateZ(250px);
transform: rotateX(45deg) translateZ(250px);
}
#photo_viewer #photo-3 {
-webkit-transform: rotateX(90deg) translateZ(250px) ;
-moz-transform: rotateX(90deg) translateZ(250px) ;
-o-transform: rotateX(90deg) translateZ(250px) ;
-ms-transform: rotateX(90deg) translateZ(250px) ;
transform: rotateX(90deg) translateZ(250px) ;
}
#photo_viewer #photo-4 {
-webkit-transform: rotateX(135deg) translateZ(250px);
-moz-transform: rotateX(135deg) translateZ(250px);
-o-transform: rotateX(135deg) translateZ(250px);
-ms-transform: rotateX(135deg) translateZ(250px);
transform: rotateX(135deg) translateZ(250px);
}
#photo_viewer #photo-5 {
-webkit-transform: rotateX(180deg) translateZ(250px);
-moz-transform: rotateX(180deg) translateZ(250px);
-o-transform: rotateX(180deg) translateZ(250px);
-ms-transform: rotateX(180deg) translateZ(250px);
transform: rotateX(180deg) translateZ(250px);
}
#photo_viewer #photo-6 {
-webkit-transform: rotateX(225deg) translateZ(250px);
-moz-transform: rotateX(225deg) translateZ(250px);
-o-transform: rotateX(225deg) translateZ(250px);
-ms-transform: rotateX(225deg) translateZ(250px);
transform: rotateX(225deg) translateZ(250px);
}
#photo_viewer #photo-7 {
-webkit-transform: rotateX(270deg) translateZ(250px);
-moz-transform: rotateX(270deg) translateZ(250px);
-o-transform: rotateX(270deg) translateZ(250px);
-ms-transform: rotateX(270deg) translateZ(250px);
transform: rotateX(270deg) translateZ(250px);
}
#photo_viewer #photo-8 {
-webkit-transform: rotateX(315deg) translateZ(250px);
-moz-transform: rotateX(315deg) translateZ(250px);
-o-transform: rotateX(315deg) translateZ(250px);
-ms-transform: rotateX(315deg) translateZ(250px);
-o-transform: rotateX(315deg) translateZ(250px);
}
@-webkit-keyframes scroll {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(360deg);
}
}
@-moz-keyframes scroll {
0% {
-moz-transform: rotateX(0deg);
}
100% {
-moz-transform: rotateX(360deg);
}
}
@-o-keyframes scroll {
0% {
-o-transform: rotateX(0deg);
}
100% {
-o-transform: rotateX(360deg);
}
}
@-ms-keyframes scroll {
0% {
-ms-transform: rotateX(0deg);
}
100% {
-ms-transform: rotateX(360deg);
}
}
@keyframes scroll {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
#photo_viewer .photos img {
border: 6px solid transparent;
width: 188px;
height: 188px;
-webkit-transition: -webkit-transform 0.5s linear ;
-moz-transition: -moz-transform 0.5s linear ;
-o-transition: -o-transform 0.5s linear ;
-ms-transition: -ms-transform 0.5s linear ;
transition: transform 0.5s linear ;
}
#photo_viewer .photos:hover img {
border: 6px solid #DCDCDC;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
</style>
Галерея вращается с помощью кнопки. При наведении курсора на картинку, она увеличивается.
В коде устанавливаем свои фото - выделила красным.
Оранжевым выделила ссылку на текстуру. Что бы она не потерялась можно её скопировать на свой блог и поменять ссылку на текстуру в коде 5 раз. Но это по желанию.
Синим выделила ширину рамки у всплывающего фото.
Зелёным - цвет рамки.
Автор кода vavik
Комментарии со спамом удаляются.