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

5385 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

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.

 

5/5 - (2 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

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

3 những suy nghĩ trên “[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ú nói:

    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 ạ -__-

Để lại một bình luận

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 *