Giới thiệu về RGBA colors trong CSS3

Giới thiệu về RGBA colors trong CSS3

RGBA colors là kỹ thuật tô màu mới có trong CSS3, thay vì tô màu cách thông thường trong CSS thì hôm nay sẽ tìm hiểu thêm cách tô màu mới, giúp người design có nhiều sự lựa chọn hơn cho mình.

Tô màu RGBA colors trong CSS3

Đây là một tính năng mới, mình cũng chưa sử dụng quen nữa :) chia sẻ cho mọi người cung nghiên cứu, kiểu tô màu này cho phép chúng ta thêm vào sau đó các giá trị người ta gọi đó là opacity value điều này sẽ qui định màu sắc ở mức độ nào.

Cấu trúc RGBA colors

Bạn có từ khóa: rgba (4 đối số); ví dụ ta có khai báo sau:

1
2
3
4
5
6
7
<!--
     <div style="background: rgba(100, 0, 0, 0.2);width:50px; height:100px; float:left;"></div>
     <div style="background: rgba(100, 0, 0, 0.4);width:50px; height:100px; float:left;"></div>
     <div style="background: rgba(100, 0, 0, 0.6);width:50px; height:100px; float:left;"></div>
     <div style="background: rgba(100, 0, 0, 0.8);width:50px; height:100px; float:left;"></div>
     <div style="background: rgba(100, 0, 0, 1);width:50px; height:100px; float:left;"></div>
-->

Điều này cho chúng ta kết quả sau:

Tô màu RGBA colors trong CSS3

Tô màu RGBA colors trong CSS3

Một cách tô màu dạng khác của nó bằng cách bạn bỏ a đi trong rgba đồng thời trong ngoặc còn lại 3 đối số.

Ví dụ:

1
2
3
4
5
6
7
<!--
    <div style="background: rgb(75, 191, 189); width:50px; height:100px; float:left;"></div>
    <div style="background: rgb(75, 143, 142); width:50px; height:100px; float:left;"></div>
    <div style="background: rgb(75, 95 , 94) ; width:50px; height:100px; float:left;"></div>
    <div style="background: rgb(75, 47, 47)  ; width:50px; height:100px; float:left;"></div>
    <div style="background: rgb(75, 0, 0)    ; width:50px; height:100px; float:left;"></div>
-->

Kết quả của cách tô màu rgb trên là:

Giới thiệu về RGBA colors trong CSS3

Tô màu RGB colors trong CSS3

Kết luận: Vậy là mình đã giới thiệu qua cách tô màu này, các bạn thay đổi các tham số trong đó để trải nghiệm cách tô màu mới trong CSS này, chúc thành công!

Bạn thấy bài viết này như thế nào?: 
No votes yet

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Xôn xao thông tin dịch vụ của Baidu tại Việt Nam tự ý can thiệp vào máy tính của người dùng
Xôn xao thông tin dịch vụ của Baidu tại Việt Nam tự ý can thiệp vào máy tính của người dùng

Do chưa được cấp phép, phải sau 2 tuần nữa, người dùng Việt Nam mới có thể sử dụng những tính năng mới của mạng xã hội “Baidu Trà đá quán”. Trong khi đó, theo phản ánh của nhiều bạn đọc, sau khi truy cập vào một số website của “gã khổng lồ” Baidu đang hoạt động tại Việt Nam, máy tính của họ đã gặp phải những hiện tượng lạ.

Hacker thường dùng 4 phương pháp để hack Wi-Fi
Hacker thường dùng 4 phương pháp để hack Wi-Fi

Khái niệm “hack Wi-Fi” từ lâu đã trở nên quen thuộc đối với giới hacker cũng như những người có ý đồ “xài chùa” mạng của những nhà bên cạnh.

Chạy Android trên Netbook hoặc Desktop
Chạy Android trên Netbook hoặc Desktop

Android đang là hệ điều hành số một trên các thiết bị di động. Là một người yêu công nghệ chắc hẳn bạn cũng muốn dùng thử qua hệ điều hành này.