Галереи и сетки фотографий для Блоггер
Другие примеры оформления картинок смотрите:
https://inshabashka.blogspot.com/2018/05/Kak-ustanovit-neskolko-foto-v-ryad-na-Blogger.html
Секция с фотографиями
<div class="hexagon-photo">
<div class="hexagon hex-big"></div>
<div class="hexagon hex-big"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon"></div>
<div class="hexagon hex-small"></div>
<div class="hexagon hex-small"></div>
<div class="hexagon hex-small"></div>
<div class="hexagon hex-small"></div>
</div>
<style>.hexagon-photo {
font-size: 1em;
position: relative;
height: 37em;
width: 39em;
margin: 20px auto;
background-image: radial-gradient(circle, #e0b7fc 0%, #e0b7fc 70%, transparent 70%, transparent 100%), radial-gradient(circle, #9c6ce4 0%, #9c6ce4 70%, transparent 70%, transparent 100%), radial-gradient(circle, #6513e0 0%, #6513e0 70%, transparent 70%, transparent 100%);
background-repeat: no-repeat;
background-size: 20em 20em, 15em 15em, 12em 12em;
background-position: 5em 5em, 20em 10em, 11em 25em;
}
@media screen and (max-width: 767px) {
.hexagon-photo {
height: 46em;
width: 30em;
background-size: 20em 20em, 17em 17em, 10em 10em;
background-position: 2em 3em, 10em 16em, 3em 32em;
}
}
@media screen and (max-width: 580px) {
.hexagon-photo {
height: 61em;
width: 20em;
background-size: 18em 18em, 17em 17em, 10em 10em;
background-position: 1.5em 7em, 0em 25em, 7em 44em;
}
}
.hexagon {
position: absolute;
height: 10em;
width: 10em;
filter: drop-shadow(0 7px 15px rgba(0, 0, 0, 0.5));
}
.hexagon.hex-big {
height: 15em;
width: 15em;
}
.hexagon.hex-small {
height: 6em;
width: 6em;
}
.hexagon:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
background-size: cover;
}
.hexagon:nth-of-type(1):before {
background-image: url("ваше фото");
}
.hexagon:nth-of-type(2):before {
background-image: url("ваше фото");
}
.hexagon:nth-of-type(3):before {
background-image: url("ваше фото");
}
.hexagon:nth-of-type(4):before {
background-image: url("ваше фото");
}
.hexagon:nth-of-type(5):before {
background-image: url("ваше фото");
}
.hexagon:nth-of-type(6):before {
background-image: url("ваше фото");
}
.hexagon:nth-of-type(7):before {
background-image: url("ваше фото");
}
.hexagon:nth-of-type(8):before {
background-image: url("ваше фото");
}
.hexagon:nth-of-type(9):before {
background-image: url("ваше фото");
}
.hexagon:nth-of-type(1) {
top: 3em;
left: 5em;
}
.hexagon:nth-of-type(2) {
top: 11em;
left: 18em;
}
.hexagon:nth-of-type(3) {
top: 0;
left: 19em;
}
.hexagon:nth-of-type(4) {
top: 22em;
left: 10em;
}
.hexagon:nth-of-type(5) {
top: 27em;
left: 20em;
}
.hexagon:nth-of-type(6) {
top: 30em;
left: 5em;
}
.hexagon:nth-of-type(7) {
top: 10em;
left: 32em;
}
.hexagon:nth-of-type(8) {
top: 1em;
left: 1em;
}
.hexagon:nth-of-type(9) {
top: 23em;
left: 31em;
}
@media screen and (max-width: 767px) {
.hexagon:nth-of-type(1) {
top: 3em;
left: 5em;
}
.hexagon:nth-of-type(2) {
top: 17em;
left: 14em;
}
.hexagon:nth-of-type(3) {
top: 0;
left: 19em;
}
.hexagon:nth-of-type(4) {
top: 27em;
left: 6em;
}
.hexagon:nth-of-type(5) {
top: 33em;
left: 16em;
}
.hexagon:nth-of-type(6) {
top: 14em;
left: 1em;
}
.hexagon:nth-of-type(7) {
top: 40em;
left: 11em;
}
.hexagon:nth-of-type(8) {
top: 1em;
left: 1em;
}
.hexagon:nth-of-type(9) {
top: 11em;
left: 20em;
}
}
@media screen and (max-width: 580px) {
.hexagon:nth-of-type(1) {
top: 4em;
left: 4em;
}
.hexagon:nth-of-type(2) {
top: 20em;
left: 1em;
}
.hexagon:nth-of-type(3) {
top: 35em;
left: 7em;
}
.hexagon:nth-of-type(4) {
top: 43em;
left: 0em;
}
.hexagon:nth-of-type(5) {
top: 48em;
left: 9em;
}
.hexagon:nth-of-type(6) {
top: 20em;
left: 14em;
height: 4em;
width: 4em;
}
.hexagon:nth-of-type(7) {
top: 54em;
left: 3em;
}
.hexagon:nth-of-type(8) {
top: 1em;
left: 1em;
}
.hexagon:nth-of-type(9) {
top: 36em;
left: 4em;
height: 3em;
width: 3em;
}
}</style>
В коде можно поменять цвет шаров за фотографиями. Красным в коде выделила цвет первого шара.
Синим - цвет второго шара.
Зелёным - цвет третьего шара.
Фотографии устанавливаем в месте, выделенном в коде оранжевым цветом.
Увидела на сайте https://atuin.ru/
Полароидная галерея
<div class="photo-album">
<a href="картинка 1/" class="large polaroid img1"><img src="картинка 1" alt="">Ваш текст</a>
<a href="картинка 2/" class="polaroid img2"><img src="картинка 2" alt="">Ваш текст</a>
<a href="картинка 3/" class="medium polaroid img3"><img src="картинка 3" alt="">Ваш текст</a>
<a href="картинка 4/" class="polaroid img4"><img src="картинка 4" alt="">Ваш текст</a>
<a href="картинка 5/" class="polaroid img5"><img src="картинка 5" alt="">Ваш текст</a>
<a href="картинка 6/" class="polaroid img6"><img src="картинка 6" alt="">Ваш текст</a>
<a href="картинка 7/" class="small polaroid img7"><img src="картинка 7" alt="">Ваш текст</a>
<a href="картинка 8/" class="medium polaroid img8"><img src="картинка 8" alt="">Ваш текст</a>
<a href="картинка 9/" class="polaroid img9"><img src="картинка 9" alt="">Ваш текст</a>
<a href="картинка 10/" class="small polaroid img10"><img src="картинка 10" alt="">Ваш текст</a>
<a href="картинка 11/" class="small polaroid img11"><img src="картинка 11" alt="">Ваш текст</a>
<a href="картинка 12/" class="polaroid img12"><img src="картинка 12" alt="">Ваш текст</a>
</div>
<style>
a.polaroid {
font-family:'Open Sans', Arial, Helvetica, sans-serif;
font-size: 16px;
font-style:italic;
}
a.polaroid {
display: block;
text-decoration: none;
color: #333;
padding: 10px 10px 20px 10px;
width: 150px;
border: 1px solid #BFBFBF;
background-color: white;
z-index: 2;
font-size: 0.7em;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-webkit-transition: -webkit-transform 0.5s ease-in;
}
a.polaroid:hover, a.polaroid:focus, a.polaroid:active {
z-index: 999;
border-color: #6A6A6A;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.polaroid img {
margin: 0 0 15px;
width: 150px;
height: 150px;
}
a img {
border: none;
display: block;
}
.photo-album {
position: relative;
width: 80%;
margin: 0 auto;
max-width: 70em;
height: 450px;
margin-top: 5em;
min-width: 800px;
max-width: 900px;
}
.photo-album .polaroid {
position: absolute;
}
.photo-album .small {
width: 75px;
padding: 6px 6px 12px 6px;
font-size: 0.6em;
}
.photo-album .small img {
width: 75px;
height: 75px;
}
.photo-album .medium {
width: 200px;
padding: 13px 13px 26px 13px;
font-size: 0.8em;
}
.photo-album .medium img {
width: 200px;
height: 200px;
}
.photo-album .large {
width: 300px;
padding: 20px 20px 30px 20px;
font-size: 1em;
}
.photo-album .large img {
width: 300px;
height: 300px;
}
.photo-album .img1 {
bottom: 10px;
right: 365px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
transform: rotate(10deg);
}
.photo-album .img2 {
top: 50px;
right: 20px;
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.photo-album .img3 {
top: 10px;
left: 495px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.photo-album .img4 {
bottom: 0;
right: 0;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
transform: rotate(1deg);
}
.photo-album .img5 {
bottom: 10px;
right: 156px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
transform: rotate(6deg);
}
.photo-album .img6 {
bottom:0;
left:400px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.photo-album .img7 {
bottom: -20px;
left: 700px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img8 {
bottom: 0;
left: 0;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
.photo-album .img9 {
top: 0;
left: 20px;
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
transform: rotate(8deg);
}
.photo-album .img10 {
bottom: -20px;
right: 630px;
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
transform: rotate(4deg);
}
.photo-album .img11 {
top: 90px;
left: 430px;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
transform: rotate(15deg);
}
.photo-album .img12 {
left:176px;
top:20px;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
transform: rotate(-8deg);
}
a:hover, a:focus {
z-index: 5;
}
</style>
Картинок для галереи нужно 12. Их расположение в коде я отметила красным цветом.
Галерея с ховер-эффектом. При наведении на нижнюю фотографию, она всплывает наверх.
Изменять в коде адрес каждой картинки на свой нужно дважды. Первый адрес вписываем без окончания .jpg или .png. Не теряйте в коде знак слэша (/), при вставке адреса картинки.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv2MWurUO_4ebgoIGR1LhZ88ODk2VIN32pycoY1Iu_8oB0fWUc3zr4GBqdQ494ZIzLX85qjnWQTz4gNMjD6vkEkeomY-fAiy4wwd1HaplOp4g3PgOX18w2KWsFeoc6xCPnXJtLCSDttomW/s618/Foto-dlya-saita-175.jpg
Второй адрес вписываем полностью:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv2MWurUO_4ebgoIGR1LhZ88ODk2VIN32pycoY1Iu_8oB0fWUc3zr4GBqdQ494ZIzLX85qjnWQTz4gNMjD6vkEkeomY-fAiy4wwd1HaplOp4g3PgOX18w2KWsFeoc6xCPnXJtLCSDttomW/s618/Foto-dlya-saita-175.jpg
Тоже самое делаем со второй картинкой, третьей и т.д.
Число картинок в галерее можно увеличивать и уменьшать.
Удалить картинку можно так:
удаляем в коде строку с картинкой, например:
<a href="картинка 3/" class="medium polaroid img3"><img src="картинка 3" alt="">
Ваш текст</a>
И в стилях ищем отрезок кода к картинке 3 и удаляем (картинки пронумерованы):
.photo-album .img3 {
top: 10px;
left: 495px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform: rotate(-20deg);
}
Останется только в коде по-новому пронумеровать фото и стили, что бы они шли по-порядку -
1,2,3,4 и т.д.
Добавляем фото так:
копируем любую строку с картинками, например:
<a href="картинка 3/" class="medium polaroid img3"><img src="картинка 3" alt="">Ваш текст</a>
И вставляем в код.
Затем, копируем стили к картинке 3, вставляем и переномеровываем по-порядку все картинки
и стили в коде.
Заметьте, что снимок в галерее будет располагаться так же, как тот,что вы скопировали, по-этому стили нужно немного поменять. Пример:
.photo-album .img3 {
top: 10px; - меняя значения на большее или меньшее можно расположить снимок выше
или ниже.
left: 495px; - расположить левее или правее
-webkit-transform: rotate(-20deg); - сделать наклон сильнее, слабее или в другую сторону
-moz-transform: rotate(-20deg); - сделать наклон сильнее, слабее или в другую сторону
transform: rotate(-20deg); - сделать наклон сильнее, слабее или в другую сторону
}
Зелёным - цвет окаёмки полароидного снимка.
Оранжевым - цвет окаёмки полароидного снимка, при наведении курсора.
Розовым - цвет фона полароидного снимка.
Так же меняйте шрифт и размер шрифта, в коде отметила фиолетовым цветом.
С изменениями галерея может выглядеть, например так:
Идея кода - Pali Madra
На сегодня всё, продолжение в следующем сообщении.
Комментарии со спамом удаляются.