Tạo Text Shadow CSS

Áp dụng thuộc tính text-shadow cho một phần tử chữ. Mỗi bóng được viết theo dạng offset-x offset-y blur-radius color, ví dụ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);. Với công cụ này, bạn đặt các giá trị đó bằng thanh trượt rồi sao chép thuộc tính hoàn chỉnh thẳng vào CSS.

Giá trị đầu tiên là độ lệch ngang, giá trị thứ hai là độ lệch dọc, giá trị thứ ba là độ nhòe (bóng trông mềm tới đâu), và giá trị cuối là màu. Độ lệch càng lớn thì bóng càng đẩy xa khỏi chữ; độ nhòe càng cao thì bóng càng lan rộng và mềm hơn. Trong công cụ này, độ mờ được gộp vào màu dưới dạng giá trị alpha của rgba().

Thuộc tính CSS text-shadow chấp nhận nhiều bóng phân tách bằng dấu phẩy. Nhấp Thêm lớp để chồng bao nhiêu lớp tùy thích — không có giới hạn cố định. Hiệu ứng đơn giản dùng một hoặc hai lớp, còn neon phát sáng thường dùng ba hoặc bốn lớp chồng lên nhau.

Nạp mẫu Phát sáng Neon làm điểm khởi đầu. Mẫu này chồng nhiều lớp với độ lệch bằng không và độ nhòe tăng dần cùng một màu sáng, tạo nên vầng hào quang mềm mại của hiệu ứng phát sáng. Chuyển phần xem trước sang nền tối, rồi chỉnh màu và độ nhòe để tăng hoặc giảm cường độ.

Để có kiểu 3D, dùng mẫu 3D Cổ điển hoặc Bóng dài, vốn chồng các lớp lệch với độ nhòe bằng không để tạo cảm giác chiều sâu. Để có viền chữ, dùng mẫu Viền chữ: nó đặt bốn bóng — trái, phải, trên và dưới — mỗi bóng có độ nhòe bằng không để vẽ theo đường viền của từng chữ cái. Tăng giá trị độ lệch để viền dày hơn.

text-shadow áp bóng lên chính các ký tự của chữ, nên nó bám theo hình dạng từng chữ cái. box-shadow áp bóng lên khung hình chữ nhật của phần tử. Hãy dùng công cụ này cho hiệu ứng kiểu chữ; dùng công cụ box-shadow khi bạn muốn đổ bóng quanh một thẻ hoặc nút bấm.

Giá trị bóng tính bằng pixel, vốn là đơn vị tuyệt đối, nên một bóng 4px trông lớn hơn theo tỷ lệ trên chữ 24px so với chữ 120px. Dùng thanh trượt cỡ chữ để xem trước bóng ở đúng kích thước bạn sẽ thực sự dùng, rồi chỉnh độ lệch và độ nhòe cho phù hợp.