Cách sử dụng CSS Box Shadows và Text Shadows

CSS có đầy đủ các tùy chọn để nâng cao sự xuất hiện của các trang web của bạn; văn bản và bóng hộp là những ví dụ điển hình. Chúng cung cấp kết quả tương tự như bóng đổ trong phần mềm chỉnh sửa hình ảnh như Photoshop.

Nhưng CSS shadow hoạt động như thế nào? Hãy đi sâu vào ngay.

Cách sử dụng CSS Box Shadow

Bạn có thể áp dụng bóng hộp CSS với một dòng CSS chứa 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à nó trông giống như sau:

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

Chúng ta 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 đại diện cho vị trí nằm ngang của bóng, trong khi offset-y là độ lệch dọc.

 box-shadow: 10px 10px;

Giá trị dương dẫn đến một 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 bù đắp h và bù đắp v:

 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 nó lên trên:

CSS Box Shadow Blur

Như bạn có thể thấy, việc thêm bù đắp h và bù đắp v vào bóng đổ của bạn sẽ tạo ra một bóng mờ chắc chắn mà không có bất kỳ sợi lông 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;

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

CSS Box Shadow Spread

Giá trị spread 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ị spread dương sẽ làm cho bóng hộp CSS của bạn lớn hơn, trong khi giá trị âm sẽ làm cho nó nhỏ hơn.

Màu bóng hộp CSS

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

box-shadow: 10px 10px 20px 10px 

Màu bạn sử dụng phải ở định dạng màu hợp pháp CSS, như mã hex, mã RGB hoặc màu 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 CSS khác 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 nội dung 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 

Đây là một giá trị văn bản được xác định trước; chỉ cần thêm hoặc bớt nó để đặt giá trị.

Cách sử dụng CSS Text Shadow

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 giống như sau:

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

Phần bù 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:

text-shadow: 10px 10px;

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ờ 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 mờ phía sau văn bản của mình.

text-shadow: 10px 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 văn bản của mình bằng cách thêm nó vào cuối thuộc tính bóng văn bản CSS.

text-shadow: 10px 10px 10px 

Giống như màu bóng hộp CSS, bạn phải sử dụng màu hợp pháp 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 với việc sử dụng hộp CSS và bóng văn bản khi bạn hiểu những điều cơ bản. Những ý tưởng dưới đây sẽ truyền cảm hứng cho bạn để tìm ra những cách sáng tạo của riêng bạn để 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 hơn một bóng hộp hoặc bóng văn bản vào một 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 duy nhất.

box-shadow: 30px 30px #0000ff, -30px -30px 0px #00ff00;

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 với cá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 kịch tính

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

text-shadow: 35px 20px 4px darkgray, -35px -20px 4px darkgray;

Ví dụ này cho thấy 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 lồng vào

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: 20px 10px 10px 40px 

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

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

Bóng hộp CSS & Bóng văn bản 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 làm việc với các 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.