CSS Font Border là một kỹ thuật tạo kiểu để tạo đường viền cho văn bản trong HTML. Hiệu ứng này tăng cường khả năng hiển thị, dễ đọc và hấp dẫn về mặt hình ảnh. Đặc biệt khi văn bản được đặt trên images, hình nền hoặc bố cục phức tạp. Thêm đường viền giúp văn bản nổi bật, thu hút và dễ đọc hơn.
- Cải thiện khả năng đọc bằng cách tách văn bản khỏi nền.
- Nâng cao thiết kế bằng cách tạo cho văn bản vẻ ngoài bold, phong cách.
- Thu hút sự chú ý vào các văn bản quan trọng như tiêu đề, headings, banners, hoặc các yếu tố kêu gọi hành động.
- Tạo sự tương phản giữa màu văn bản và nền mà không thay đổi màu chữ.
Các kỹ thuật để tạo Font Border
Mặc dù CSS không có thuộc tính tích hợp cho font border, có một vài kỹ thuật có thể tạo ra hiệu ứng tương tự. Dưới đây là những phương pháp hiệu quả nhất để tạo đường viền cho văn bản.
. Sử dụng text-shadow
Cách được hỗ trợ rộng rãi và linh hoạt nhất để tạo font border là xếp lớp nhiều giá trị text-shadow . Phương pháp này hoạt động trên tất cả các trình duyệt chính, cho phép bạn kiểm soát hướng, độ mờ, và màu sắc của bóng.
Cú pháp
text-shadow: h-shadow v-shadow blur-radius color;
- h-shadow: Bóng ngang (ví dụ: 2px).
- v-shadow: Bóng dọc (ví dụ: 2px).
- blur-radius: Độ mềm của bóng (ví dụ: 5px).
- color: Màu của bóng (ví dụ: đen).
<html>
<head>
<meta charset="UTF-8">
<title>CSS Font Border - text-shadow Example</title>
<style>
body {
background: linear-gradient(135deg, #2c3e50, #3498db);
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.text-border {
text-align: center;
padding: 150px 20px;
font-size: 72px;
font-weight: 900;
color: #ffffff;
text-shadow:
-2px -2px 0 #000,
2px -2px 0 #000,
-2px 2px 0 #000,
2px 2px 0 #000,
-3px 0px 0 #000,
3px 0px 0 #000,
0px -3px 0 #000,
0px 3px 0 #000;
}
</style>
</head>
<body>
<div class="text-border">CSS Font Border</div>
</body>
</html>
Trong ví dụ này
- Đoạn mã HTML này hiển thị văn bản màu trắng đậm với đường viền đen dày sử dụng nhiều lớp text-shadow.
- Nó tạo hiệu ứng viền trên nền gradient xanh, làm cho văn bản nổi bật rõ ràng và phong cách.
Hiệu ứng Neon Glow sử dụng text-shadow: Thuộc tính text-shadow cũng có thể được sử dụng để tạo hiệu ứng neon glow sống động, không chỉ là đường viền.
<html >
<head>
<style>
.neon-text {
font-size: 48px;
color: #fff;
text-shadow:
0 0 5px #0ff,
0 0 10px #0ff,
0 0 20px #0ff,
0 0 40px #0ff,
0 0 80px #0ff;
background-color: #000;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="neon-text">Neon Glow Effect</div>
</body>
</html>
Trong ví dụ này
- Nhiều lớp text-shadow được áp dụng để tạo hiệu ứng neon glow sống động.
- Thuộc tính color đặt màu văn bản thành màu trắng, tương phản với nền đen.
- Thuộc tính background-color được đặt thành màu đen để tăng cường hiệu ứng neon.
- Thuộc tính padding và text-align căn giữa văn bản trong khung nhìn.
Giá trị thuộc tính của text-shadow : Thuộc tính text-shadow chấp nhận nhiều giá trị, một số được đề cập trong bảng dưới đây.
| Giá trị thuộc tính | Mô tả |
|---|---|
h-shadow
|
Đặt bóng ngang xung quanh văn bản. |
v-shadow
|
Đặt bóng dọc xung quanh văn bản. |
blur-radius
|
Đặt bán kính làm mờ xung quanh bóng văn bản. |
color
|
Đặt màu cho bóng văn bản. |
none
|
Không đặt bất cứ thứ gì xung quanh văn bản (không có bóng). |
initial
|
Đặt bóng văn bản về giá trị ban đầu mặc định của nó. |
inherit
|
Kế thừa các giá trị thuộc tính từ phần tử mẹ của nó. |
Lưu ý: Thuộc tính text-shadow trả về hiệu ứng bóng xung quanh văn bản. Nó có thể được sử dụng để tạo đường viền hoặc phác thảo font chữ mô phỏng.
. Sử dụng -webkit-text-stroke
Một phương pháp chính xác và mạnh mẽ hơn để thêm đường viền văn bản là thuộc tính -webkit-text-stroke. Phương pháp này thực sự vẽ một đường viền xung quanh mỗi chữ cái. Nó làm cho nó trông sạch sẽ, đậm nét và sắc sảo.
Cú pháp
-webkit-text-stroke: width color;
- width: Đặt độ dày của đường viền xung quanh văn bản (ví dụ: 2px).
- color: Đặt màu của đường viền (ví dụ: black, #000, v.v.).
<html>
<head>
<style>
.stroked-text {
font-size: 48px;
color: white;
-webkit-text-stroke: 2px black;
}
</style>
</head>
<body>
<h1 class="stroked-text">Stroked Text Example</h1>
</body>
</html>
Trong ví dụ này
- Thuộc tính -webkit-text-stroke thêm một đường viền màu đen rộng 2 pixel xung quanh văn bản.
- Thuộc tính color đặt màu tô của văn bản thành màu trắng.
. Sử dụng SVG Text cho các hiệu ứng nâng cao
SVG đặc biệt hữu ích khi bạn muốn văn bản luôn sắc nét trên mọi kích thước và độ phân giải màn hình. Nó lý tưởng cho logo, banner hoặc bất kỳ yếu tố thiết kế nào đòi hỏi chất lượng hoàn hảo.
index.html<html>
<head>
<style>
body {
background-color: #2c3e50;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
</head>
<body>
<svg width="700" height="150" xmlns="https://www.w3.org/2000/svg">
<text x="50" y="100" font-size="60" font-family="Arial, sans-serif" font-weight="bold" fill="white"
stroke="black" stroke-width="3" paint-order="stroke fill">
CSS Font Border
</text>
</svg>
</body>
</html>
Trong đoạn mã này
- Đoạn mã SVG này hiển thị văn bản màu trắng đậm với đường viền đen sử dụng stroke và fill.
- Đường viền dày 3px và paint-order đảm bảo đường viền xuất hiện phía sau văn bản để có giao diện rõ ràng.
Các phương pháp hay nhất để sử dụng CSS Font Borders
- Đảm bảo khả năng đọc: Chọn màu đường viền tương phản tốt với văn bản và nền để duy trì khả năng đọc.
- Sử dụng độ rộng đường viền phù hợp: Áp dụng độ rộng đường viền giúp tăng cường khả năng hiển thị văn bản. Tuy nhiên đừng làm cho nó lấn át thiết kế.
- Kiểm tra trên các trình duyệt: Vì một số thuộc tính đường viền văn bản có hỗ trợ trình duyệt hạn chế, hãy xác minh rằng thiết kế của bạn hiển thị chính xác trên tất cả các trình duyệt mục tiêu.