Галерея изображений Lightbox на чистом CSS
Это что-то похоже на слайдер, но все же это красиво исполненная по дизайну галерея, что по умолчанию сделано под светлый формат. Это потому, что здесь присутствуют тени, которые закреплены за каждым снимком. Присутствующий вариант галереи изображений отлично поможет организовать как можно большое количество изображений, где все будет находиться в данном каркасе. Здесь задействовано четыре снимка разного размера, но вы можете увеличивать или уменьшать размер изображения по своему желанию.
Так смотрится стиль с переключением картинок:
Надеюсь, вы поняли из этого руководства, как сделать галерею изображений для лайтбоксов с помощью только HTML и CSS.
Установочный процесс:
#gravise-logas <
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 1;
font-size: 75px;
background:-webkit-linear-gradient(#00aff9,#0086c3);
background: linear-gradient(#00aff9,#0086c3);
color: #342c2a;
-webkit-animation: slide 1.5s ease-in-out forwards;
animation: slide 1.5s ease-in-out forwards;
#kadovka1, #kadovka2, #kadovka3, #slider4 <
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
opacity: 0;
background:-webkit-linear-gradient(#00aff9,#0086c3);
background: linear-gradient(#00aff9,#0086c3);
color: #342c2a;
font-size: 75px;
>
img <
text-align: center;
margin: 0;
height: 300px;
width: 500px;
>
.kupevo_bloka <
width: 500px;
margin: 0 auto;
>
.cepaclekun <
position: relative;
top: 0;
left: 0;
width: 500px;
height: 300px;
margin: 0;
padding: 0;
background: #282929;
box-shadow: 0px 0px 40px rgba(0,0,0,0.6);
border: 1px solid #fff;
>
.navigation <
position: absolute;
bottom: 0px;
left: -140px;
margin: 0;
padding: 0;
>
li <
color: transparent;
>
.atakve <
float: left;
margin: 6px;
width: 120px;
height: 63px;
text-align: center;
border: 1px solid #fff;
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-webkit-transition: 0.1s ease-in;
transition: 0.1s ease-in;
>
.atakve a img <
display: block;
text-decoration: none;
height: 63px;
width: 120px;
letter-spacing: 2px;
font-size: 12px;
>
.atakve:hover <
-webkit-transition: 0.1s ease-in;
transition: 0.1s ease-in;
-webkit-transform: scale(1.2);
transform: scale(1.2);
background: #00aff9;
#kadovka1:target, #kadovka2:target, #kadovka3:target, #kadovka4:target <
-webkit-animation: slide 1.5s ease-in-out forwards;
animation: slide 1.5s ease-in-out forwards;
>
Надеюсь вы все поняли, так как здесь все выполнено не сложно, также присутствует демонстрация, которая поможет вам узнать, как по своим функциям работает галерея Image Lightbox.
Базовая структура галереи изображений была создана с использованием не сложного кода, где вверх идет под большое изображение, ниже вы ставите аналогичный снимок, который дублирует основное изображение.
По своим характеристикам все просто и доступно, но есть один минус, этот вид не адаптивный, что корректно на мобильном аппарате не будет выводить. Если кто в курсе, как эту галерею сделать отзывчивой, то прошу помочь, так как здесь нужно выставить Медео под элементы для основы самой галереи.
Галерея изображений на чистом CSS без JavaScript
Возможности CSS с каждым разом удивляют все сильнее! На этот раз покажем вам как сделать простую галерею на CSS без использования JavaScript.
Для этого воспользуемся селектором :target, который указывает на то, элемент с каким ID сейчас должен быть активен.
