TOP 5 mã màu trong suốt trong CSS

TOP 5 mã màu trong suốt trong CSS

Mục lục

Các bạn có biết, một trong những điều quan trọng nhất trong thiết kế đó chính là mã màu.  Do đó, mã màu trong suốt trong CSS là một trong những yếu tố chúng ta cần và nắm được để thuận tiện khi thiết kế. Trong bài viết hôm nay, chúng tôi sẽ tổng hợp cho các bạn những mã màu trong suốt đỉnh cao mới nhất năm 2021.

RGBA Colors

Top mã màu trong suốt đầu tiên chúng tôi muốn bật mí đến các bạn đó chính là mã màu RGBA Colors. Nó được sử dụng theo công thức sau: 

rgb ( đỏ, lục , lam )

Mỗi tham số (đỏ, lục và lam) xác định cường độ của màu từ 0 đến 255.

Ví dụ: rgb (255, 0, 0) được hiển thị là màu đỏ, vì màu đỏ được đặt thành giá trị cao nhất (255) và các giá trị khác được đặt thành 0.

Để hiển thị màu đen, hãy đặt tất cả các thông số màu thành 0, như sau: rgb (0, 0, 0).

Để hiển thị màu trắng, hãy đặt tất cả các thông số màu thành 255, như sau: rgb (255, 255, 255).

 Đặc biệt hơn nữa, giá trị màu RGBA là phần mở rộng của các giá trị màu RGB với kênh alpha - chỉ định độ mờ cho một màu.

Giá trị màu RGBA được chỉ định bằng:

rgba ( đỏ, lục , lam, alpha )

Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (không trong suốt chút nào).

mã màu trong suốt

Mã màu RGBA

HSL Colors

Đây là mã màu trong suốt tiếp theo bạn cần nắm. Giá trị màu HSL được hỗ trợ trong IE9 +, Firefox, Chrome, Safari và trong Opera 10+. HSL là viết tắt của màu sắc, độ bão hòa và độ sáng. Hue là một độ trên thang màu màu từ 0 đến 360. 0 là đỏ, 120 là xanh lục, 240 là xanh lam.

HSL giá trị màu được chỉ định với: .hsl(hue, saturation, lightness)

- Độ bão hòa là giá trị phần trăm, 0% có nghĩa là màu xám và 100% là màu đầy đủ.

- Độ sáng cũng là một giá trị phần trăm, 0% là màu đen và 100% là màu trắng.

- Bão hòa: Độ bão hòa có thể được mô tả là cường độ của màu. Ví dụ, 100% là màu tinh khiết, không có sắc thái xám.  50% là 50% là màu xám, nhưng bạn vẫn có thể nhìn thấy màu sắc. 0% là hoàn toàn xám, bạn không còn nhìn thấy màu sắc nào khác.

mã màu trong suốt

Minh họa mã màu HSL

HSLA Colors

HSLA cũng là một mã màu trong suốt đình đám được sử dụng năm 2020.Giá trị màu HSLA là phần mở rộng của các giá trị màu HSL với kênh Alpha - chỉ định độ mờ cho một màu.

Giá trị màu HSLA được chỉ định với:

hsla ( màu sắc, độ bão hòa , độ đậm nhạt , alpha )

Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (không trong suốt chút nào).

Opacity

Khi sử dụng thuộc Opacity tính để thêm độ trong suốt vào nền của một phần tử, tất cả các phần tử con của nó cũng trở nên trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc. Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, hãy sử dụng các giá trị màu RGBA để thay thế.

HEX Colors

Đây là một mã màu trong suốt được rất nhiều người lựa chọn không chỉ trong CSS mà chúng ta có thể bắt gặp nó ở bất cứ công cụ chỉnh sửa ảnh nào như Photoshop. Bộ màu Color-hex cung cấp thông tin về màu sắc bao gồm các màu (RGB, HSL, HSV và CMYK). Màu bộ ba, màu đơn sắc và màu tương tự được tính toán trong trang màu.

Cấu trúc của nó tương tự như sau: #xxxxxx. Trong đó dấu # là khai báo loại mã màu HEX và xxxxxx là các trị giá đủ sức chữ cái hoặc chữ số.

Cách xác định giá trị của một màu sắc thông qua Chrome

Nếu bạn đang lướt web bằng máy tính, bạn thấy một phần từ nào đó có màu sắc rất đẹp và bạn muốn lấy giá trị màu đó của nó  để sử dụng thì ngay sau đây, UNICA sẽ hướng dẫn bạn cách lấy mã màu trong suốt đó:

- Đầu tiên, bạn ấn F12 hoặc tổ hợp phím Ctrl Shift C tại trang web chứa màu sắc mình muốn xác nhận, trên menu chính chọn tab Elements, sau đó chọn tab Styles.

HSLA Colors HSLA cũng là một mã màu trong suốt đình đám được sử dụng năm 2020.Giá trị màu HSLA là phần mở rộng của các giá trị màu HSL với kênh Alpha - chỉ định độ mờ cho một màu.  Giá trị màu HSLA được chỉ định với:  hsla ( màu sắc, độ bão hòa , độ đậm nhạt , alpha )  Tham số alpha là một số từ 0,0 (hoàn toàn trong suốt) đến 1,0 (không trong suốt chút nào).

Lựa chọn tab Elements

- Nhìn cụm bên phải, bạn sẽ thấy có một số định dạng. Di chuyển con trỏ vào góc phía bên phải dưới định dạng bất kỳ thì sẽ thấy nó tiếp tục hiện ra tùy chọn. Chọn Add Color và nhấp chuột trái vào bất kỳ một vị trí nào trên Web thì giá trị của màu sắc nằm tại vị trí bạn muốn biết sẽ hiển thị bên trong khung.

mã màu trong suốt

Di chuyển con chuột đến vùng khoanh tròn

Như vậy chúng tôi đã bật mí đến các bạn mã màu trong suốt trong css cũng như cách lấy mã màu bất kỳ trên web.

mã màu trong suốt

Màu sắc đã lấy được trên web

Ngoài ra, để trình độ CSS của bạn được nâng cao và phát triển tốt hơn, chúng tôi muốn giới thiệu đến các bạn khóa học “Học lập trình Web - CSS3 cơ bản và nâng cao” của giảng viên Đặng Văn Lel trên UNICA.

Khóa học “Học lập trình Web - CSS3 cơ bản và nâng cao”

Khóa học “Học lập trình Web - CSS3 cơ bản và nâng cao” cung cấp cho bạn những kiến thức cần thiết về CSS3 để trở thành một lập trình viên. Hoàn thành khóa học bạn sẽ có kiến thức cơ bản cần trang bị trước khi tiếp cận với các công nghệ, nền tảng lập trình Web hiện đại như ASP.NET, PHP…

>>> CLICK tham khảo ngay <<<

UNICA đã giới thiệu đến các bạn top những mã màu trong suốt css nổi bật được sử dụng nhiều nhất trong năm 2021. Nếu bạn có ý định dùng màu background trong suốt thì nên sử dụng định hướng chúng tôi bật mí là RGBA VÀ HSLA. Hy vọng bài viết này có ích cho các bạn.

>> Các mẫu Design Pattern thông dụng mà dân DEV cần biết

>> Lightworks là gì? Cách sử dụng Lightworks đơn giản

Đánh giá :

Tags: Lập trình