12 hiệu ứng chữ độc đáo lập trình bằng ngôn ngữ CSS  | Để tạo ra một website ấn tượng thì design, hay “bộ mặt” của trang web là cực kỳ quan trọng. Trong design nói chung thì tiêu đề, đầu đề lại là thứ đập vào mắt user đầu tiên, vì vậy gây ấn tượng bằng tiêu đề sẽ đem lại hiệu quả nhiều nhất.

Cách đây từ 5 năm đổ về trước, designer hay cặm cụi với Photoshop để tạo ra các hiệu ứng chữ đẹp, export ra thành file ảnh để nhúng vào web, hay dùng flash để tạo animation. Tuy nhiên với sự phát triển của HTML5 và CSS3 thì quan niệm và cách làm đã thay đổi hoàn toàn. Giờ đây chỉ với CSS (và JS với 1 chút nâng cao) thì đã có thể tạo ra rất nhiều hiệu ứng chữ đáng kinh ngạc.

Bản thân mình hay xem Codepen để học hỏi và lấy cảm hứng, và nhận ra có rất nhiều pen phải nói là quá đỉnh. Hôm nay mình sẽ liệt kê những pen đẹp nhất về hiệu ứng chữ. Bạn có thể click vào link trên đầu đề để xem cụ thể code của pen. Tất cả các pen ở đây đều chỉ dùng CSS và có thể có thêm JS.

Elastic Stroke

Text Animation

Cosmos

Loading text

Squiggly Text

Elegant Shadow

Foggy Text

Signature

Glitch

Webkit Background Text

Glitchy 404

Dashed Shadow

Nếu các bạn còn thấy hiệu ứng đẹp nữa bằng CSS/JS thì chia sẻ nhé !