Mục lục

sẻ chia

những bạn có biết, một trong những điều quan trọng nhất trong thiết kế đó đúng 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 những 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 thứ nhất chúng tôi muốn bật mí đến những bạn đó đúng là mã màu RGBA Colors. Nó được sử dụng theo công thức sau: 

rgb ( đỏ, lục , lam )

Mỗi thông 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à red color, vì red color được đặt thành giá trị cao nhất (255) và những giá trị khác được đặt thành 0.

Để hiển thị màu đen, hãy đặt toàn bộ những thông số màu thành 0, như sau: rgb (0, 0, 0).

Để hiển thị white color, hãy đặt toàn bộ những 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 những 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 )

thông 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ó tức 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à white color.

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

thông 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ử, toàn bộ những phần tử con của nó cũng trở thành trong suốt. Điều này rất 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 những phần tử con, hãy sử dụng những 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ỉ là trong CSS mà chúng ta cũng rất có thể bắt gặp nó ở bất kỳ công cụ chỉnh sửa ảnh nào như Photoshop. Bộ màu Color-hex cung ứng thông tin về màu sắc gồm có những màu (RGB, HSL, HSV và CMYK). Màu bộ ba, màu đơn sắc và màu giống như được tính toán trong trang màu.

Cấu trúc của nó giống như như sau: #xxxxxx. Trong số đó dấu # là khai báo loại mã màu HEX và xxxxxx là những 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 trải 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 tiếp về sau, UNICA sẽ hướng dẫn bạn cách lấy mã màu trong suốt đó:

– thứ nhất, bạn ấn F12 hoặc tổ hợp phím Ctrl Shift C tại website chứa màu sắc mình thích 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, những 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 những 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 những 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 ứng cho bạn những kỹ năng và kiến thức thiết yếu về CSS3 để trở thành một lập trình viên. Hoàn thành khóa học những bạn sẽ có kỹ năng và kiến thức cơ bản cần trang bị trước khi tiếp cận với những công nghệ, nền tảng lập trình Web hiện đại như ASP.NET, PHP…

>>> CLICK xem thêm ngay

UNICA đã giới thiệu đến những bạn top những mã màu trong suốt css nổi trội đượ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 những bạn.

>> những mẫu Design Pattern thông dụng mà dân DEV nên biết

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

Đánh giá :

Tags:
Lập trình

Có thể bạn quan tâm:

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *