Thêm bóng đổ vào một phần tử là một thành phần của việc tạo một tiêu đề hấp dẫn. Ví dụ:nếu bạn đang thiết kế một trang web, bạn có thể muốn thêm bóng vào mọi tiêu đề trên cùng để làm cho tiêu đề nổi bật so với văn bản tiêu đề khác trên trang web.
Đó là nơi xuất hiện thuộc tính text-shadow của CSS. Thuộc tính text-shadow cho phép bạn thêm hiệu ứng đổ bóng vào phần tử văn bản. Hướng dẫn này sẽ thảo luận, với các ví dụ, khái niệm cơ bản về bóng văn bản và cách sử dụng thuộc tính bóng văn bản để thêm bóng đổ vào văn bản trên trang web.
Bóng văn bản CSS
Bóng là một cách để phân biệt một phần tử trên trang web. Ví dụ:một dòng văn bản có bóng màu xanh lục có nhiều khả năng bắt mắt người dùng hơn một dòng văn bản màu đen tiêu chuẩn.
Thuộc tính text-shadow cho phép bạn thêm bóng xung quanh phần tử văn bản trong CSS. Bạn có thể áp dụng phần tử text-shadow cho tiêu đề, đoạn văn bản và các phần tử dựa trên văn bản khác trong HTML.
Cú pháp cơ bản cho thuộc tính text-shadow như sau:
text-shadow: offset-x offset-y blur-radius color;
Cú pháp cho thuộc tính text-shadow tương tự như cú pháp cho thuộc tính box-shadow, được sử dụng để áp dụng bóng cho các phần tử HTML dựa trên hộp. Để tìm hiểu thêm về bóng hộp trong CSS, hãy đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về bóng hộp trong CSS.
Dưới đây là các thành phần chính của cú pháp cho thuộc tính text-shadow:
- offset-x là độ lệch ngang (trục x) cho bóng đổ (bắt buộc).
- offset-y là độ lệch dọc (trục y) cho bóng đổ (bắt buộc).
- bán kính mờ là bán kính của hiệu ứng làm mờ cho bóng đổ (tùy chọn).
- color là màu của bóng. Màu mặc định cho bóng chữ là màu đen (tùy chọn).
Hãy cùng khám phá một vài ví dụ về thuộc tính text-shadow đang hoạt động để minh họa cách sử dụng thuộc tính này để tạo bóng văn bản của riêng bạn. Với mục đích của hướng dẫn này, chúng tôi sẽ sử dụng phần tử HTML sau:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
<html>
<h1>Career Karma</h1>
<style>
h1 {
color: lightblue;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Khi chúng tôi chạy mã của mình, một phần tử
được hiển thị, trình bày văn bản Career Karma trên màn hình. là phần tử tiêu đề lớn nhất được HTML hỗ trợ. Mã CSS của chúng tôi đặt giá trị của thuộc tính màu trong tiêu đề của chúng tôi thành lightblue . Điều này có nghĩa là tiêu đề của chúng tôi xuất hiện trong văn bản màu xanh lam nhạt.
Bóng văn bản cơ bản
lightblue . Điều này có nghĩa là tiêu đề của chúng tôi xuất hiện trong văn bản màu xanh lam nhạt. Bóng văn bản cơ bản
Chỉ có hai thuộc tính bắt buộc mà bạn cần chỉ định khi làm việc với thuộc tính text-shadow:offset-x và offset-y. Nếu chúng ta chỉ định hai thuộc tính này, chúng ta có thể tạo văn bản với bóng ngang và bóng dọc.
Dưới đây là một ví dụ về thuộc tính text-shadow với cả hai giá trị này được chỉ định:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi đã áp dụng một bóng văn bản đơn giản cho tiêu đề của chúng tôi. Bóng này được bù 1px trên cả trục ngang và trục dọc. Nếu bạn nhìn vào kết quả của mã của chúng tôi, bạn có thể thấy có một bóng đen nhỏ được áp dụng bên dưới văn bản của chúng tôi. Màu đen là màu mặc định cho bóng đổ.
Màu bóng
Khi bạn đang thiết kế bóng đổ văn bản, bạn có thể quyết định rằng bạn muốn chỉ định màu tùy chỉnh cho bóng đổ của mình. Đó là nơi xuất hiện thuộc tính color.
Giả sử chúng ta muốn bóng của mình có màu hồng nhạt. Chúng tôi có thể thay đổi màu bóng của chúng tôi thành màu hồng bằng cách sử dụng mã này:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 1px 1px pink;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi đã chỉ định thuộc tính color và đặt giá trị của nó thành pink . Điều này cho phép chúng tôi tạo ra một bóng hồng bên dưới văn bản của chúng tôi. Giống như trong ví dụ đầu tiên của chúng tôi, bóng của chúng tôi được bù đắp 1px trên cả trục ngang và trục dọc.
Bóng mờ
Thuộc tính bóng mờ có thể được sử dụng kết hợp với thuộc tính bán kính mờ để tạo bóng mờ.
Bây giờ, giả sử chúng ta muốn tạo bóng có độ lệch 3px trên cả trục ngang và trục dọc và có hiệu ứng mờ 2px xung quanh bóng. Chúng tôi có thể tạo bóng này bằng cách sử dụng mã sau:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Như bạn có thể thấy, bóng của chúng ta được bù đắp 3px trên cả hai trục và bóng của chúng ta được bao quanh bởi hiệu ứng mờ. Để tăng cường hiệu ứng làm mờ của chúng tôi, chúng tôi có thể tăng giá trị của thuộc tính bán kính mờ. Nếu chúng ta muốn bóng mờ hơn, chúng ta có thể đặt giá trị của bán kính mờ thành 5px hoặc 10px hoặc cao hơn, tùy thuộc vào độ mờ mà chúng ta muốn sử dụng. Trong ví dụ này, bóng của chúng ta là màu hồng.
Nhiều bóng
Cho đến nay, chúng ta đã thảo luận về cách sử dụng thuộc tính text-shadow để áp dụng một bóng cho một khối văn bản. Tuy nhiên, thuộc tính text-shadow cũng có thể được sử dụng để thêm nhiều bóng vào một phần tử văn bản.
Để thêm nhiều bóng đổ vào một khối văn bản, bạn nên tạo một danh sách các bóng đổ được phân tách bằng dấu phẩy. Cú pháp để tạo nhiều bóng văn bản như sau:
text-shadow: shadowOne, shadowTwo;
Bạn có thể chỉ định bao nhiêu bóng tùy thích, miễn là mỗi bóng được phân tách bằng dấu phẩy. Tuy nhiên, các giá trị offset x và y-offset mà bạn chỉ định cho mỗi bóng phải tăng theo thời gian, nếu không, các bóng của bạn sẽ chồng lên nhau và có thể không nhìn thấy được.
Các bóng sẽ xuất hiện theo thứ tự chúng được chỉ định. Vì vậy, shadowOne sẽ xuất hiện trước shadowTwo.
Giả sử chúng ta muốn tạo một biểu ngữ văn bản với các bóng hồng và cam phía sau văn bản. Chúng tôi có thể làm như vậy bằng cách sử dụng mã này:
<html>
<h1>Career Karma</h1>
<style>
h1 {
text-shadow: 3px 3px 2px pink, 6px 6px 5px orange;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Trong mã của chúng tôi, chúng tôi đã chỉ định hai bóng. Dưới đây là các giá trị chúng tôi đã chỉ định cho mỗi bóng của chúng tôi:
| Tên tài sản | Shadow One | Shadow Two |
| offset-x | 3px | 6px |
| offset-y | 3px | 6px |
| bán kính mờ | 2px | 5px |
| màu | màu hồng | màu cam |
Như bạn có thể thấy, chúng tôi đã tạo ra hai bóng đổ trong mã của mình, mỗi bóng có các giá trị khác nhau.
Kết luận
Thuộc tính text-shadow được sử dụng để thêm bóng vào một khối văn bản trong HTML. Bóng văn bản có thể được áp dụng cho bất kỳ phần tử dựa trên văn bản nào như tiêu đề và đoạn văn.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, khái niệm cơ bản về bóng văn bản và cách sử dụng thuộc tính bóng văn bản để tạo bóng văn bản tùy chỉnh. Bây giờ bạn đã có kiến thức cần thiết để bắt đầu thiết kế bóng văn bản CSS của riêng mình như một nhà thiết kế web chuyên nghiệp!