[Tự Học CSS] - Tìm Hiểu Về Hiệu ứng đổ Bóng Văn Bản Trong CSS

Trang chủ » đổ Bóng Cho Chữ Css » [Tự Học CSS] - Tìm Hiểu Về Hiệu ứng đổ Bóng Văn Bản Trong CSS

Có thể bạn quan tâm

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.

  • Hướng dẫn chèn bài viết liên quan cực đẹp cho website
  • Thêm hiệu ứng ánh sáng khi hover ảnh sản phẩm Woocommerce bằng CSS
  • Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome
  • Hướng dẫn tạo các nút gọi, chat Zalo và chat Facebook cho website WordPress bằng HTML và CSS
  • Hướng dẫn tạo thanh Float menu bám sát lề cho website WordPress

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ụ :

h1 { text-shadow: 2px 2px blue; }
123h1{text-shadow:2px2pxblue;}

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

h1 { text-shadow: 2px 2px red; }
123h1{text-shadow:2px2pxred;}

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:

<!DOCTYPE html> <html> <head> <style> h1 { color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } </style> </head> <body> <h1> Tạo nhiều hiệu ứng đổ bóng </h1> </body> </html>
1234567891011121314<!DOCTYPEhtml><html><head><style>h1 {color:white;text-shadow:1px1px2pxblack,0025pxblue,005pxdarkblue;}</style></head><body><h1>Tạonhiềuhiệuứngđổbóng</h1></body></html>

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ụ :

h1 {     color: yellow;     text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; }
1234h1 {   color: yellow;   text-shadow: -1px0black,01pxblack,1px0black,0-1pxblack;}

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ụ

<!DOCTYPE html> <html> <head> <style> div h1 { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px; } </style> </head> <body> <div> <h1>Đổ bóng cho hộp</h1> </div> </body> </html>
12345678910111213141516171819<!DOCTYPEhtml><html><head><style>div h1 {width:300px;height:100px;padding:15px;background-color:yellow;box-shadow:10px10px;}</style></head><body><div><h1>Đổbóng chohộp</h1></div></body></html>

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

<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px blue; } </style> </head> <body> <div>Đây là một hộp đã được tạo hiệu ứng đổ bóng</div> </body> </html>
12345678910111213141516171819<!DOCTYPEhtml><html><head><style>div {width:300px;height:100px;padding:15px;background-color:yellow;box-shadow:10px10pxblue;}</style></head><body> <div>Đâylàmộthộpđãđượctạohiệuứngđổbóng</div> </body></html>

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ụ :

<!DOCTYPE html> <html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: yellow; box-shadow: 10px 10px 5px blue; } </style> </head> <body> <div>Tạo hiệu ứng đổ bóng mờ cho hộp</div> </body> </html>
1234567891011121314151617<!DOCTYPEhtml><html><head><style>div {width:300px;height:100px;padding:15px;background-color:yellow;box-shadow:10px10px5pxblue;}</style></head><body><div>Tạohiệuứngđổbóngmờchohộp</div></body></html>

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:

Từ khóa » đổ Bóng Cho Chữ Css