Một developer đã tìm ra cách tạo hiệu ứng chữ nhiều đường viền (multi-stroke text effect) bằng CSS thuần, giải quyết bài toán tưởng chừng đơn giản nhưng khiến nhiều lập trình viên đau đầu. Kỹ thuật này chỉ cần xếp chồng nhiều phần tử (element) và thay đổi giá trị text-stroke-width cho mỗi lớp.

Nguyên lý hoạt động

Khi thiết lập text-stroke-width khác nhau, trình duyệt tự động vẽ các đường viền bao quanh ký tự. Lớp có stroke càng dày thì viền càng lớn nhưng vẫn giữ nguyên hình dạng chữ. Bằng cách dùng nhiều màu sắc và sắp xếp thứ tự lớp, ta có thể tạo hiệu ứng chữ nhiều viền đầy màu sắc. Điều thú vị là FireFox cho kết quả mượt hơn Chrome và Safari, còn khi có nhiều chữ nằm cùng dòng, các viền sẽ tự động hòa vào nhau.

Thử nghiệm với font chữ

Kết quả cuối cùng phụ thuộc rất nhiều vào font được chọn. Developer đã thêm hàm @google-font để tải font nhanh hơn. Tuy nhiên, hiệu năng của phương pháp này khá kém, đặc biệt khi font-size lớn, gây giật lag (flicking). Dù vậy, nó phù hợp để thử nghiệm hoặc tạo ảnh với css-doodle, không dùng cho sản phẩm thực tế. Bạn có thể xem demo trên CodePen để tự tay điều chỉnh màu sắc và ký tự.

Đây là một thủ thuật công nghệ nhỏ nhưng cho thấy sự sáng tạo trong lập trình front-end. Nếu bạn quan tâm đến các xu hướng AI và thiết kế web, hãy theo dõi các bài viết tiếp theo.