Đổ bóng cho chữ không còn là độc quyền của Photoshop nữa, giờ chúng ta có thể làm điều đó mà chỉ cần dùng code.
CSS3 thực sự là làn gió mát, nó đem lại các hiệu ứng không hề mới nhưng được thực hiện theo cách đơn giản và dễ dàng hơn nhiều.
Hãy nhìn dòng chữ dưới đây:
Tôi Đổ Bóng Cho Đoạn Văn Bản Này
Bạn có thể thấy nó được đổ bóng với màu xanh. Code mẫu:
text-shadow: 4px 5px 6px blue;Giải thích code:
- Giá trị đầu tiên 4px là khoảng cách dịch từ bên trái sang theo phương nằm ngang;
- Giá trị thứ hai 5px là khoảng cách dịch từ trên xuống theo hướng thẳng đứng;
- Giá trị thứ ba 6px là độ mờ (blur) của bóng;
- Cuối cùng là màu sắc của bóng;
- Bạn có thể để giá trị âm nếu muốn cho chiều ngang và đứng, dĩ nhiên nó sẽ ngược lại giá trị dương. Nếu để âm cho giá trị blur bạn sẽ không còn thấy bóng nữa!
Như vậy cú pháp của đổ bóng cho văn bản là:
text-shadow: lệch-ngang lệch-đứng độ-mờ màu-sắc;Nếu không có giá trị thứ ba, tức là không có độ mờ, chúng ta sẽ thấy như có 2 văn bản sinh đôi được đặt cạnh nhau:
Văn Bản Này Không Có Giá Trị Blur
Trông rất khó coi, trừ khi bạn giảm giá trị dịch chuyển xuống 1px – 2px theo cả 2 chiều…
Nếu muốn đổ bóng cho hộp, bạn dùng thuộc tính box-shadow.