9.1 Cải thiện tính tương tác bằng Pseudo-classes
Các pseudo-classes và pseudo-elements trong CSS là những công cụ lợi hại để cải thiện thiết kế và trải nghiệm người dùng (UX) trên các trang web. Với chúng, bạn có thể tạo ra các thành phần tương tác và động, cải thiện nhận thức thị giác và tăng cường khả năng tiếp cận.
Hãy xem qua vài ví dụ về cách sử dụng pseudo-classes và pseudo-elements cho những mục tiêu này.
1. Hover chuột
Pseudo-class :hover cho phép thay đổi kiểu của một phần tử khi người dùng di chuột lên nó. Điều này đặc biệt hữu ích cho các nút và liên kết.
Ví dụ: Thay đổi màu nút khi hover
Trong ví dụ này, màu nền của nút thay đổi khi người dùng hover chuột, điều này cải thiện phản hồi thị giác và làm cho giao diện trở nên tương tác hơn:
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
<button>Click Me</button>
2. Focus của phần tử
Pseudo-class :focus được dùng để tạo kiểu cho các phần tử form khi chúng đang ở trạng thái focus.
Điều này giúp người dùng biết phần tử nào đang được điền vào.
Ví dụ: Tạo kiểu cho trường nhập liệu khi focus
Trong ví dụ này, trường nhập liệu nhận được viền xanh và bóng mờ khi focus, cải thiện tính năng nhìn thấy của phần tử form đang hoạt động:
input[type="text"] {
border: 1px solid #ccc;
padding: 10px;
}
input[type="text"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
<input type="text">
3. Trạng thái của phần tử kích hoạt
Pseudo-class :active được áp dụng cho phần tử trong thời điểm nó được kích hoạt (chẳng hạn khi nhấp chuột vào nút).
Ví dụ: Tạo kiểu cho nút khi nhấn
Trong ví dụ này, nút hơi giảm kích thước và đổi màu khi nhấn, tạo ra hiệu ứng nhấn:
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
<button>Click Me</button>
9.2 Cải thiện nhận thức thị giác bằng Pseudo-elements
4. Thêm nội dung: ::before và ::after
Pseudo-elements ::before và ::after cho phép thêm nội dung trước và sau phần tử mà không cần thay đổi mã HTML.
Ví dụ: Thêm biểu tượng trước liên kết
Trong ví dụ này, biểu tượng được thêm vào trước văn bản của liên kết, cải thiện nhận thức thị giác và giúp người dùng nhận biết rằng đây là một liên kết:
a::before {
content: "🔗";
margin-right: 5px;
}
<a href="#">Here</a>
Ví dụ: Thêm phần tử trang trí sau đoạn văn
Trong ví dụ này, phần tử trang trí được thêm sau đoạn văn, cải thiện cách trình bày trực quan của trang:
p::after {
content: "❦";
display: block;
text-align: right;
color: #e74c3c;
}
<p>Content</p>
5. Tạo kiểu cho chữ cái và dòng đầu tiên: ::first-letter và ::first-line
Pseudo-elements ::first-letter và ::first-line cho phép tạo kiểu cho chữ cái và dòng đầu tiên của văn bản, tạo ra các hiệu ứng typography.
Ví dụ: Tạo kiểu cho chữ cái đầu tiên của đoạn văn
Trong ví dụ này, chữ cái đầu tiên của đoạn văn được phóng to và đổi màu xanh, tạo ra hiệu ứng "chữ cái nhấn mạnh", thường được dùng trong thiết kế tạp chí:
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
float: left;
margin-right: 0.1em;
}
<p>Content</p>
Ví dụ: Tạo kiểu cho dòng đầu tiên của đoạn văn
Trong ví dụ này, dòng đầu tiên của đoạn văn được in đậm và đổi màu xanh lá, cải thiện khả năng đọc của văn bản:
p::first-line {
font-weight: bold;
color: #2ecc71;
}
<p>Content</p>
9.3 Cải thiện khả năng tiếp cận bằng Pseudo-classes và Pseudo-elements
6. Trạng thái của các phần tử form
Pseudo-classes form cho phép tạo kiểu cho các phần tử tùy thuộc vào trạng thái của chúng, cải thiện khả năng tiếp cận và giao diện người dùng.
Ví dụ: Tạo kiểu cho checkbox đã chọn
Trong ví dụ này, checkbox đã chọn được đổi màu xanh lá, cải thiện phản hồi thị giác:
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
<input type="checkbox" checked>
Ví dụ: Tạo kiểu cho trường nhập liệu bị vô hiệu hóa
Trong ví dụ này, trường nhập liệu bị vô hiệu hóa nhận được nền màu xám nhạt và chữ màu xám, thể hiện rõ ràng rằng nó không thể sử dụng:
input:disabled {
background-color: #f0f0f0;
color: #999;
}
<input type="text" disabled>
Ví dụ: Tạo kiểu cho trường nhập liệu không hợp lệ
Trong ví dụ này, trường nhập liệu không hợp lệ nhận được viền màu đỏ, giúp người dùng nhận biết lỗi khi nhập dữ liệu:
input:invalid {
border-color: #e74c3c;
}
<input type="text">
9.4 Ví dụ thực hiện đầy đủ
/* Thêm biểu tượng trước liên kết */
a::before {
content: "🔗";
margin-right: 5px;
}
/* Tạo kiểu cho chữ cái đầu tiên của đoạn văn khi hover chuột */
p:hover::first-letter {
font-size: 2.5em;
font-weight: bold;
color: #3498db;
}
/* Tạo kiểu cho nút */
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active {
background-color: #2c3e50;
transform: scale(0.98);
}
/* Tạo kiểu cho trường nhập liệu khi focus */
input[type="text"]:focus,
input[type="email"]:focus {
border-color: #3498db;
box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}
/* Tạo kiểu cho checkbox đã chọn */
input[type="checkbox"]:checked {
background-color: #2ecc71;
}
/* Tạo kiểu cho trường nhập liệu bị vô hiệu hóa */
input:disabled {
background-color: #f0f0f0;
color: #999;
}
/* Tạo kiểu cho trường nhập liệu không hợp lệ */
input:invalid {
border-color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Các ví dụ về sử dụng pseudo-classes và pseudo-elements</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<a href="#">Link với biểu tượng</a>
<p>Hover chuột lên đoạn văn này để thấy hiệu ứng trên chữ cái đầu tiên.</p>
<button>Nút</button>
<form>
<label>
Nhập văn bản:
<input type="text" required>
</label>
<br>
<label>
Nhập email:
<input type="email" required>
</label>
<br>
<label>
<input type="checkbox" checked> Checkbox
</label>
<br>
<button type="submit">Gửi</button>
<button type="button" disabled>Nút bị vô hiệu hóa</button>
</form>
</body>
</html>
Pseudo-classes và pseudo-elements cung cấp những phương tiện mạnh mẽ để cải thiện thiết kế và trải nghiệm người dùng trên các trang web. Việc sử dụng chúng cho phép tạo ra các phần tử tương tác và động, cải thiện nhận thức thị giác, tăng cường khả năng tiếp cận, và làm cho giao diện trở nên tiện lợi và thú vị hơn cho người dùng.
Hiểu và áp dụng đúng những công cụ này mở ra nhiều cơ hội cho việc tạo ra các thiết kế web hiện đại và hiệu quả.
GO TO FULL VERSION