CSS -Layers: Khám phá Nghệ thuật Sâu hơn trong Thiết kế Web

Xin chào, các bạn thiết kế web đang trên đà trở thành chuyên gia! Hôm nay, chúng ta sẽ cùng lặn vào thế giới kỳ diệu của các lớp CSS. Hãy tưởng tượng trang web của bạn là một.canvas, và các lớp là những yếu tố khác nhau mà bạn có thể chồng lên nhau để tạo ra độ sâu và chiều sâu. Đó như việc tạo ra một bản collage số - thú vị phải không? Hãy bắt đầu nào!

CSS Layers - Với thuộc tính z-index

Z-index là gì?

Thuộc tính z-index giống như một chiếc thang máy ma thuật cho các phần tử HTML của bạn. Nó xác định phần tử nào sẽ xuất hiện ở trên cùng khi chúng chồng lên nhau. Hãy tưởng tượng việc gán số tầng cho các phần tử của bạn trong một tòa nhà cao tầng của thiết kế web.

Hãy xem một ví dụ đơn giản:

<div class="container">
<div class="box red">1</div>
<div class="box blue">2</div>
<div class="box green">3</div>
</div>

.container {
position: relative;
}

.box {
width: 100px;
height: 100px;
position: absolute;
}

.red {
background-color: red;
z-index: 1;
top: 0;
left: 0;
}

.blue {
background-color: blue;
z-index: 2;
top: 30px;
left: 30px;
}

.green {
background-color: green;
z-index: 3;
top: 60px;
left: 60px;
}

Trong ví dụ này, chúng ta có ba hộp với các giá trị z-index khác nhau. Hộp xanh (z-index: 3) sẽ xuất hiện ở trên cùng, tiếp theo là hộp xanh lam (z-index: 2), và sau đó là hộp đỏ (z-index: 1).

Lời khuyên chuyên nghiệp:

Nhớ rằng, z-index chỉ hoạt động trên các phần tử có giá trị vị trí khác static (như relative, absolute, hoặc fixed).

CSS Layers - Hình ảnh và Văn bản

Bây giờ, hãy cùng sáng tạo và chồng các hình ảnh và văn bản!

<div class="image-container">
<img src="background.jpg" alt="Background" class="background">
<div class="text-overlay">
<h2>Chào mừng đến với Website của tôi</h2>
<p>Khám phá vẻ đẹp của các lớp CSS!</p>
</div>
</div>

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

.background {
width: 100%;
height: 100%;
object-fit: cover;
}

.text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}

Trong ví dụ này, chúng ta có một hình nền với văn bản chồng lên trên. Phần tử text-overlay được đặt tuyệt đối trong một容器 tương đối, cho phép chúng ta đặt nó chính giữa hình ảnh.

Đ趣 sự thật:

Kỹ thuật này thường được sử dụng trong các phần hero của các trang web để tạo ra các tiêu đề bắt mắt!

CSS Layers - Không sử dụng thuộc tính z-index

Đôi khi, bạn không cần z-index để tạo ra các lớp. Thứ tự của các phần tử trong HTML có thể xác định thứ tự chồng của chúng.

<div class="stacked-boxes">
<div class="box bottom">Bottom</div>
<div class="box middle">Middle</div>
<div class="box top">Top</div>
</div>

.stacked-boxes {
position: relative;
height: 200px;
width: 200px;
}

.box {
position: absolute;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
color: white;
}

.bottom {
background-color: blue;
top: 0;
left: 0;
}

.middle {
background-color: green;
top: 30px;
left: 30px;
}

.top {
background-color: red;
top: 60px;
left: 60px;
}

Trong ví dụ này, các hộp sẽ chồng lên nhau dựa trên thứ tự của chúng trong HTML. Hộp "top" sẽ xuất hiện ở trên cùng, tiếp theo là "middle", và sau đó là "bottom".

Nhớ rằng:

Khi không sử dụng z-index, các phần tử xuất hiện sau trong HTML sẽ được hiển thị ở trên các phần tử trước.

Kết hợp tất cả lại với nhau

Bây giờ, chúng ta đã khám phá các cách khác nhau để tạo ra các lớp, hãy kết hợp kiến thức của chúng ta vào một ví dụ phức tạp hơn:

<div class="scene">
<img src="landscape.jpg" alt="Landscape" class="background">
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="sun"></div>
<div class="bird bird1"></div>
<div class="bird bird2"></div>
<div class="message">Chào mừng đến với thế giới lớp của chúng tôi!</div>
</div>

.scene {
position: relative;
width: 800px;
height: 600px;
overflow: hidden;
}

.background {
width: 100%;
height: 100%;
object-fit: cover;
}

.cloud {
position: absolute;
width: 200px;
height: 100px;
background-color: white;
border-radius: 50px;
}

.cloud1 {
top: 50px;
left: 100px;
z-index: 2;
}

.cloud2 {
top: 100px;
right: 150px;
z-index: 2;
}

.sun {
position: absolute;
top: 50px;
right: 50px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
z-index: 1;
}

.bird {
position: absolute;
width: 30px;
height: 20px;
background-color: black;
clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

.bird1 {
top: 150px;
left: 300px;
z-index: 3;
}

.bird2 {
top: 200px;
right: 400px;
z-index: 3;
}

.message {
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
background-color: rgba(255, 255, 255, 0.7);
padding: 20px;
border-radius: 10px;
z-index: 4;
}

Trong cảnh phức tạp này, chúng ta đã sử dụng sự kết hợp của z-index và thứ tự phần tử để tạo ra một cảnh lớp. Hình nền là ở dưới cùng, tiếp theo là mặt trời, sau đó là các đám mây, chim, và cuối cùng là thông điệp chào mừng ở trên cùng.

Kết luận

Chúc mừng! Bạn đã bước những bước đầu tiên vào thế giới các lớp CSS. Nhớ rằng, việc tạo ra độ sâu trong thiết kế web của bạn giống như việc vẽ một bức tranh - nó đòi hỏi sự thực hành và sáng tạo. Đừng ngại thử nghiệm với các giá trị z-index khác nhau và vị trí phần tử để đạt được的外观 hoàn hảo cho trang web của bạn.

Dưới đây là bảng tham khảo nhanh các phương pháp chúng ta đã covered:

Phương pháp	Mô tả	Trường hợp sử dụng
z-index	Đặt rõ thứ tự chồng	Khi bạn cần kiểm soát chính xác việc chồng lớp
Thứ tự HTML	Phần tử chồng dựa trên thứ tự trong HTML	Đối với việc chồng đơn giản mà không cần z-index
Định vị tuyệt đối	Cho phép đặt phần tử chính xác	Để chồng các phần tử ở một vị trí cụ thể
Độ trong suốt	Có thể ảnh hưởng đến ngữ cảnh chồng	Để tạo ra các lớp phủ bán trong suốt

Nhớ rằng, chìa khóa để thành thạo các lớp CSS là sự thực hành. Vậy hãy bắt đầu chồng lớp và nhìn thấy thiết kế web của bạn sống động với độ sâu và chiều sâu!

Credits: Image by storyset