CSS - Định dạng Ảnh
Xin chào các bạn设计师 web đang học hỏi! Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình đầy thú vị qua thế giới định dạng ảnh bằng CSS. Là giáo viên máy tính thân thiện trong khu phố của bạn, tôi rất vui được hướng dẫn các bạn trong chuyến phiêu lưu này. Nhớ rằng, giống như việc học骑自行车, việc thành thạo CSS đòi hỏi sự thực hành, nhưng tôi诺言 rằng nó sẽ rất thú vị!
Định dạng Ảnh CSS - Ảnh Bo Tròn
Hãy bắt đầu với một điều đơn giản nhưng tinh tế: ảnh bo tròn. Bạn biết chúng ta thích làm mềm các mép trong cuộc sống phải không? Well, chúng ta cũng có thể làm điều đó với ảnh của mình!
<img src="cute_puppy.jpg" alt="Một chú chó con dễ thương" class="rounded-image">.rounded-image {
border-radius: 25px;
}Trong ví dụ này, chúng ta đang yêu cầu trình duyệt bo tròn các góc của ảnh chúng ta bằng 25 pixel. Đó là như cho ảnh của bạn một cuộc cắt tóc nhỏ! Bạn có thể điều chỉnh giá trị này để làm cho các góc bo tròn hơn hoặc ít hơn.
Định dạng Ảnh CSS - Ảnh Tròn
Bây giờ, hãy đi xa hơn một bước và biến ảnh của chúng ta thành những hình tròn完美. Điều này rất tuyệt cho ảnh hồ sơ hoặc bất kỳ ảnh nào bạn muốn tập trung vào trung tâm.
<img src="profile_pic.jpg" alt="Ảnh hồ sơ" class="circle-image">.circle-image {
border-radius: 50%;
width: 200px;
height: 200px;
object-fit: cover;
}Đây là nơi kỳ diệu xảy ra: border-radius: 50% biến hình ảnh vuông của chúng ta thành hình tròn. Chúng ta đặt một chiều rộng và chiều cao cố định, và object-fit: cover đảm bảo rằng ảnh sẽ.fill hình tròn mà không bị giãn.
Định dạng Ảnh CSS - Ảnh thu nhỏ
Thumbnail là như những đoạn trailer của thế giới ảnh - những bản xem trước nhỏ giúp bạn có cái nhìn tổng quan về ảnh đầy đủ. Hãy cùng tạo một few!
<img src="landscape.jpg" alt=" phong cảnh đẹp" class="thumbnail">.thumbnail {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
}CSS này tạo ra một thumbnail vuông nhỏ với viền đẹp. Thuộc tính object-fit: cover đảm bảo rằng ảnh sẽ.fill khu vực thumbnail mà không bị méo.
Định dạng Ảnh CSS - Thumbnail Ảnh Là Liên Kết
Hãy làm cho thumbnail của chúng ta có thể nhấp chuột! Điều này rất tuyệt cho các bộ sưu tập ảnh hoặc danh sách sản phẩm.
<a href="full_image.jpg">
<img src="thumbnail.jpg" alt="Nhấp để phóng to" class="thumbnail-link">
</a>.thumbnail-link {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: transform 0.3s ease;
}
.thumbnail-link:hover {
transform: scale(1.1);
}Chúng tôi đã thêm một hiệu ứng hover rất cool. Khi bạn di chuột qua thumbnail, nó sẽ稍微放大, mang lại cảm giác tương tác tốt.
Định dạng Ảnh CSS - Ảnh Phản H응
Trong thế giới đa thiết bị ngày nay, chúng ta cần ảnh của mình trông đẹp trên tất cả các kích thước màn hình. Hãy làm cho ảnh của chúng ta phản hồi!
<img src="scenery.jpg" alt=" phong cảnh đẹp" class="responsive-image">.responsive-image {
max-width: 100%;
height: auto;
}CSS đơn giản này đảm bảo rằng ảnh của chúng ta sẽ không bao giờ rộng hơn container của nó, và chiều cao sẽ điều chỉnh proportionally. Nó như một ảnh biết hành xử trong mọi tình huống!
Định dạng Ảnh CSS - Đặt Ảnh Giữa
Đặt ảnh giữa có thể là một điều khó khăn, nhưng tôi có một mẹo hay cho bạn. Nó như dạy ảnh của bạn đứng chính giữa sân khấu!
<div class="image-container">
<img src="centered_image.jpg" alt="Ảnh giữa" class="center-image">
</div>.image-container {
text-align: center;
}
.center-image {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}Phương pháp này hoạt động cho cả ảnh inline và block-level. Thuộc tính text-align: center trên container giúp với ảnh inline, trong khi margin: auto đặt ảnh block-level giữa.
Định dạng Ảnh CSS - Ảnh Polaroid / Thẻ
Bạn có nhớ máy ảnh Polaroid không? Hãy cùng tạo lại phong cách cổ điển đó với CSS!
<div class="polaroid">
<img src="vacation.jpg" alt="Kỷ niệm假期">
<div class="caption">Mùa hè 2023</div>
</div>.polaroid {
width: 250px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
margin-bottom: 25px;
}
.polaroid img {
width: 100%;
}
.caption {
text-align: center;
padding: 10px 20px;
}CSS này tạo ra một viền trắng xung quanh ảnh và thêm một bóng mờ nhẹ cho hiệu ứng 3D. Caption nằm dưỡdown ảnh, giống như một Polaroid thực tế!
Định dạng Ảnh CSS - Ảnh Trong Suốt
Đôi khi, chúng ta muốn ảnh của mình trong suốt. Nó như cho ảnh của bạn một chất lượng ma!
<img src="logo.png" alt="Logo công ty" class="transparent-image">.transparent-image {
opacity: 0.5;
}Thuộc tính opacity có giá trị từ 0 (hoàn toàn trong suốt) đến 1 (hoàn toàn không trong suốt). Bạn có thể điều chỉnh giá trị này để đạt được mức độ trong suốt mong muốn.
Định dạng Ảnh CSS - Đặt Văn Bản Giữa Ảnh
Hãy đặt một đoạn văn bản chính giữa ảnh. Nó như tạo ra một áp phích khuyến khích của riêng bạn!
<div class="image-text-container">
<img src="background.jpg" alt="Ảnh nền">
<div class="centered-text">Văn bản của bạn ở đây</div>
</div>.image-text-container {
position: relative;
text-align: center;
color: white;
}
.centered-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}CSS này sử dụng vị trí để đặt văn bản chính giữa ảnh. Thuộc tính transform đảm bảo rằng nó được đặt chính giữa theo cả phương vertial và horizontal.
Định dạng Ảnh CSS - Bộ Lọc
CSS filters là như Instagram cho ảnh web của bạn. Hãy chơi với một few!
<img src="landscape.jpg" alt="Phong cảnh" class="filtered-image">.filtered-image {
filter: grayscale(100%) brightness(150%) contrast(120%);
}Ví dụ này áp dụng nhiều bộ lọc: nó chuyển ảnh thành grayscale, tăng độ sáng và tăng độ tương phản. Bạn có thể trộn lẫn và kết hợp các bộ lọc khác nhau để tạo ra các hiệu ứng độc đáo!
Dưới đây là bảng một số bộ lọc CSS phổ biến:
| Bộ lọc | Mô tả | Ví dụ |
|---|---|---|
| grayscale() | Chuyển ảnh thành grayscale | filter: grayscale(100%); |
| sepia() | Chuyển ảnh thành sepia | filter: sepia(60%); |
| saturate() | Tăng độ bão hòa của ảnh | filter: saturate(200%); |
| hue-rotate() | Áp dụng một旋转 của màu | filter: hue-rotate(90deg); |
| invert() | Đảo ngược màu của ảnh | filter: invert(75%); |
| opacity() | Đặt độ trong suốt của ảnh | filter: opacity(25%); |
| brightness() | Điều chỉnh độ sáng | filter: brightness(150%); |
| contrast() | Điều chỉnh độ tương phản | filter: contrast(200%); |
| blur() | Áp dụng hiệu ứng mờ | filter: blur(5px); |
Định dạng Ảnh CSS - Mờ Dần Khi Hover
Hãy tạo một hiệu ứng mờ dần khi di chuột qua ảnh. Nó như tiết lộ một thông điệp bí mật!
<div class="image-overlay">
<img src="product.jpg" alt="Ảnh sản phẩm">
<div class="overlay">
<div class="text">Mô tả sản phẩm</div>
</div>
</div>.image-overlay {
position: relative;
width: 50%;
}
.image-overlay img {
display: block;
width: 100%;
height: auto;
}
.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-overlay: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 mờ đen fade vào khi bạn di chuột qua ảnh, tiết lộ văn bản.
Định dạng Ảnh CSS - Hiệu ứng Trượt Vào
Bây giờ, hãy tạo một hiệu ứng trượt vào cho tiêu đề của ảnh. Nó như kéo màn để tiết lộ ngôi sao của chương trình!
<div class="slide-container">
<img src="nature.jpg" alt="Cảnh thiên nhiên" class="slide-image">
<div class="slide-caption">Đẹp tự nhiên</div>
</div>.slide-container {
position: relative;
overflow: hidden;
}
.slide-image {
display: block;
width: 100%;
height: auto;
}
.slide-caption {
position: absolute;
bottom: 0;
left: 100%;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
transition: 0.5s ease;
width: 100%;
}
.slide-container:hover .slide-caption {
left: 0;
}CSS này ẩn tiêu đề off-screen và trượt nó vào từ bên phải khi bạn di chuột qua ảnh.
Định dạng Ảnh CSS - Đảo Lật Ảnh
Hãy thêm một hiệu ứng đảo lat với một cú nhấp chuột! Nó như cấp vé hậu trường để展示 mặt sau của ảnh.
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="front.jpg" alt="Mặt trước">
</div>
<div class="back">
<img src="back.jpg" alt="Mặt sau">
</div>
</div>
</div>.flip-container {
width: 300px;
height: 200px;
perspective: 1000px;
}
.flipper {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-container:hover .flipper {
transform: rotateY(180deg);
}
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}CSS này tạo ra một hiệu ứng 3D đảo lat khi bạn di chuột qua container. Mặt trước của ảnh đảo lat để tiết lộ mặt sau.
Định dạng Ảnh CSS - Bộ Sưu Tập Ảnh Phản H응
Hãy kết hợp kỹ năng của chúng ta để tạo ra một bộ sưu tập ảnh phản hồi. Nó như curator của riêng bạn triển lãm nghệ thuật mini!
<div class="gallery">
<img src="img1.jpg" alt="Ảnh bộ sưu tập 1">
<img src="img2.jpg" alt="Ảnh bộ sưu tập 2">
<img src="img3.jpg" alt="Ảnh bộ sưu tập 3">
<img src="img4.jpg" alt="Ảnh bộ sưu tập 4">
</div>.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gallery img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
@media screen and (min-width: 600px) {
.gallery img {
width: 49%;
margin: 0.5%;
}
}
@media screen and (min-width: 1000px) {
.gallery img {
width: 24%;
margin: 0.5%;
}
}CSS này tạo ra một bộ sưu tập flexible điều chỉnh dựa trên kích thước màn hình. Trên màn hình nhỏ, ảnh.stack vertically. Trên màn hình trung bình, chúng tạo thành hai cột, và trên màn hình lớn, chúng tạo thành bốn cột.
Định dạng Ảnh CSS - Modal Ảnh
Cuối cùng, hãy tạo một modal xuất hiện khi bạn nhấp vào ảnh. Nó như cấp cho ảnh của bạn một spotlight của riêng mình!
<img src="thumbnail.jpg" alt="Nhấp để phóng to" class="modal-trigger" onclick="openModal(this)">
<div id="imageModal" class="modal">
<span class="close" onclick="closeModal()">×</span>
<img class="modal-content" id="modalImage">
</div>.modal-trigger {
cursor: pointer;
transition: 0.3s;
}
.modal-trigger:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}function openModal(img) {
var modal = document.getElementById("imageModal");
var modalImg = document.getElementById("modalImage");
modal.style.display = "block";
modalImg.src = img.src;
}
function closeModal() {
document.getElementById("imageModal").style.display = "none";
}Combination của HTML, CSS và JavaScript này tạo ra một modal xuất hiện khi bạn nhấp vào ảnh, hiển thị ảnh lớn hơn.
Và đó là nó, các bạn! Chúng ta đã cùng nhau hành trình qua thế giới định dạng ảnh bằng CSS. Nhớ rằng, chìa khóa để thành thạo các kỹ thuật này là sự thực hành. Vậy hãy tiếp tục chơi với các ví dụ này, trộn lẫn và kết hợp, và tạo ra điều gì đó hoàn toàn riêng của bạn. Chúc các bạn may mắn!
Credits: Image by storyset