7.1 Thuộc tính text-shadow
Thuộc tính text-shadow trong CSS cho phép thêm bóng vào văn bản, tạo ra hiệu ứng nổi và cải thiện cảm nhận thị giác. Thuộc tính này cung cấp sự linh hoạt trong việc tùy chỉnh bóng, bao gồm điều chỉnh độ lệch, làm mờ và màu sắc của bóng.
Thuộc tính text-shadow thiết lập bóng cho văn bản bên trong một phần tử. Nó cho phép kiểm soát vị trí, làm mờ và màu sắc của bóng, thêm điểm nhấn trực quan cho các thành phần văn bản.
Cú pháp:
element {
text-shadow: offset-x offset-y blur-radius spread-radius color;
}
Tham số:
offset-x: độ lệch bóng theo chiều ngangoffset-y: độ lệch bóng theo chiều dọcblur-radius: bán kính làm mờ của bóng (không bắt buộc)color: màu của bóng (không bắt buộc)
Giá trị:
offset-xvàoffset-y: xác định độ lệch của bóng so với văn bản. Có thể là giá trị dương hoặc âmblur-radius: xác định mức độ làm mờ của bóng. Giá trị càng cao, bóng càng mờ. Giá trị mặc định là 0 (không làm mờ)color: xác định màu của bóng. Nếu không chỉ định màu, màu của văn bản sẽ được sử dụng
Ví dụ sử dụng:
.shadow-basic {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}
.shadow-blur {
font-size: 24px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
.shadow-color {
font-size: 24px;
text-shadow: 2px 2px 2px red;
}
.shadow-multiple {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 2px rgba(0, 0, 0, 0.3);
}
<body>
<p class="shadow-basic">Bóng cơ bản</p>
<p class="shadow-blur">Bóng với làm mờ</p>
<p class="shadow-color">Bóng với màu sắc</p>
<p class="shadow-multiple">Nhiều bóng</p>
</body>
Giải thích mã:
.shadow-basic: áp dụng một bóng đơn giản với độ lệch2pxtheo chiều ngang và dọc, bán kính làm mờ2pxvà màu đen bán trong suốt.shadow-blur: thêm một mức độ làm mờ lớn hơn (5px), tạo ra bóng mờ hơn.shadow-color: áp dụng bóng với màu sắc (đỏ).shadow-multiple: áp dụng hai bóng với các độ lệch và làm mờ khác nhau, tạo ra hiệu ứng nhiều lớp phức tạp
7.2 Ví dụ
1. Bóng mềm
Bóng mềm với bán kính làm mờ lớn:
.soft-shadow {
font-size: 24px;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
<body>
<p class="soft-shadow">Bóng mềm của văn bản</p>
</body>
Giải thích mã:
.soft-shadow: áp dụng bóng mềm không có độ lệch và với bán kính làm mờ lớn (10px), tạo ra hiệu ứng sáng nhẹ xung quanh văn bản
2. Bóng sáng
Bóng với màu sáng và làm mờ nhỏ:
.colorful-shadow {
font-size: 24px;
text-shadow: 3px 3px 5px blue;
}
<body>
<p class="colorful-shadow">Bóng với màu sáng</p>
</body>
Giải thích mã:
.colorful-shadow: áp dụng bóng với màu sáng (xanh), độ lệch3pxvà bán kính làm mờ5px
3. Nhiều bóng
Nhiều bóng với các tham số khác nhau:
.multi-shadow {
font-size: 24px;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5), -2px -2px 5px rgba(255, 0, 0, 0.5);
}
<body>
<p class="multi-shadow">Nhiều bóng của văn bản</p>
</body>
Giải thích mã:
.multi-shadow: áp dụng hai bóng với các tham số khác nhau: một cái với độ lệch và làm mờ nhỏ, và một cái khác với độ lệch và làm mờ lớn màu đỏ
7.3 Những điểm quan trọng
Những điểm quan trọng khi sử dụng text-shadow
Tương thích trình duyệt
Thuộc tính text-shadow được hỗ trợ bởi tất cả các trình duyệt hiện đại, bao gồm Google Chrome, Firefox, Safari, Edge và Opera. Tuy nhiên, quan trọng là kiểm tra hiển thị bóng trong các phiên bản trình duyệt cũ để đảm bảo tính tương thích đa trình duyệt.
Hiệu suất
Sử dụng bóng phức tạp với nhiều độ lệch và làm mờ có thể ảnh hưởng đến hiệu suất, đặc biệt là trên các thiết bị di động. Tối ưu hóa bóng cho hiệu suất tốt hơn và kiểm tra trên các thiết bị khác nhau.
Tiếp cận
Đảm bảo rằng bóng không làm giảm khả năng đọc của văn bản. Độ tương phản giữa văn bản và nền phải đủ cho tất cả người dùng, bao gồm cả những người có thị lực kém.
Thuộc tính text-shadow cung cấp công cụ mạnh mẽ để tạo bóng văn bản trong CSS. Nó cho phép thêm các hiệu ứng khác nhau, từ bóng đơn giản đến bóng phức tạp nhiều lớp với màu sắc và làm mờ khác nhau.
Sử dụng text-shadow giúp cải thiện khả năng nhìn của văn bản, thêm chiều sâu và khối lượng cho thiết kế trang web. Quan trọng là ghi nhớ tính tương thích trình duyệt và hiệu suất khi áp dụng bóng phức tạp, và cũng như tiếp cận cho tất cả người dùng.
GO TO FULL VERSION