Share Hiệu ứng đổ bóng văn bản với thuộc tính Text Shadow trong CSS3

filiallion · 05/07/2018

Với CSS3, có một loạt các hiệu ứng đổ bóng văn bản để các bạn có thể sử dụng vào các hiệu ứng trên giao diện website của các bạn. Bài viết này tôi sẽ hướng dẫn các bạn một số hiệu ứng đổ bóng văn bản bằng thuộc tính Text Shadow có trong CSS3. Các ví dụ mà tôi trình bày trong bài viết này chỉ là những khối mã lệnh CSS rất đơn giản để giúp các bạn có thể sử dụng tốt thuộc tính Text Shadow này trong CSS3.

Thuộc tính Text Shadow để đổ bóng văn bản các bạn có thể áp dụng cho bất kỳ một văn bản nào trên website, cú pháp như sau:

Code:

text-shadow: Vị_trí_theo_chiều_ngang Vị_trí_theo_chiều_dọc Độ_mờ Màu_sắc;

Sau đây là một số mã lệnh CSS ví dụ mà các bạn có thể tham khảo như sau:

CSS:

.text-shadow-1 {
    text-shadow: 1px 1px 3px #0062af;
}

.text-shadow-2 {
    text-shadow: 3px 3px 3px #aaa;
}

.text-shadow-3 {
    text-shadow: -3px -3px 3px #aaa;
}

.text-shadow-4 {
    color: #fff;
    text-shadow: 3px 3px 3px #000;
}

.text-shadow-5 {
    color: #fff;
    text-shadow: 0 0 5px #000;
}

.text-shadow-6 {
    color: transparent;
    text-shadow: 0 0 5px #000;
}

Các bạn sử dụng các class CSS đã được định nghĩa ở trên để xem kết quả.

Share Hiệu ứng đổ bóng văn bản với thuộc tính Text Shadow trong CSS3

filiallion

Administrator