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

PVS

Generalissimo
Thành viên BQT
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ụ:
Mã:
<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>

screenshot_1591152135.png

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 ,
Mã:
text-shadow: 5px 2px 4px grey, 10px -20px 4px green;

screenshot_1591152178.png

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
Mã:
<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>

screenshot_1591152227.png

Đổ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ữ
Mã:
<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>

screenshot_1591152265.png

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


Nguồn: Internet​
 

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top