CSS - Galeri imej

Selamat datang, para pemula desainer web! Hari ini, kita akan melihat dunia yang menarik dari Galeri Imej CSS. Sebagai guru komputer di lingkungan yang ramah, saya sangat gembira untuk mengorbit anda dalam perjalanan ini. Mari kita ubah imej statik yang membosankan menjadi galeri interaktif dan menarik yang akan membuat laman web anda nampak menarik!

Galeri Imej Ringkas

Mari kita mulakan dengan dasar. Galeri imej ringkas adalah seperti mengatur foto di dinding anda - ia tentang presentasi. Berikut adalah cara untuk membuatnya menggunakan CSS:

<div class="gallery">
<img src="image1.jpg" alt="Imej 1">
<img src="image2.jpg" alt="Imej 2">
<img src="image3.jpg" alt="Imej 3">
</div>

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

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

Dalam contoh ini, kita menggunakan flexbox untuk membuat susun atur yang responsif. Properti flex-wrap: wrap memastikan imej kita akan lipat ke baris berikutnya jika ruang tidak cukup. justify-content: center mengcantulkan imej secara horisontal.

Galeri Imej Dengan Kesan Hover

Sekarang, mari kita tambahkan sedikit interaktiviti! Kesan hover boleh membuat galeri anda lebih menarik. Itu seperti menambah pesan rahasia yang hanya muncul ketika anda melihat dekat.

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="Imej 1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<!-- Ulangi untuk imej lain -->
</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 ini membuat penutup yang muncul saat anda hover di atas imej. Properti transition memberikan kesan pemudar yang halus.

Galeri Imej Responsif Menggunakan Media Query

Dalam dunia multi-peranti hari ini, responsif adalah kunci. Mari kita buat galeri yang menyesuaikan saiz skrin berbeza:

.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 ini menggunakan CSS Grid untuk membuat susun atur yang responsif. Fungsi minmax memastikan imej adalah sekurang-kurangnya 200px lebarnya, tetapi boleh besar jika ruang membolehkan. Media query menyesuaikan susun atur untuk skrin yang lebih kecil.

Sintaks

Mari kitaambil sedikit masa untuk memahami sintaks yang kita gunakan. Properti CSS mengikuti struktur berikut:

selector {
property: value;
}

Berikut adalah jadual properti CSS umum yang digunakan dalam galeri imej:

Properti	Keterangan	Contoh
display	Nyatakan tingkah laku paparan	display: flex;
width	Tetapkan lebarnya elemen	width: 200px;
height	Tetapkan tingginya elemen	height: 200px;
margin	Tetapkan marjin elemen	margin: 10px;
object-fit	Nyatakan bagaimana imej hendak diubah saiz	object-fit: cover;
position	Nyatakan jenis kaedah penempatan	position: relative;
opacity	Tetapkan tahap kelegapan elemen	opacity: 0;
transition	Nyatakan kesan perubahan	transition: 0.5s ease;

Galeri Imej Dengan Skrol Horizontal

kadang-kadang, anda mahu galeri anda skrol secara horisontal. Itu seperti gulungan foto yang anda boleh geser:

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="Imej 1">
<img src="image2.jpg" alt="Imej 2">
<!-- Tambahkan lagi imej jika diperlukan -->
</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 ini membuat galeri yang boleh skrol secara horisontal. Properti overflow-x: auto menambahkan scrollbar horisontal jika diperlukan.

Galeri Imej Dengan Skrol Vertikal

Galeri skrol vertikal adalah idea untuk menunjukkan banyak imej dalam ruang kecil:

<div class="gallery-vertical">
<img src="image1.jpg" alt="Imej 1">
<img src="image2.jpg" alt="Imej 2">
<!-- Tambahkan lagi imej jika diperlukan -->
</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 ini membuat galeri yang boleh skrol secara vertikal. Properti overflow-y: scroll menambahkan scrollbar vertikal.

Galeri Imej Menggunakan CSS Grid

CSS Grid adalah alat kuat untuk membuat susun atur kompleks. Mari kita gunakan itu untuk membuat galeri dinamik:

<div class="grid-gallery">
<img src="image1.jpg" alt="Imej 1">
<img src="image2.jpg" alt="Imej 2">
<img src="image3.jpg" alt="Imej 3">
<img src="image4.jpg" alt="Imej 4">
<img src="image5.jpg" alt="Imej 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 ini membuat susun atur grid di mana beberapa imej melintasi beberapa kolom atau baris, mencipta susun atur yang lebih dinamik.

Galeri Imej Dengan Tab

Galeri tab adalah cara bagus untuk mengatur set imej berbeza:

<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Nature')">Nature</button>
<button class="tablinks" onclick="openTab(event, 'City')">City</button>
</div>

<div id="Nature" class="tabcontent">
<img src="nature1.jpg" alt="Nature 1">
<img src="nature2.jpg" alt="Nature 2">
</div>

<div id="City" class="tabcontent">
<img src="city1.jpg" alt="City 1">
<img src="city2.jpg" alt="City 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 ini membuat antara muka tab. Anda akan memerlukan JavaScript untuk menjadikannya berfungsi:

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";
}

Slideshow CSS

Mari kita buat slideshow ringkas:

<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}
}

Anda akan memerlukan JavaScript untuk mengawal slideshow:

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); // Ubah imej setiap 2 saat
}

Galeri Slideshow Dengan Thumbnail

Akhirnya, mari kita gabungkan slideshow dengan thumbnail untuk pengalaman interaktif yang lebih:

<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;
}

Anda akan perlu mengubah JavaScript untuk mengawal klik thumbnail:

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";
}

Dan begitu juga, kita sudah meliputi banyak teknik galeri imej CSS. Ingat, latihan membuat sempurna. Cobalah untuk menggabungkan teknik ini untuk membuat galeri unik anda sendiri. Selamat berkoding!

Credits: Image by storyset