Tạo text-shadow CSS: cú pháp, cách chồng lớp và những chỗ dễ hỏng
Công cụ dựng thuộc tính text-shadow bằng thanh trượt cho độ lệch ngang, độ lệch dọc, độ nhòe và bảng chọn màu, cho phép chồng nhiều lớp bóng để tạo hiệu ứng neon, chữ nổi hay viền chữ. Khung xem trước đổi được nội dung, màu chữ, màu nền và cỡ chữ, còn đoạn CSS sinh ra copy được ngay bằng một cú bấm.
Tính năng nổi bật
- Chồng bao nhiêu lớp bóng tùy ý, mỗi lớp có nút xóa riêng
- Thanh trượt độ lệch ngang và dọc từ âm 50 tới dương 50 pixel
- Thanh trượt độ nhòe từ 0 tới 50 pixel, để 0 là viền sắc cạnh
- Chọn màu bằng bảng màu hoặc gõ thẳng giá trị rgba để có độ trong suốt
- Sáu mẫu dựng sẵn: Simple, Neon, 3D, Retro, Outline và Glow
- Khung xem trước đổi được chữ mẫu, màu chữ và màu nền để thử tương phản
- Thanh trượt cỡ chữ từ 16 tới 96 pixel để kiểm tra hiệu ứng ở nhiều kích thước
- Sinh sẵn dòng CSS text-shadow hoàn chỉnh kèm nút sao chép, chạy hoàn toàn trên trình duyệt
Vì sao nên dựng text-shadow bằng thanh trượt thay vì gõ tay
Text-shadow là một trong số ít thuộc tính CSS mà kết quả gần như không đoán được từ con số. Bốn giá trị giống nhau cho ra hiệu ứng hoàn toàn khác nhau tùy màu chữ, màu nền và cỡ chữ: một bóng lệch 2 pixel với độ nhòe 4 trông tinh tế ở cỡ 48 pixel nhưng biến mất hẳn ở cỡ 14 pixel, và trở thành vệt bẩn khi chữ màu sáng nằm trên nền sáng. Nếu gõ tay trong tệp CSS, mỗi lần thử là một vòng lưu tệp, chờ tải lại và nheo mắt so sánh, còn hiệu ứng nhiều lớp thì gần như không thể hình dung trong đầu. Kéo thanh trượt và nhìn kết quả đổi ngay bên cạnh rút vòng lặp đó xuống còn vài giây, và vì khung xem trước cho đổi cả màu nền lẫn cỡ chữ nên bạn kiểm tra được hiệu ứng ở đúng bối cảnh sẽ dùng thật chứ không phải trên nền trắng mặc định.
Lợi ích khi sử dụng
- Thấy ngay hiệu ứng thay đổi khi kéo thanh trượt, không phải lưu tệp và tải lại trang
- Kiểm tra được hiệu ứng ở nhiều cỡ chữ trước khi đưa vào giao diện thật
- Đổi màu nền trong khung xem trước để biết bóng còn ăn nhập ở cả nền sáng lẫn nền tối
- Dựng được hiệu ứng nhiều lớp mà nếu gõ tay sẽ rất khó hình dung
- Nhận thẳng dòng CSS đúng cú pháp, không sợ sai thứ tự giá trị
Cách tạo hiệu ứng text-shadow
- 1Bấm một mẫu dựng sẵn ở khối Presets để lấy điểm khởi đầu, hoặc bỏ qua bước này nếu muốn dựng từ đầu.
- 2Kéo thanh trượt X và Y để đặt hướng bóng, kéo thanh Blur để chọn giữa viền sắc cạnh và bóng mềm.
- 3Chọn màu bóng bằng bảng màu, hoặc gõ thẳng chuỗi dạng rgba vào ô bên cạnh nếu cần bóng bán trong suốt.
- 4Bấm Thêm layer để chồng thêm lớp bóng khi cần hiệu ứng phát sáng hay chữ nổi nhiều tầng.
- 5Đổi màu nền và cỡ chữ trong khung xem trước cho giống môi trường thật, rồi bấm nút sao chép để lấy dòng CSS.
Cú pháp text-shadow và ba điểm khác biệt so với box-shadow
Cú pháp đầy đủ là text-shadow với bốn thành phần: độ lệch ngang, độ lệch dọc, độ nhòe và màu, ví dụ 2px 2px 4px rgba(0,0,0,0.5). Độ lệch ngang dương đẩy bóng sang phải, âm sang trái; độ lệch dọc dương đẩy xuống dưới, âm lên trên. Điểm khác biệt thứ nhất so với box-shadow là text-shadow không có giá trị lan tỏa, chỉ nhận tối đa ba giá trị độ dài, nên nếu bạn quen viết box-shadow bốn số thì gõ thừa một số sẽ khiến cả dòng bị trình duyệt bỏ qua. Thứ hai, text-shadow không có từ khóa inset, không tạo được bóng chìm bên trong nét chữ. Thứ ba, nếu bỏ phần màu thì bóng lấy màu hiện hành của chữ, điều rất tiện trong chế độ tối vì bóng tự đổi theo màu chữ. Muốn chồng nhiều lớp, viết các bộ giá trị cách nhau bằng dấu phẩy; lớp viết trước nằm trên lớp viết sau, nên khi dựng chữ nổi phải xếp bóng gần nhất lên đầu danh sách.
Sáu mẫu dựng sẵn và con số đằng sau chúng
Simple dùng một lớp 2px 2px 4px với màu đen mờ, đủ tách chữ khỏi nền mà không gây chú ý. Neon xếp ba lớp cùng ở vị trí 0 0 với độ nhòe tăng dần 10, 20 và 40 pixel, tất cả cùng một màu chói; nguyên tắc là độ nhòe tăng theo cấp số nhân chứ không cộng đều, vì mắt cảm nhận độ sáng theo cấp số nhân. 3D xếp ba lớp lệch dần 1, 2 và 3 pixel theo cả hai trục với độ nhòe bằng 0 và màu tối dần, tạo cảm giác chữ được đùn ra; muốn khối dày hơn chỉ cần thêm lớp và tăng độ lệch từng bước một pixel. Retro dùng một lớp lệch 4 pixel, độ nhòe bằng 0, màu tương phản mạnh, kiểu áp phích thập niên tám mươi. Outline xếp bốn lớp lệch một pixel về bốn góc chéo với độ nhòe bằng 0 để tạo viền. Glow giống Neon nhưng dùng màu trắng bán trong suốt với hai lớp nhòe 10 và 20, cho quầng sáng dịu hơn.
Tạo viền chữ: chồng bóng hay dùng text-stroke
Mẫu Outline tạo viền bằng bốn lớp bóng lệch một pixel về bốn góc chéo. Cách này chạy trên mọi trình duyệt nhưng viền không thật sự đều: bốn góc chính diện là trên, dưới, trái, phải bị mỏng hơn bốn góc chéo, và ở cỡ chữ lớn thì viền trông răng cưa. Muốn đều hơn, thêm bốn lớp nữa ở các hướng thẳng để thành tám lớp, hoặc tăng số lớp theo góc mười lăm độ. Cách thứ hai là dùng thuộc tính -webkit-text-stroke, cho viền đều tuyệt đối và chỉ tốn một dòng, nhưng mặc định viền được vẽ đè lên nửa trong của nét chữ khiến chữ trông gầy đi. Khắc phục bằng cách thêm paint-order: stroke fill để trình duyệt vẽ viền trước rồi mới vẽ nét chữ đè lên. Nếu cần viền dày trên ba pixel thì text-stroke gần như luôn là lựa chọn đúng, còn viền một pixel dùng cách nào cũng cho kết quả tương đương.
Dùng bóng để giữ chữ đọc được trên ảnh nền
Đặt chữ trắng lên ảnh là tình huống khiến người ta hay với tới text-shadow đầu tiên, nhưng cần biết một điều: các bộ kiểm tra tương phản theo tiêu chuẩn WCAG chỉ tính tỷ số giữa màu chữ và màu nền, chúng không tính bóng. Nghĩa là một dòng chữ trắng trên ảnh sáng vẫn trượt kiểm tra tương phản dù bạn thêm bóng đen đậm cỡ nào. Bóng chỉ giúp về mặt cảm nhận chứ không giúp về mặt tuân thủ. Giải pháp bền hơn là phủ một lớp nền bán trong suốt lên ảnh, hoặc phủ dải chuyển màu từ đen mờ ở đáy lên trong suốt ở đỉnh, rồi mới đặt chữ lên; khi đó bạn có màu nền xác định để đo tương phản. Nếu vẫn muốn dùng bóng làm lớp hỗ trợ, cấu hình an toàn là một lớp 0 0 với độ nhòe khoảng 4 tới 8 pixel màu đen mờ ở mức 0,6 tới 0,8, vì bóng tỏa đều quanh nét chữ sẽ đỡ hơn bóng lệch một hướng.
Chi phí hiển thị và chuyện tạo hoạt ảnh cho bóng chữ
Text-shadow không chiếm chỗ trong bố cục nên nó không bao giờ gây dịch chuyển nội dung, nhưng nó buộc trình duyệt vẽ lại vùng chữ, và chi phí tăng theo diện tích vùng nhòe. Một khối văn bản dài với bóng nhòe 40 pixel tốn hơn nhiều so với một tiêu đề ngắn cùng thiết lập. Vì vậy nên dành hiệu ứng nặng cho tiêu đề, biểu ngữ và chữ trang trí, còn nội dung đọc dài thì để bóng nhẹ hoặc không dùng. Khi tạo hoạt ảnh, chuyển động của text-shadow không chạy trên luồng hợp thành mà buộc vẽ lại từng khung hình, nên hiệu ứng nhấp nháy kiểu đèn neon trên máy yếu dễ bị giật. Cách nhẹ hơn là đặt sẵn hiệu ứng đầy đủ rồi tạo hoạt ảnh cho thuộc tính opacity của một phần tử giả phía sau. Cuối cùng, nhớ bọc hiệu ứng nhấp nháy trong truy vấn prefers-reduced-motion để tôn trọng người dùng đã tắt chuyển động trong hệ điều hành.
Câu hỏi thường gặp (FAQ)
Cú pháp text-shadow gồm những giá trị nào?
Theo thứ tự là độ lệch ngang, độ lệch dọc, độ nhòe rồi tới màu, ví dụ 2px 2px 4px rgba(0,0,0,0.5). Độ nhòe và màu đều có thể bỏ qua; bỏ màu thì bóng lấy màu hiện hành của chữ. Muốn nhiều lớp thì viết các bộ giá trị cách nhau bằng dấu phẩy trên cùng một dòng.
Vì sao dòng text-shadow tôi viết không có tác dụng?
Nguyên nhân phổ biến nhất là gõ thừa một giá trị độ dài theo thói quen box-shadow. Text-shadow không có giá trị lan tỏa nên chỉ nhận tối đa ba số; thừa số thứ tư là cả dòng bị bỏ qua. Ngoài ra bóng cũng vô hình khi màu bóng trùng màu nền hoặc cả ba số đều bằng 0.
Text-shadow khác box-shadow ở chỗ nào?
Text-shadow bám theo hình dạng từng nét chữ, box-shadow bám theo khung chữ nhật của phần tử. Text-shadow không có giá trị lan tỏa và không có từ khóa inset nên không tạo được bóng chìm. Hai thuộc tính này dùng được đồng thời trên cùng một phần tử mà không xung đột.
Làm sao tạo hiệu ứng chữ neon?
Đặt nền tối, chữ màu sáng, rồi chồng ba lớp bóng cùng ở vị trí 0 0 với độ nhòe tăng dần chẳng hạn 10, 20 và 40 pixel, tất cả dùng một màu chói như lục lam hoặc hồng cánh sen. Điểm mấu chốt là độ nhòe tăng theo cấp số nhân, vì mắt cảm nhận độ sáng theo thang phi tuyến.
Lớp bóng nào nằm trên khi chồng nhiều lớp?
Lớp viết trước trong danh sách nằm trên lớp viết sau. Điều này quan trọng khi dựng chữ nổi ba chiều: bạn phải xếp lớp gần nét chữ nhất lên đầu danh sách rồi mới tới các lớp xa dần, nếu xếp ngược thì lớp xa sẽ che mất lớp gần và mất cảm giác khối.
Tạo viền chữ bằng text-shadow hay bằng text-stroke tốt hơn?
Viền một pixel thì hai cách cho kết quả gần như nhau. Viền dày hơn nên dùng -webkit-text-stroke vì viền đều tuyệt đối, kèm thêm paint-order: stroke fill để viền không ăn vào nét chữ. Cách chồng bốn lớp bóng cho viền hơi mỏng ở bốn hướng thẳng và răng cưa khi chữ lớn.
Bóng chữ có tính vào tỷ số tương phản theo WCAG không?
Không. Các bộ kiểm tra chỉ đo tỷ số giữa màu chữ và màu nền, hoàn toàn bỏ qua bóng. Chữ trắng trên ảnh sáng vẫn trượt kiểm tra dù bạn thêm bóng đen đậm. Cách đúng là phủ một lớp nền bán trong suốt hoặc dải chuyển màu lên ảnh để có màu nền xác định mà đo.
Bóng bán trong suốt nhập thế nào vào công cụ?
Gõ thẳng chuỗi dạng rgba vào ô văn bản bên cạnh bảng màu, ví dụ rgba(0,0,0,0.35). Lưu ý là ô chọn màu không hiển thị được giá trị rgba nên nó tạm hiện màu đen, và nếu bạn bấm vào ô chọn màu sau đó thì giá trị rgba sẽ bị thay bằng mã hex đặc, mất phần trong suốt.
Text-shadow có làm dịch chuyển bố cục không?
Không. Bóng chữ được vẽ ra ngoài luồng bố cục nên nó không làm thay đổi chiều rộng, chiều cao hay vị trí của bất cứ phần tử nào. Đây là điểm khác với viền border. Đổi lại, bóng có thể tràn ra ngoài phần tử cha và bị cắt nếu phần tử cha đặt overflow ẩn.
Tạo hoạt ảnh cho text-shadow có nặng không?
Có, vì mỗi khung hình đều buộc trình duyệt vẽ lại vùng chữ chứ không chạy trên luồng hợp thành như transform hay opacity. Bóng càng nhòe và văn bản càng dài thì càng nặng. Nếu cần nhấp nháy kiểu đèn neon, hãy tạo hoạt ảnh cho opacity của một lớp phủ thay vì cho chính bóng.
Có dùng được dải chuyển màu làm màu bóng không?
Không. Text-shadow chỉ nhận một màu đặc theo hex, rgb, rgba hoặc hsl. Muốn bóng chuyển màu, bạn phải mô phỏng bằng cách chồng nhiều lớp bóng với các màu chuyển tiếp gần nhau, hoặc dùng một phần tử giả có nền chuyển màu đặt phía sau chữ.
Trình duyệt nào hỗ trợ text-shadow?
Toàn bộ trình duyệt hiện đại đều hỗ trợ đầy đủ, kể cả nhiều lớp bóng, và không cần tiền tố nhà cung cấp. Trình duyệt quá cũ không hiểu thuộc tính này sẽ bỏ qua và hiển thị chữ bình thường, nên bạn không cần viết phương án dự phòng miễn là chữ vẫn đọc được khi không có bóng.
Từ khóa liên quan
- text shadow generator
- tạo text-shadow css
- css text shadow là gì
- hiệu ứng chữ neon css
- tạo chữ 3d bằng css
- viền chữ css
- webkit text stroke
- paint-order stroke fill
- text shadow nhiều lớp
- chữ phát sáng css
- text shadow và box shadow
- css typography effect
- chữ trên ảnh nền dễ đọc
- text shadow rgba trong suốt
- hiệu ứng chữ retro css
- công cụ tạo css online
- css text effect generator
- text shadow blur radius
- tạo tiêu đề nổi bật css
- css hiệu ứng chữ miễn phí
