25 Bài Hướng Dẫn Tạo Hiệu Ứng Chữ Đẹp với CSS3

Nếu như vì một số lý do nào đó mà bạn không sử dụng CSS3 vào trong thiết kế web, thì một vài hướng dẫn hiệu ứng Text với CSS3 sau đây sẽ thổi lên ngọn lửa đam mê trong bạn. Từ đó, bạn sẽ hiểu thêm một vài tính năng đầy ấn tượng mà bạn chưa bao giờ biết đến trước đây.

Ngay thời điểm này, CSS3 biến đổi rất nhiều, các thuộc tính của CSS3 như: transform, transition và animation đang dần thay thế Javascript trong việc tạo ra một số hiệu ứng hoạt hình vì nó sẽ làm tăng tốc độ khi được trả về trực tiếp từ trình duyệt. Giống như người ta dùng hiệu ứng text và style, text-shadow để tạo nên các typography tùy chỉnh xuất hiện như hiệu ứng 3D, hiệu ứng chữ khắc, in nổi và ánh sáng hoặc sự phùng ra. Những bài hướng dẫn về hiệu ứng text sử dụng CSS3 dưới đây sẽ cho bạn thấy được các nhà thiết kế đã tạo những trang web hấp dẫn và thú vị ra sao. Thưởng thức các hiệu ứng này cùng Lamweb.com nhé!

Tạo Hiệu Ứng Text Cực Đẹp sử dụng CSS3 và Lettering.js

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Trong phần này, bạn sẽ học được cách tạo ra hiệu ứng ánh sáng tuyệt đẹp cho text với một chút âm thanh
Xem DemoXem Hướng Dẫn

Tạo Hiệu Ứng Chữ 3D sử dụng CSS3 Thuần Túy

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Hiệu ứng text 3D trong typography cùng với việc đổ bóng. Bài này sẽ hướng dẫn bạn cách dùng CSS3 thuần túy.
Xem DemoXem Hướng Dẫn

Arctext.js – Làm Cong Chữ với CSS3 và jQuery

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Dùng CSS3 cho phép chúng ta xoay tròn các ký tự, có thể sắp xếp chúng dọc theo đường cong ( Curving ). Arctext.js là một jQuery plugin giúp bạn làm được điều đó. Dựa vào Lettering.js, bạn có thể tính được góc quay cho mỗi ký tự và phân phối đều như nhau trên một vòng cung của một bán kính nhất định.
Xem DemoXem Hướng Dẫn | Tải Về

Làm Thế Nào để Tạo một Hiệu Ứng Chữ Hoa Đầu Dòng Thật Phong Cách với CSS3

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

“Làm Chữ Hoa Đầu Dòng” ( drop cap ) khá phổ biến trong ngành công nghiệp in ấn, tuy nhiên trong website thì khá ít. Bài viết này sẽ hướng dẫn bạn làm thế nào để tạo ra hiệu ứng “Làm Chữ Hoa Đầu Dòng” đẹp cho website bằng các hiệu ứng CSS3 text-shadow.
Xem DemoXem Hướng Dẫn

Chữ 3D

Sử dụng liên tục text-shadow để tạo text 3D trên HTML. Không cần thêm HTML, không làm bạn phải đau đầu, là một “gia vị” tuyệt vời.
Xem Hướng Dẫn

Hiệu Ứng Chữ Khắc với CSS Text-Shadow

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Hiệu ứng chữ khắc hoặc in nổi ( letterpress ) ngày càng phổ biến rộng rãi trong thiết kế website, những trình duyệt đều hỗ trợ cho các thuộc tính CSS3, nó khá đơn giản và dễ dàng để tạo ra hiệu ứng với CSS thuần túy. Không cần phải dùng đến Photoshop ở đây!
Xem DemoXem Hướng Dẫn

Hiệu Ứng Lóe Sáng

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Dùng thuộc tính text-shadow, bạn có thể biến bất kỳ text trở nên sáng hơn và đầy quyến rũ.
Xem Hướng Dẫn

Hiệu Ứng Chữ Kẻ Sọc CSS3

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Học cách dùng text-shadow trong typography theo phong cách retro.
Xem Hướng Dẫn

