3 phong cách chữ cực đẹp làm bởi CSS

Hiệu ứng đổ bóng cho chữ trong CSS có thể được sử dụng cho nhiều kiểu trang trí tuyệt vời. Với bài hướng dẫn này, bạn sẽ nhanh chóng thấy được cách làm thế nào sử dụng nó để làm nên 3 phong cách độc đáo mà bạn có thể sử dụng ngay bây giờ và cả sau này. Để sử dụng những hiệu ứng này một cách hiệu quả thì chúng tôi khuyến cáo bạn nên sử dụng trong những thiết kế website đơn giản về bố cục và không quá nhiều hình ảnh để làm nổi bật lên nội dung văn bản,

3 phong cách này có thể được tạo ra bởi hiệu ứng đổ bóng text trong CSS, ở đây chúng ta có: 3D text, Retro text, Inset text. Mỗi thứ có một ứng dụng riêng tùy theo ý tưởng của bạn. Trong bài này chúng tôi sẽ đưa ra ví dụ cụ thể cho bạn.

Phong cách đầu tiên chúng ta sẽ xem xét là 3D text. Trong đoạn code dưới đây bạn có thể thấy một tùy chỉnh đang được sử dụng, trong đó yêu cầu sử dụng font-family. Ngoài ra còn sử dụng color: rgba cho phép bạn kết hợp độ trong suốt vào các thiết lập màu sắc của bạn. Ý tưởng ở đây là lần đầu tiên bạn thêm văn bản chính và sau đó thêm một layout nhẹ bù đắp của cùng văn bản đó để tạo ra các hiệu ứng 3D.

1. #ts1 {
2. font-family: "Paytone One", sans-serif;
3. background: url(noise.png)
4. }
5.  
6. #ts1 span {
7. color: rgba(255, 0, 0, 0.4);
8. text-shadow: 8px 0 0 rgba(0, 0, 255, 0.3);
9. }

Hiệu ứng tiếp theo là Retro text. Nó thực ra là một lớp layout được thêm trong bóng tối văn bản tạo ra hiệu ứng bút chì mỏng có hiệu lực nổi bật và làm cho văn bản trông cũ hơn.

1. #ts3 {
2. font-family: 'Lobster', cursive;
3. background: #ad2960
4. }
5.  
6. #ts3 span {
7. color: #f9c90f;
8. text-shadow: 3px 3px 0 #ad2960,
9. 5px 5px 0 rgba(255, 255, 255, 0.4);
10. }

Cuối cùng là Inset text. Bạn có thể tưởng tượng nó như kiểu chữ in chìm và tạo độ sâu cho website. Chủ yếu là văn bản gốc được thêm 1pixel bóng đổ vào phía trong để tạo hiệu ứng.

1. #ts2 {
2. font-family: Impact, sans-serif;
3. background: #525252
4. }
5.  
6. #ts2 span {
7. color: #161616;
8. text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2);
9. }

Hy vọng bạn sẽ tìm được sự hữu ích với bài hướng dẫn này. Trước khi rời đi, bạn có thể đọc qua bài viết: CSS3 Keyframe - Hiệu ứng widget Iphone để biết cách biến hiệu ứng của Iphone thành hiệu ứng trên website chỉ bằng việc sử dụng CSS3 Keyframe.