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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
14,495
Được Like
10,735
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​
 

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

XenForo 1 XenForo 2
Translate by PVS


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 Bottom