Hiệu Ứng Khung Ký Tự sử dụng CSS3

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Tạo ra các hiệu ứng khung ký tự  ( letter cards ) mà không dùng hình ảnh. Chỉ cần với CSS3.
Xem DemoXem Hướng Dẫn

Sự Tinh Tế của Typography với CSS3

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Dùng những hiệu ứng chữ như bóng đổ, viền ngoài, transition, và gradient, bạn có thể tạo ra những typography như là dùng Photoshop vậy.
Xem Hướng Dẫn | Tải Về

Hướng Dẫn Nhanh: Tạo Gradient cho Chữ với CSS Thuần Túy

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Tạo gradient cho text trên trình duyệt.
Xem DemoXem Hướng Dẫn

Đổ Bóng với CSS text-shadows

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Ứng dụng text-shadow để tạo ra hiệu ứng đổ bóng đẹp.
Xem Hướng Dẫn

Thêm Nét vào Chữ trên Web

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Bạn sẽ biết cách tạo ra nét cho chữ của website bằng CSS qua bài hướng dẫn này.
Xem DemoXem Hướng Dẫn | Tải Về

Tạo Khối Ba Chiều cho Chữ

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Tạo ra khối text 3 chiều ( three-dimensional blocks ) bằng việc dùng text-shadow và box-shadow.

Xem DemoXem Hướng Dẫn

Hướng Dẫn Hiệu Ứng Chữ Đổ Bóng 3D sử dụng CSS

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Xem DemoXem Hướng Dẫn

Tạo một Typography Tuyệt Đẹp với CSS3

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Dùng markup và transform để tạo ra những thiết kế typography lôi cuốn trong CSS3 thuần túy.
Xem DemoXem Hướng Dẫn

CSS3 Background-Clip và @Font-Face

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Hướng dẫn tạo typography với background-clip: text và @font-face thông qua Typekit.
Xem DemoXem Hướng Dẫn

CSS3 Trans­form và Thử Nghiệm @font-face

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Tạo typography đẹp mắt giống như các poster khi dùng CSS3.
Xem Hướng Dẫn

Hiệu Ứng Chữ CSS3 ( Viền Ngoài và Đổ Bóng )

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Bài viết này chỉ bạn sử dụng text-shadow.
Xem Hướng Dẫn

Hướng dẫn CSS3: Làm Sao Để Thay Đổi Màu Mặc Định Của Vùng Chọn Nội Dung

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Trong bài này, bạn sẽ dùng CSS3 để làm nổi bật lên vùng chọn nội dung bằng nhiều cách khác nhau trên trang web.
Xem DemoXem Hướng Dẫn

Làm Thế Nào để Tạo Hiệu Ứng Dát Typography với CSS3

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Học cách tạo ra một hiệu ứng dát chữ ( inset text ) chưa đến 10 phút.
Xem Hướng Dẫn

Sách dạy nấu ăn CSS3: 7 Món CSS Cực Dễ để Copy và Paste

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

7 mánh khóe CSS vui nhộn và đầy lôi cuốn mà bạn có thể “chôm” và thêm vào ngay trong các dự án web của bạn.
Xem Hướng Dẫn

7 Hiệu Ứng Chữ Tuyệt Vời với CSS sử dụng Thuộc Tính Shadow

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Dùng chữ và CSS text-shadow để tạo ra những chữ này. Đây là một phần của hiệu ứng Chữ Khắc ( Letterpress ).
Xem DemoXem Hướng Dẫn

Sử Dụng CSS Text-Shadow để Tạo Ra Những Hiệu Ứng Chữ Tuyệt Vời

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Tạo ra những hiệu ứng đẹp và khéo léo khi dùng text-shadow.
Xem Hướng Dẫn

8 Hiệu Ứng CSS3 text-shadow

25 Bài Hướng Dẫn Tạo Hiệu Ứng Text Đẹp Bằng CSS3

Bài viết này cho bạn biết cách tạo ra 8 hiệu ứng đẹp chỉ dùng text-shadow.
Xem DemoXem Hướng Dẫn