Hôm nay mình sẽ giới thiệu cho mọi người về kĩ thuật tô màu RGBA trong CSS3 dành cho các desginer và cách dùng dễ dàng nhất cho những ai chưa biết.
KHÁI NIỆM VỀ RGBA COLORS
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. 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
rgba(giá trị 1, giá trị 2, giá trị 3, giá trị 4);
- Trong đó giá trị 1,2,3: giá trị số nguyên, nằm trong khoảng từ 0-255, quy định màu trong RGBA.
- giá trị 4: giá trị số thập phân, là độ mờ hay còn gọi là opacity value. có giá trị từ 0-1.
VÍ DỤ
Khi cho giá trị như bên dưới:
rgba(4,147,114,0.9);
thì sẽ được màu như hình.
CÁCH SỬ DỤNG
Bước 1: Vào Photoshop, mở hình ảnh mà mình cần lấy mã màu lên.
Bước 2 : mở set foreground color giống hình khoanh tròn ở hình ảnh minh họa phía bên dưới để mở công cụ Color Picker.
Bước 3 : Chỉ con chuột vào vùng chọn muốn xem mã ảnh, lấy các giá trị R, G, B và thay lần lượt cho các giá trị 1,2,3 như cấu trúc đã đề ở trên. Còn về độ mờ thì bạn tự cho, tầm 0.6 tới 0.9 là ổn.
LỜI KẾT
Trên mình đã giới thiệu về kĩ thuật tô màu RGBA COLORS trong CSS3 và cách để dùng nó một cách dễ dàng nhất. Có thắc mắc hay góp ý gì cứ để lại bình luận bên dưới nha.
0 Comments