Text Shadow Generator
CSS text shadow
CSS text shadow Chạy cục bộ trong trình duyệt của bạn
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.30);
About the
Text Shadow Generator đặt độ lệch, độ mờ, màu sắc và độ mờ của bóng phía sau văn bản bằng bản xem trước trực tiếp và CSS. Không giống như bóng hộp, nó không có giá trị lan truyền, điều này khiến mọi người chú ý: cách duy nhất để làm cho bóng văn bản nặng hơn là xếp chồng nhiều bóng trong một khai báo. Nó hữu ích nhất để đảm bảo mức độ dễ đọc, tạo bóng tối tinh tế đằng sau văn bản sáng trên ảnh và nó không bao giờ là thứ khiến văn bản có thể đọc được vì nó biến mất ngay khi nền thay đổi.
Where people use the
- Thêm bóng mờ để chú thích được đọc đè lên ảnh.
- Tạo hiệu ứng tiêu đề được nhấn hoặc khắc.
- Tạo cách xử lý văn bản cổ điển hoặc neon.
- Kiểm tra độ nặng của bóng trước khi nó trông rẻ tiền.
How to use the
- 1
Đặt độ lệch
Offset X di chuyển sang phải, offset Y di chuyển xuống. Độ lệch một hoặc hai pixel được coi là độ sâu; bất cứ thứ gì lớn hơn bắt đầu trông giống như một cái bóng đổ.
- 2
Đặt độ mờ
Blur làm mềm cạnh. Zero cung cấp một bản sao cứng của văn bản, đó là cách tạo ra các đường nét và hiệu ứng cổ điển.
- 3
Chọn màu sắc và độ mờ
Văn bản tối trên nền sáng muốn có bóng sáng và ngược lại. Giữ độ mờ thấp trừ khi bạn muốn có hiệu ứng rõ ràng.
- 4
Sao chép CSS
Quy tắc bao gồm màu rgba, sẵn sàng để dán.
- 5
Xếp chồng bóng nếu bạn cần thêm trọng lượng
Thêm bóng thứ hai cách nhau bằng dấu phẩy trong biểu định kiểu của bạn. Đó là cách duy nhất để làm dày bóng văn bản vì không có sự lan tỏa.
Lời khuyên và phương pháp hay nhất
- Ít hơn là nhiều hơn: một hoặc hai pixel ở độ mờ thấp sẽ tạo ra hiện tượng mờ nặng.
- Đừng bao giờ chỉ dựa vào cái bóng để có thể tiếp cận; sửa độ tương phản bên dưới.
- Hãy nhớ rằng thuộc tính được kế thừa, vì vậy hãy đặt nó vào phạm vi thành phần mà bạn muốn nói.
Câu hỏi thường gặp
Tại sao không có giá trị chênh lệch?
Bởi vì bóng văn bản không hỗ trợ một. Cú pháp của nó là offset X, offset Y, chỉ làm mờ và tô màu. Để mô phỏng sự lan tỏa, bạn xếp chồng nhiều bóng giống hệt nhau với độ lệch hơi khác nhau.
Tôi có thể sử dụng nó để làm cho văn bản có thể đọc được trên hình ảnh không?
Chỉ như là một bổ sung. Bóng đổ giúp ích ở lề nhưng không hoạt động ở các khu vực đông đúc và nó không được tính vào tỷ lệ tương phản WCAG, được đo dựa trên màu nền. Thêm một bảng chữ viết hoặc bảng điều khiển đặc nếu mức độ dễ đọc thực sự quan trọng.
Làm cách nào để phác thảo văn bản?
Xếp chồng bốn bóng ở điểm cộng và trừ một pixel theo mỗi hướng mà không bị mờ. Điều đó tạo ra hiệu ứng phác thảo mà không cần -webkit-text-Stroke, không được hỗ trợ ở mọi nơi.
Nó có làm chậm trang không?
Một cái bóng tĩnh hầu như không tốn kém gì. Tạo bóng văn bản hoặc áp dụng bóng mờ lớn cho nhiều văn bản là nơi xuất hiện chi phí sơn lại.
Nó có được kế thừa bởi các phần tử con không?
Đúng. Bóng văn bản được kế thừa, do đó, việc đặt nó trên một vùng chứa sẽ áp dụng nó cho mọi hậu duệ của văn bản, điều này đôi khi gây ngạc nhiên.