CSS bóng văn bản

Đúng như tên gọi của nó, thuộc tính CSS này thêm bóng cho văn bản. Nó chấp nhận danh sách bóng được phân tách bằng dấu phẩy áp dụng cho văn bản. Thuộc tính mặc định của nó là không có. Nó áp dụng một hoặc nhiều hiệu ứng đổ bóng văn bản trên nội dung văn bản của phần tử

Hãy xem cú pháp của thuộc tính text-shadow

cú pháp

giá trị

h-bóng tối. Đó là giá trị cần thiết. Nó chỉ định vị trí của bóng ngang và cho phép các giá trị âm

v-shadow. Nó cũng là giá trị bắt buộc chỉ định vị trí của bóng dọc. Nó không cho phép các giá trị âm

CSS có đầy đủ các tùy chọn để cải thiện giao diện trang web của bạn; . Chúng mang lại kết quả tương tự như các bóng được tìm thấy trong phần mềm chỉnh sửa hình ảnh như Photoshop

Nhưng CSS đổ bóng hoạt động như thế nào?

Cách sử dụng bóng hộp CSS

Bạn có thể áp dụng bóng hộp CSS bằng một dòng CSS chứa phạm vi tối đa sáu giá trị. Thứ tự của các giá trị rất quan trọng để bóng hộp CSS của bạn hoạt động và có vẻ như thế này

 box-shadow: offset-x offset-y blur spread color inset; 

Hãy xem xét từng giá trị theo thứ tự

Vị trí bóng hộp CSS

Các giá trị offset-x và offset-y kiểm soát vị trí của bóng hộp của bạn. Giá trị offset-x biểu thị vị trí nằm ngang của bóng, trong khi offset-y là phần bù dọc

  box-shadow: 10px 10px; 

Các giá trị dương dẫn đến bóng bên dưới và bên phải của phần tử

Bạn cũng có thể sử dụng các giá trị âm cho h-offset và v-offset

  box-shadow: -10px -10px; 

Độ lệch h âm di chuyển bóng sang trái, trong khi độ lệch v âm di chuyển bóng lên trên

Làm mờ bóng hộp CSS

Như bạn có thể thấy, việc thêm h-offset và v-offset vào bóng của bạn sẽ tạo ra một bóng đồng nhất mà không có bất kỳ lông vũ nào. Giá trị mờ làm mờ bóng hộp CSS của bạn và có hiệu lực nếu bạn cung cấp giá trị thứ ba

 box-shadow: 10px 10px 20px; 

Số bạn thêm vào giá trị độ mờ càng cao thì bóng hộp CSS của bạn sẽ càng mờ. Giá trị này không được âm

Trải rộng bóng hộp CSS

Giá trị trải rộng cho phép bạn thay đổi kích thước của bóng mà không làm thay đổi vị trí của nó

  box-shadow: 10px 10px 20px 30px; 

Giá trị chênh lệch dương sẽ làm cho bóng của hộp CSS của bạn lớn hơn, trong khi giá trị âm sẽ làm cho bóng nhỏ hơn

Màu bóng của hộp CSS

Bóng hộp CSS mặc định là màu văn bản của thành phần, nhưng bạn có thể ghi đè màu đó bằng cách thêm màu

 box-shadow: 10px 10px 20px 10px #0000ff; 

Màu bạn sử dụng phải ở định dạng màu hợp pháp của CSS, chẳng hạn như mã hex, mã RGB hoặc màu được xác định trước. Bạn có thể tìm hiểu về mã hex và các tùy chọn màu hợp pháp khác của CSS trước khi bắt đầu với bóng của mình

CSS Box Shadow Inset

Bóng hộp CSS mặc định nằm ngoài phần tử được chỉ định của chúng. Bằng cách thêm một phần phụ vào thuộc tính box-shadow, bạn có thể hiển thị bóng ở bên trong phần tử

 box-shadow: 10px 10px 20px 10px #0000ff inset; 

Đây là một giá trị văn bản được xác định trước;

Cách sử dụng bóng văn bản CSS

