• Trang chủ
  • Học CSS
  • [Tự học CSS] – Tìm hiểu về hiệu ứng đổ bóng văn bản trong CSS
76 lượt xem

[Tự học CSS] – Tìm hiểu về hiệu ứng đổ bóng văn bản trong CSS

Chào các bạn, mình rất vui khi hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Trong bài viết này, mình và các bạn cùng nhau tìm hiểu về thuộc tính mới, thuộc tính này dùng để tạo ra các hiệu ứng đổ bóng trong văn bản để làm cho website trở nên phong phú và đẹp hơn trong mắt người nhìn.

Hiệu ứng đổ bóng văn  (Text – shadow)

Thuộc tính text-shadow dùng để tạo hiệu ứng đổ bóng cho văn bản.

Trong cách sử dụng đơn giản nhất, bạn chỉ xác định cho nó đổ bóng ngang  và bóng dọc :

Ví dụ :

Tiếp theo, bạn thêm màu sắc cho hiệu ứng đổ bóng :

Thêm nhiều hiệu đứng đổ bóng văn bản cùng một lúc

Để thêm nhiều bóng vào văn bản, bạn có thể thêm danh sách các hiệu ứng đổ bóng và nó được phân cách bằng dấu phẩy.

Ví dụ sau đây cho thấy một văn bản màu trắng với bóng đen, xanh dương và xanh đậm:

Bạn cũng có thể sử dụng thuộc tính text-shadow để tạo một đường viền đơn giản xung quanh một số văn bản (không có bóng)

Ví dụ :

Kết quả :

Thuộc tính tạo bóng cho hộp trong CSS

Thuộc tínhbox-shadow dùng để tạo các hiệu ứng đổ bóng cho hộp  gồm các phần tử.

Trong cách sử dụng đơn giản nhất, bạn chỉ xác định bóng ngang và bóng dọc:

Ví dụ

Tiếp theo, thêm màu vào để tạo bóng cho hộp :

Kết quả :

Bạn cũng có thể tạo hiệu ứng mờ cho bóng bằng cách thêm một giá trị vào thuộc tính text-shadow

Ví dụ :

Kết quả

Lời Kết

Bài viết hướng dẫn của mình tới đây là hết rồi, mình mong rằng bài viết này sẽ có ích cho các bạn. Nếu có bất kỳ thắc mắc nào liên quan tới bài học thì hãy đừng ngại và comment vào phía dưới bài viết. Các bạn hãy chú ý theo dõi và cùng chờ đón những bài viết tiếp theo từ mình nhé. Cảm ơn các bạn đã theo dõi bào viết, chúc các bạn học tập thật tốt.

 

[Tự học CSS] – Tìm hiểu về hiệu ứng đổ bóng văn bản trong CSS
5 (2) votes

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Bình luận Facebook

3 bình luận trong “[Tự học CSS] – Tìm hiểu về hiệu ứng đổ bóng văn bản trong CSS

  1. Thái Văn Phú says:

    Anh có thể xuất file sang dạng PSD cho em xin được không ạ. Máy e yếu chỉ cài được photoshop thôi ạ -__-

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *