Đổ bóng text-shadow trong CSS

Đổ bóng chữ với text-shadow trong CSS

Thuộc tính text-shadow để tạo bóng đổ của chữ. Nó chấp nhận một danh sách các bóng đổ cùng cáp dụng vào văn bản của phẩn tử.

Mỗi hiệu ứng bóng đổ shadow được tạo ra bởi hai (hoặc ba) giá trị chiều dài và một giá trị tuỳ chọn màu sắc (nếu thiếu tham số này thì là màu đen). Cụ thể xem cú pháp sau để tạo một shadow - bóng đổ:

.test-text-shadow {
    text-shadow: x y br color;
}

Trong đó:

• x giá trị chiều dài đầu tiên, là khoảng cách theo chiều ngang (bóng chữ dịch ngang)
• y giá trị chiều dài thứ hai, là khoảng cách theo chiều đứng
• br bán kính mờ (tô mờ đường biên), tham số này tuỳ chọn, nếu thiếu thì bán kính mờ bằng 0, nút chữ bóng mờ sắc nét nhất.

Đổ bóng chữ bằng cách sử dụng thuộc tính text-shadow, thuộc tính này thiết lập cùng lúc một số giá trị. Đầu tiên là khoảng bóng đổ theo x, tiếp theo khoảng bóng đổ theo hướng y, tham số thứ 3 là bán kính bóng mờ, cuối cùng là màu bóng đổ.

Ví dụ bóng đổ - text-shadow

Ví dụ:

 <style>
    h2.firstshadow {
        color: #333;
        font-size: 30pt;
        text-shadow: 5px 2px 4px grey;
        font-weight: bold;
    }
</style>

<h2 class="firstshadow">VÍ DỤ ĐỔ BÓNG CHỮ</h2>

VÍ DỤ ĐỔ BÓNG CHỮ

Với ví dụ trên phần tô bóng chữ là text-shadow: 5px 2px 4px grey; để tạo nhiều bóng tô cho chữ bạn có thể định nghĩa nhiều lần bóng cách nhau bởi dấu phảy ,

text-shadow: 5px 2px 4px grey, 10px -20px 4px green;

Hiệu ứng bóng mở blur

Khi làm việc về bóng đổ, bạn có thể dụng các màu mà CSS hỗ trợ để tạo màu bóng, cũng như khoảng bóng theo x, y sử dụng các đơn vị như px, cm, mm, pt ...

Ví dụ sau tạo móng đổ phía trên chữ 2 pixel và đổ về trái 1px với bán kính bóng là 0.5em

<style>
    p.blur {
        font-size: 40px;
        text-shadow: rgba(0,0,255,1) -1px -2px 0.5em;
    }
</style>
<p class="blur">Ví dụ hiệu ứng đổ bóng</p>

Ví dụ hiệu ứng đổ bóng