Tìm hiểu thuộc tính text-shadow và text-transform trong CSS

[PVS]

Tìm hiểu thuộc tính text-shadow và text-transform trong CSS

Bài viết này sẽ nêu rõ chức năng cụ thể của 2 thuộc tính text-shadow và text-transform. Thuộc tính text-shadow để tạo ra các bóng đổ cho chữ, thuộc tính text-transform để chuyển thành chữ in hoa in thường.

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

Đổ 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 hướng 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ụ:

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

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

​

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 bó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>

​

Đổi chữ hoa chữ thường với text-transform

Biến đổi chữ với text-transform, nó nhận các giá trị

• capitalize chữ in hoa đầu mỗi từ
• none thiết lập không hiệu ứng
• uppercase in hoa các chữ
• lowercase in thường các chữ

<style>
    p.capitalize {
        text-transform: capitalize;
    }
    p.uppercase {
        text-transform: uppercase;
    }
    p.lowercase {
        text-transform: lowercase;
    }
</style>


<p class="capitalize">
    Đây là ví dụ về hiệu ứng của thuộc tính chuyển đổi chữ
</p>
<p class="uppercase">
    Đây là ví dụ về hiệu ứng của thuộc tính chuyển đổi chữ
</p>
<p class="lowercase">
    Đây là ví dụ về hiệu ứng của thuộc tính chuyển đổi chữ
</p>

​

Chúc các bạn thành công.

Nguồn: Internet​