Share code đổ bóng cho chữ, thành phần, text-shadow, box-shadow

Code HTML CSS chuẩn cho web/wap

Những thẻ html, css cơ bản và không thể thiếu cho mỗi trang web

Code css đổ bóng cho text hộp..

Trong css3 hộ trợ một thuộc tính giúp đổ bóng cho văn bản là text-shadow với cấu trúc đầy đủ như sau:
text-shadow: 1px 2px 3px color;
Trong đó:
1px: chỉ rõ bóng ngang
2px: chỉ rõ bóng dọc
3px: chỉ rõ độ mờ, loang của bóng
color: Màu của bóng

Ví dụ ta có dòng chữ như sau:
Thantienvxp

Khi thêm thuộc tính text-shadow như sau:text-shadow:3px 3px 3px red;Thì ta được

Thantienvxp

Bạn cũng có thể kết hợp nhiều chuỗi giá trị để tạo ra một bóng nhiều màu
Ví dụ với giá trị sau:text-shadow:1px 1px 5px red, 2px 3px 4px blue;Ta sẽ được

Thantienvxp Thế giới online

Ta thấy chữ đã có bóng màu xanh nước biển quyện với màu đỏ đó chính là do thuộc tính text-shadow gây nên

Đổ bóng cho hộp văn bản, liên kết, vùng,.. sử dụng box-shadow

Để đổ bóng cho thành phần css3 thường dùng box-shadow với các giá trị giống ở text

Để hiểu rõ ta xét ví dụ với thuộc tính box-shadow:4px 4px 5px #999;

Các dòng chữ Thantienvxp như đang ở trên các thành phần khác và tạo một cái bóng trên trang. Có điều này là do thuộc tính box-shadow mà ta đã cho nó , thuộc tính box-shadow sẽ đổ bóng theo hình chữ nhật chứ không theo hình dạng chữ

Ta cũng có thể kết hợp nhiều chuỗi giá trị để tạo ra bóng nhiều màu săc

ví dụ:box-shadow:2px 2px 3px #008000, 3px 2px 5px red;

Thantienvxp Game mobile MRE JAVA game hot cực hay

Hãy chăm chỉ học tập, việc sử dụng nhuần nhiễn các thuộc tính css cơ bản sẽ là nền tảng cho một trang web đẹp và hiện đại