Liên hệ
css

Đổ bóng text-shadow và chuyển chữ text-transform CSS

Sử dụng thuộc tính text-shadow để tạo ra các bóng đổ cho chữ bằng CSS, 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 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Í 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;

VÍ DỤ ĐỔ BÓNG CHỮ

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

Đổ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>

Đây là ví dụ về hiệu ứng của thuộc tính chuyển đổi chữ

Đây là ví dụ về hiệu ứng của thuộc tính chuyển đổi chữ

Đây là ví dụ về hiệu ứng của thuộc tính chuyển đổi chữ

Vui lòng đăng ký ủng hộ kênh