Tái tạo hiệu ứng chữ Retro nhiều nét vẽ (Multi-stroke) chỉ với CSS

Tái tạo hiệu ứng chữ Retro nhiều nét vẽ (Multi-stroke) chỉ với CSS Bài viết chia sẻ kỹ thuật thú vị để tạo hiệu ứng văn bản nhiều nét vẽ mang phong cách Retro chỉ sử dụng CSS. Phương pháp này dựa trên việc xếp chồng các lớp văn bản với độ rộng nét vẽ khác nhau, tuy nhiên cần lưu ý về hiệu năng khi áp dụng vào thực tế.

Hiệu ứng văn bản nhiều nét vẽ (multi-stroke) là một phong cách thiết kế Retro thường thấy trong các ấn phẩm cũ. Nhiều nhà phát triển web đã cố gắng tái hiện nó bằng thuộc tính text-stroke của CSS, nhưng kết quả thường không như ý muốn vì thuộc tính này chỉ chấp nhận một giá trị duy nhất.

Nguồn cảm hứng từ sách Graphic Japan

Giải pháp thay thế là xếp chồng (stacking) các phần tử lên nhau. Tuy nhiên, cách làm này trước đây thường không hiệu quả. Mọi chuyện thay đổi khi tác giả thử nghiệm việc thay đổi độ rộng của nét vẽ (text-stroke-width) cho từng lớp một cách ngẫu nhiên.

Cơ chế hoạt động

Khi sử dụng các giá trị text-stroke-width khác nhau, trình duyệt sẽ tự động vẽ các đường viền của ký tự. Độ rộng nét càng lớn, đường viền càng dày, nhưng vẫn giữ nguyên hình dạng gốc của ký tự.

Bằng cách xếp chồng nhiều lớp văn bản với các màu sắc và độ rộng nét vẽ khác nhau, chúng ta có thể tạo ra hiệu ứng chiều sâu và nhiều lớp sắc thái thú vị.

Sự khác biệt giữa các trình duyệt

Một điểm thú vị là cách các trình duyệt xử lý việc vẽ nét viền này khác nhau. Firefox cho kết quả mượt mà hơn so với Chrome và Safari.

Kết quả trên Chrome

Kết quả trên Firefox

Ngoài ra, khi có nhiều văn bản trên cùng một dòng, các hình dạng ký tự có thể bị hòa trộn vào nhau, tạo ra những hiệu ứng hình học độc đáo.

Thử nghiệm với các Font chữ khác nhau

Kết quả cuối cùng phụ thuộc rất nhiều vào font chữ bạn chọn. Tác giả đã sử dụng hàm @google-font để tải nhanh các font chữ như Matemasie, Pacifico, Tangerine và Cherry Bomb One nhằm kiểm tra hiệu ứng.

Ví dụ với font chữ Matemasie

Mỗi font chữ mang lại một cảm giác hoàn toàn khác nhau khi áp dụng hiệu ứng multi-stroke.

Lưu ý về hiệu năng

Mặc dù kỹ thuật này mang lại kết quả thị giác ấn tượng, nhưng hiệu năng của nó lại khá kém, tương tự như các bộ lọc CSS (CSS filters). Đặc biệt khi kích thước font chữ lớn, bạn có thể nhận thấy hiện tượng nhấp nháy (flickering).

Kỹ thuật này phù hợp cho các thử nghiệm (experiment) hoặc tạo hình ảnh tĩnh bằng công cụ như css-doodle, nhưng chưa thực sự phù hợp để sử dụng trong môi trường sản xuất (production) thực tế.

Bạn có thể xem thêm các ví dụ và mã nguồn tại CodePen để tự mình thử nghiệm.