Bóng văn bản CSS giống như bóng hộp, mặc dù chúng có ít giá trị hơn để sửa đổi. Cú pháp cho bóng văn bản CSS trông như thế này

 text-shadow: offset-x offset-y blur-radius color; 

Nhưng những giá trị này hoạt động như thế nào?

Vị trí đổ bóng văn bản CSS

Độ lệch bóng văn bản CSS hoạt động rất giống với các giá trị bóng hộp giống nhau

Các giá trị dương sẽ định vị bóng bên dưới và bên phải của văn bản

Các giá trị âm làm ngược lại, đặt bóng bên trên và bên trái của văn bản

  text-shadow: -10px -10px; 

Bạn có thể kết hợp các giá trị âm và dương để định vị bóng văn bản CSS của mình một cách hoàn hảo

Bán kính làm mờ bóng văn bản CSS

Bán kính làm mờ bóng văn bản CSS cho phép bạn làm mờ bóng phía sau văn bản của mình

  box-shadow: 10px 10px; 

Giá trị mặc định cho giá trị này là 0 [không mờ]

Màu bóng văn bản CSS

Theo mặc định, bóng văn bản CSS khớp với màu của văn bản. Bạn có thể thay đổi màu của văn bản bằng cách thêm nó vào cuối thuộc tính bóng văn bản CSS

  box-shadow: 10px 10px; 

Giống như màu bóng của hộp CSS, bạn phải sử dụng màu hợp lệ của CSS cho việc này

Ví dụ về thiết kế hộp CSS và bóng văn bản

Bạn có thể bắt đầu thử nghiệm việc sử dụng hộp CSS và đổ bóng văn bản sau khi bạn hiểu những kiến ​​thức cơ bản. Những ý tưởng bên dưới sẽ truyền cảm hứng để bạn nghĩ ra những cách sáng tạo của riêng mình để sử dụng các thuộc tính CSS này

Đường viền hai màu với hai bóng hộp CSS

Bạn có thể thêm nhiều bóng hộp hoặc bóng văn bản vào phần tử HTML. Miễn là chúng có dấu phẩy giữa chúng, bạn có thể thêm bóng mới vào một thuộc tính

  box-shadow: 10px 10px; 

Đường viền hai màu này là một ví dụ điển hình về điều này. Hai bóng hộp CSS có vị trí đối lập và không bị mờ/lan rộng tạo ra một đường viền sáng tạo tuyệt vời

Bóng văn bản CSS kép cho hiệu ứng ấn tượng

Tương tự như ý tưởng ở trên, bạn có thể thêm và định vị nhiều bóng văn bản cho văn bản để có kết quả thú vị

  box-shadow: 10px 10px; 

Ví dụ này hiển thị một dòng văn bản có bóng ở trên và bóng ở dưới, cả hai đều có giá trị màu dựa trên văn bản

Hình nền nhiều màu với bóng hộp CSS Inset

CSS đủ mạnh để tạo nội dung độc đáo và thú vị mà không cần bất kỳ tệp bên ngoài nào. Sử dụng bóng hộp CSS bên trong làm nền là một ví dụ tuyệt vời về điều này

  box-shadow: 10px 10px; 

Hộp này có nền trắng, cùng với ba bóng mờ có màu khác nhau. Các bóng chồng lên nhau để tạo nền độc đáo

Tăng cường hiệu ứng này hơn nữa là một vấn đề đơn giản bằng cách thêm một gradient nền CSS phong cách vào phần tử của bạn

CSS Box Shadows & Text Shadows cho thiết kế web sáng tạo

Hộp CSS và bóng văn bản rất dễ sử dụng khi bạn biết cách làm việc với chúng. Bây giờ bạn đã có các công cụ cần thiết để bắt đầu thiết kế của riêng mình, nhưng bạn nên tiếp tục nghiên cứu CSS để cải thiện kỹ năng của mình

công dụng của văn bản là gì

văn bản có giá trị gì

Làm cách nào để sử dụng bóng trong CSS?

Ba bóng văn bản phổ biến là gì?