CSS - B thư viện hình ảnh

Chào mừng các bạn设计师 web tương lai! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của CSS Image Galleries. Là giáo viên máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn các bạn trong hành trình này. Hãy biến những hình ảnh tĩnh nhàm chán thành những thư viện hình ảnh bắt mắt, tương tác để làm cho trang web của bạn nổi bật!

Thư viện hình ảnh đơn giản

Hãy bắt đầu từ cơ bản. Một thư viện hình ảnh đơn giản giống như treo ảnh trên tường - tất cả là về cách trình bày. Dưới đây là cách chúng ta có thể tạo một thư viện hình ảnh bằng CSS:

<div class="gallery">
<img src="image1.jpg" alt="Hình ảnh 1">
<img src="image2.jpg" alt="Hình ảnh 2">
<img src="image3.jpg" alt="Hình ảnh 3">
</div>

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

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

Trong ví dụ này, chúng ta sử dụng flexbox để tạo một bố cục đáp ứng. Thuộc tính flex-wrap: wrap đảm bảo rằng hình ảnh sẽ cuộn xuống dòng tiếp theo nếu không đủ không gian. justify-content: center giúp căn giữa hình ảnh theo chiều ngang.

Thư viện hình ảnh với hiệu ứng Hover

Bây giờ, hãy thêm một chút tương tác! Hiệu ứng hover có thể làm cho thư viện hình ảnh hấp dẫn hơn. Đó giống như thêm một thông điệp bí mật chỉ xuất hiện khi bạn nhìn kỹ.

<div class="gallery">
<div class="image-container">
<img src="image1.jpg" alt="Hình ảnh 1">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<!-- Lặp lại cho các hình ảnh khác -->
</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 này tạo ra một lớp che khi bạn hover vào hình ảnh. Thuộc tính transition cho phép nó có hiệu ứng mờ dần.

Thư viện hình ảnh đáp ứng sử dụng Media Query

Trong thế giới đa thiết bị hiện nay, tính năng đáp ứng là rất quan trọng. Hãy làm cho thư viện hình ảnh của chúng ta adapt với các kích thước màn hình khác nhau:

.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 này sử dụng CSS Grid để tạo một bố cục đáp ứng. Hàm minmax đảm bảo rằng hình ảnh có ít nhất 200px rộng, nhưng có thể lớn hơn nếu có đủ không gian. Các media query điều chỉnh bố cục cho màn hình nhỏ hơn.

Cú pháp

Hãy cùng nhau hiểu cú pháp chúng ta đã sử dụng. Các thuộc tính CSS có cấu trúc như sau:

selector {
property: value;
}

Dưới đây là bảng các thuộc tính CSS phổ biến được sử dụng trong thư viện hình ảnh:

Thuộc tính	Mô tả	Ví dụ
display	Chỉ định hành vi hiển thị	display: flex;
width	Đặt chiều rộng của một phần tử	width: 200px;
height	Đặt chiều cao của một phần tử	height: 200px;
margin	Đặt lề của một phần tử	margin: 10px;
object-fit	Chỉ định cách hình ảnh nên được缩放	object-fit: cover;
position	Chỉ định phương thức định vị được sử dụng	position: relative;
opacity	Đặt mức độ trong suốt cho một phần tử	opacity: 0;
transition	Chỉ định hiệu ứng chuyển đổi	transition: 0.5s ease;

Thư viện hình ảnh cuộn ngang

Đôi khi, bạn muốn thư viện hình ảnh cuộn ngang. Đó giống như một cuộn ảnh bạn có thể lướt qua:

<div class="gallery-container">
<div class="gallery-scroll">
<img src="image1.jpg" alt="Hình ảnh 1">
<img src="image2.jpg" alt="Hình ảnh 2">
<!-- Thêm nhiều hình ảnh hơn nếu cần -->
</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 này tạo ra một thư viện hình ảnh cuộn ngang. Thuộc tính overflow-x: auto thêm một thanh cuộn ngang khi cần thiết.

Thư viện hình ảnh cuộn dọc

Thư viện hình ảnh cuộn dọc rất tốt để trình bày một số lượng lớn hình ảnh trong không gian nhỏ:

<div class="gallery-vertical">
<img src="image1.jpg" alt="Hình ảnh 1">
<img src="image2.jpg" alt="Hình ảnh 2">
<!-- Thêm nhiều hình ảnh hơn nếu cần -->
</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 này tạo ra một thư viện hình ảnh cuộn dọc. Thuộc tính overflow-y: scroll thêm một thanh cuộn dọc.

Thư viện hình ảnh sử dụng CSS Grid

CSS Grid là một công cụ mạnh mẽ để tạo ra các bố cục phức tạp. Hãy sử dụng nó để tạo một thư viện hình ảnh động:

<div class="grid-gallery">
<img src="image1.jpg" alt="Hình ảnh 1">
<img src="image2.jpg" alt="Hình ảnh 2">
<img src="image3.jpg" alt="Hình ảnh 3">
<img src="image4.jpg" alt="Hình ảnh 4">
<img src="image5.jpg" alt="Hình ảnh 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 này tạo ra một bố cục lưới nơi một số hình ảnh chiếm nhiều cột hoặc hàng, tạo ra một bố cục động.

Thư viện hình ảnh Tabbed

Tabbed galleries là một cách tuyệt vời để tổ chức các bộ hình ảnh khác nhau:

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

Bạn sẽ cần một chút JavaScript để làm cho nó hoạt động:

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

Thư viện hình ảnh Slideshow

Hãy tạo một slideshow đơn giản:

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

Bạn sẽ cần một chút JavaScript để kiểm soát 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); // Thay đổi hình ảnh mỗi 2 giây
}

Thư viện hình ảnh Slideshow với Thumbnail

Cuối cùng, hãy kết hợp slideshow với các thumbnail để có một trải nghiệm tương tác hơn:

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

Bạn sẽ cần phải sửa đổi JavaScript để xử lý các thumbnail click:

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

Và thế là xong! Chúng ta đã bao gồm một loạt các kỹ thuật CSS để tạo ra các thư viện hình ảnh. Hãy thực hành kết hợp các kỹ thuật này để tạo ra các thư viện hình ảnh độc đáo của riêng bạn. Chúc các bạn may mắn!

Credits: Image by storyset