CSS - Галерея изображений

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

Простая галерея изображений

Давайте начнем с азов. Простая галерея изображений — это как развешивание фотографий на стене — все дело в представлении. Вот как мы можем создать одну с помощью CSS:

<div class="gallery">
<img src="image1.jpg" alt="Изображение 1">
<img src="image2.jpg" alt="Изображение 2">
<img src="image3.jpg" alt="Изображение 3">
</div>

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
}

.gallery img {
width: 200px;
height: 200px;
margin: 10px;
object-fit: cover;
}

В этом примере мы используем flexbox для создания адаптивного макета. Сvojstvo flex-wrap: wrap обеспечивает換чение изображений на следующую строку, если не хватает места. justify-content: center выравнивает наши изображения по горизонтали.

Галерея изображений с эффектом при наведении

Теперь добавим немного интерактивности! Эффекты при наведении могут сделать вашу галерею более привлекательной. Это как добавить тайное сообщение, которое появляется только при近距离 рассмотрении.

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="Изображение 1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<!-- Повторите для других изображений -->
</div>

.image-container {
position: relative;
width: 200px;
height: 200px;
}

.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: rgba(0,0,0,0.5);
}

.image-container:hover .overlay {
opacity: 1;
}

.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

Этот CSS создает оверлей, который появляется при наведении на изображение. Свойство transition обеспечивает плавный эффект затемнения.

Галерея изображений с адаптивным дизайном с использованием Media Query

В世界里 много устройств, поэтому адаптивность — это ключ. Давайте сделаем нашу галерею адаптивной к разным размерам экранов:

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}

@media screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}

@media screen and (max-width: 400px) {
.gallery {
grid-template-columns: 1fr;
}
}

Этот CSS использует CSS Grid для создания адаптивного макета. Функция minmax обеспечивает ширину изображений не менее 200px, но они могут увеличиться, если позволяет место. Media queries изменяют макет для smaller экранов.

Синтаксис

Давайте на минутку разберем синтаксис, который мы использовали. Свойства CSS следуют этой структуре:

селектор {
свойство: значение;
}

Вот таблица.common свойств CSS, используемых в галереях изображений:

Свойство	Описание	Пример
display	Указывает поведение отображения	display: flex;
width	Устанавливает ширину элемента	width: 200px;
height	Устанавливает высоту элемента	height: 200px;
margin	Устанавливает отступы элемента	margin: 10px;
object-fit	Указывает, как должно быть изменено изображение	object-fit: cover;
position	Указывает метод позиционирования	position: relative;
opacity	Устанавливает уровень прозрачности	opacity: 0;
transition	Указывает эффект transitions	transition: 0.5s ease;

Галерея изображений с горизонтальной прокруткой

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

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="Изображение 1">
<img src="image2.jpg" alt="Изображение 2">
<!-- Добавьте больше изображений по мере необходимости -->
</div>
</div>

.gallery-container {
width: 100%;
overflow-x: auto;
}

.gallery-scroll {
display: flex;
width: max-content;
}

.gallery-scroll img {
width: 200px;
height: 200px;
margin-right: 10px;
object-fit: cover;
}

Этот CSS создает горизонтально прокручиваемую галерею. Свойство overflow-x: auto добавляет горизонтальную полосу прокрутки при необходимости.

Галерея изображений с вертикальной прокруткой

Горизонтальные прокрутки галерей великолепны для демонстрации большого количества изображений в compact пространстве:

<div class="gallery-vertical">
<img src="image1.jpg" alt="Изображение 1">
<img src="image2.jpg" alt="Изображение 2">
<!-- Добавьте больше изображений по мере необходимости -->
</div>

.gallery-vertical {
height: 400px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
}

.gallery-vertical img {
width: 200px;
height: 200px;
margin-bottom: 10px;
object-fit: cover;
}

Этот CSS создает вертикально прокручиваемую галерею. Свойство overflow-y: scroll добавляет вертикальную полосу прокрутки.

Галерея изображений с использованием CSS Grid

CSS Grid — это мощный инструмент для создания сложных макетов. Давайте используем его для создания динамичной галереи:

<div class="grid-gallery">
<img src="image1.jpg" alt="Изображение 1">
<img src="image2.jpg" alt="Изображение 2">
<img src="image3.jpg" alt="Изображение 3">
<img src="image4.jpg" alt="Изображение 4">
<img src="image5.jpg" alt="Изображение 5">
</div>

.grid-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}

.grid-gallery img {
width: 100%;
height: 200px;
object-fit: cover;
}

.grid-gallery img:nth-child(4) {
grid-column: span 2;
}

.grid-gallery img:nth-child(5) {
grid-row: span 2;
}

Этот CSS создает сетчатый макет, где некоторые изображения занимают несколько столбцов или строк, создавая более динамичный макет.

Галерея изображений с вкладками

Вкладки — это отличный способ organize مختلف наборы изображений:

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">Природа</button>
<button class="tablinks" onclick="openTab(event, 'City')">Город</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="Природа 1">
<img src="nature2.jpg" alt="Природа 2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="Город 1">
<img src="city2.jpg" alt="Город 2">
</div>

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button.active {
background-color: #ccc;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

Этот CSS создает интерфейс с вкладками. Вам потребуется немного JavaScript, чтобы сделать его функциональным:

function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}

CSS слайдшоу

Давайте создадим простое слайдшоу:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

Вам потребуется немного JavaScript для управления слайдшоу:

var slideIndex = 0;
showSlides();

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Изменение изображения каждые 2 секунды
}

Галерея изображений со слайдшоу и миниатюрами

Наконец, давайте combine наше слайдшоу с миниатюрами для более интерактивного опыта:

<div class="slideshow-container">
<div class="mySlides fade">
<img src="img1.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img2.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img3.jpg" style="width:100%">
</div>
</div>

<div class="row">
<div class="column">
<img class="demo cursor" src="img1.jpg" style="width:100%" onclick="currentSlide(1)">
</div>
<div class="column">
<img class="demo cursor" src="img2.jpg" style="width:100%" onclick="currentSlide(2)">
</div>
<div class="column">
<img class="demo cursor" src="img3.jpg" style="width:100%" onclick="currentSlide(3)">
</div>
</div>

.row {
display: flex;
}

.column {
flex: 33.33%;
padding: 5px;
}

.demo {
opacity: 0.6;
}

.active,
.demo:hover {
opacity: 1;
}

Вам потребуется изменить JavaScript для обработки щелчков по миниатюрам:

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

И вот мы и добрались до конца! Мы рассмотрели широкий спектр техник для создания CSS галерей изображений. Помните, что практика делает мастера. Попробуйте combining эти техники, чтобы создать свои уникальные галереи. Удачи в кодировании!

Credits: Image by storyset