Lập trình WordPress Hosting Thủ thuật Tin học Môn học
CĂN BẢN
CSS là gì? CSS Cú pháp CSS Selector CSS background CSS Colors CSS Fonts CSS Text CSS Links CSS Borders CSS Float CSS Display CSS Margin/Padding CSS Position CSS Menu dọc CSS Position Fixed CSS z-index CSS ClearFix CSS After/Before CSS Combinators CSS Lists CSS Overflow CSS Pseudo-classes CSS Pseudo-elements CSS Units CSS Nagivation CSS Specificity CSS Tables CSS Align
CSS3
CSS Border Radius - Image Margin collapsing trong CSS CSS3 Animation CSS3 Object-fit CSS3 Emphasis Marks CSS3 là gì? CSS3 Border Radius CSS3 Border Image CSS3 Backgrounds CSS3 Color CSS3 Gradient Background CSS3 Text/Box Shadow CSS3 Text Format CSs3 @fonf-face CSS3 2D Transforms Tạo thanh loading ngang Tạo thanh loading xoay Tạo menu mờ Tạo hiệu ứng khói Tạo thanh tìm kiếm co dãn Tạo hiệu ứng trò chơi pacman Tạo đồng hồ treo tường Tạo hiệu ứng mưa Tạo hiệu ứng bóng đổ Tạo hiệu ứng mặt trời mọc
CSS RESPONSIVE
Bài 01: CSS Responsive Web Design là gì? Bài 02: Sử dụng @Media CSS tạo Responsive cho Website Bài 03: Sử dụng Javascript tạo Responsive cho Website Bài 04: Video học làm Responsive CSS căn bản Bài 05: Cách viết Responsive với SASS CSS
CSS PARALLAX
Parallax - Hiệu ứng Parallax là gì? Parallax - Tạo chuỗi ảnh nền Parallax - Tạo thanh menu dọc Parallax - Tạo hiệu ứng cuộn Parallax - Hiệu ứng Parallax scrolling Parallax - Tạo hiệu ứng cho văn bản Parallax - Chèn nhạc nền Parallax - Tạo trang đầu và cuối Parallax - Hoàn thiện bố cục
CÁC CHỦ ĐỀ
Học HTML
Học CSS
How to
BÀI MỚI NHẤT
cac ham xu ly chuoi trong javascript gif Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) bai tap javascript jpg Chia lấy phần dư / chia lấy phần nguyên trong javascript bien va khai bao bien trong javascript gif Các cách khai báo biến trong Javascript su kien event trong javascript gif Các sự kiện (Event) trong Javascript huong tao thanh search bar bang css png Hướng tạo thanh search bar bằng CSS js function jpg Hàm array.slice() trong Javascript bai tap javascript jpg Cách kiểm tra số nguyên dương trong javascript javascript can ban gif Tính tổng hai số bằng Javascript (cộng hai số)
MỚI CẬP NHẬT
codeigniter gif Cách khai báo biến trong PHP, các loại biến thường gặp cai dat vertrigo server gif Download và cài đặt Vertrigo Server hoc html gif Thẻ li trong HTML hoc html gif Thẻ nav trong HTML5 tim hieu doi tuong article trong html5 gif Thẻ article trong HTML5 tao template html5 dau tien gif Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên dung the img trong html de tao hinh anh gif Cách dùng thẻ img trong HTML và các thuộc tính của img dung the a trong html de tao links gif Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng
Home > HTML & CSS > Học CSS > Học CSS3 - Định dạng màu sắc

Học CSS3 - Định dạng màu sắc

CSS3 hỗ trợ nhận diện color bằng tên màu, mã hexadecimal và mã RGB.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Trong bài này chúng ta sẽ tìm hiểu một số định dạng mã màu thường sử dụng như RGBA colors, HSL colors, HSLA colors, Name colors và đặc biệt hơn là tìm hiểu thuộc tính opacity.

Các thuộc tính và mã màu đều được hỗ trợ ở hầu hết các trình duyệt hiện đại hiện nay.

1. RGBA Colors

RGBA color là một phần mở rộng của RGB color với thành phần bổ sung là chỉ số opacity. Cú pháp của loại màu này là rgba(reg, green, blue, alpha) trong đó alpha có giá trị từ [0->1], giá trị càng gần về 0 thì màu sắc càng mờ và giá trị 1 là màu đậm nhất.

Bài viết này được đăng tại [free tuts .net]

Ví dụ: Màu đỏ có độ alpha tăng dần

rgba(255, 0, 0, 0.1);
rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.3);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.5);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.7);
rgba(255, 0, 0, 0.8);
rgba(255, 0, 0, 0.9);
rgba(255, 0, 0, 1.0);

Ví dụ RUN 
#red{
    background-color: rgba(255,0,0,1);
}
#green{
    background-color: rgba(0,255,0,1);
}
#blue{
    background-color: rgba(0,0,255,1);
}
#gray{
    background-color: rgba(192,192,192,1);
}
#yellow{
    background-color: rgba(255,255,0,1);
}

2. HSL Colors

HSL là chữ viết tắt của Hue, Saturation và Lightness, ký hiệu của nó là hsl(hue, saturation, lightness).

Trong đó:

  • Hue có giá trị từ 0 tới 360, giá trị 0 hoặc 360 là màu đỏ
  • Saturation có giá trị phần trăm (%) và cao nhất là 100% (full)
  • Lightness cũng có giá trị phần trăm, 0% là màu đen và 100% là màu trắng.

Ví dụ: Mã màu đỏ giảm dần,

hsl(0, 100%, 10%);
hsl(0, 100%, 20%);
hsl(0, 100%, 30%);
hsl(0, 100%, 40%);
hsl(0, 100%, 50%);
hsl(0, 100%, 60%);
hsl(0, 100%, 70%);
hsl(0, 100%, 80%);
hsl(0, 100%, 90%);
hsl(0, 100%, 100%);

Ví dụ RUN 
#green {background-color:hsl(120,100%,50%);}
#light-green {background-color:hsl(120,100%,75%);}
#dark-green {background-color:hsl(120,100%,25%);}
#pastel-green {background-color:hsl(120,60%,70%);}
#violet {background-color:hsl(290,100%,50%);}
#pastel-violet {background-color:hsl(290,60%,70%);}

3. HSLA Colors

HSLA Color là một phần mở rộng của HSL color với thành phần bổ sung là giá trị của alpha (opacity color).

Cú pháp của loại màu này là hsla(hue, saturation, lightness, alpha). Trong đó:

  • Hue có giá trị từ 0 tới 360, giá trị 0 hoặc 360 là màu đỏ
  • Saturation có giá trị phần trăm (%) và cao nhất là 100% (full)
  • Lightness cũng có giá trị phần trăm, 0% là màu đen và 100% là màu trắng.
  • Alpha alpha có giá trị từ [0->1], giá trị càng gần về 0 thì màu sắc càng mờ và giá trị 1 là màu đậm nhất.

Ví dụ:

hsla(0, 100%, 10%, 0.3);
hsla(0, 100%, 20%, 0.3);
hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 40%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 60%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 80%, 0.3);
hsla(0, 100%, 90%, 0.3);
hsla(0, 100%, 100%, 0.3);

Ví dụ RUN 
#green {background-color:hsla(120,100%,50%,0.3);}
#light-green {background-color:hsla(120,100%,75%,0.3);}
#dark-green {background-color:hsla(120,100%,25%,0.3);}
#pastel-green {background-color:hsla(120,60%,70%,0.3);}
#violet {background-color:hsla(290,100%,50%,0.3);}
#pastel-violet {background-color:hsla(290,60%,70%,0.3);}

4. Opacity

Một câu hỏi được đặt ra là trường hợp ta sử dụng mã màu dạng HSL thì làm thế nào để bổ sung giá trị của alpha? Câu trả lời là bạn sẽ sử dụng thuộc tính opacity để làm việc này.

Tuy nhiên nó sẽ có nhược điểm là text cũng sẽ bị mờ theo, vì vậy nếu trường hợp background của bạn có trong suốt thì nên dùng mã HSLA.

Ví dụ:

hsl(0, 100%, 10%); opacity:0.3;
hsl(0, 100%, 20%); opacity:0.3;
hsl(0, 100%, 30%); opacity:0.3;
hsl(0, 100%, 40%); opacity:0.3;
hsl(0, 100%, 50%); opacity:0.3;
hsl(0, 100%, 60%); opacity:0.3;
hsl(0, 100%, 70%); opacity:0.3;
hsl(0, 100%, 80%); opacity:0.3;
hsl(0, 100%, 90%); opacity:0.3;
hsl(0, 100%, 100%); opacity:0.3;

Ví dụ RUN 
#green {background-color:hsl(120,100%,50%); opacity: 0.3}
#light-green {background-color:hsl(120,100%,75%); opacity: 0.3}
#dark-green {background-color:hsl(120,100%,25%); opacity: 0.3}
#pastel-green {background-color:hsl(120,60%,70%); opacity: 0.3}
#violet {background-color:hsl(290,100%,50%); opacity: 0.3}
#pastel-violet {background-color:hsl(290,60%,70%); opacity: 0.3}

5. HEX Colors

Đây là loại mã màu thông dụng nhất không chỉ ở CSS mà trong các công cụ thiết kế như Photoshop cũng sử dụng.

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

Ví dụ điển hình nhất là mã màu trắng là #ffffff và mã màu đen là #000000.

Sau đây là bảng mã màu cho bạn tham khảo:

EEEEEE DDDDDD CCCCCC BBBBBB AAAAAA 999999
888888 777777 666666 555555 444444 333333
222222 111111 000000 FF0000 EE0000 DD0000
CC0000 BB0000 AA0000 990000 880000 770000
660000 550000 440000 330000 220000 110000
FFFFFF FFFFCC FFFF99 FFFF66 FFFF33 FFFF00
CCFFFF CCFFCC CCFF99 CCFF66 CCFF33 CCFF00
99FFFF 99FFCC 99FF99 99FF66 99FF33 99FF00
66FFFF 66FFCC 66FF99 66FF66 66FF33 66FF00
33FFFF 33FFCC 33FF99 33FF66 33FF33 33FF00
00FFFF 00FFCC 00FF99 00FF66 00FF33 00FF00
FFCCFF FFCCCC FFCC99 FFCC66 FFCC33 FFCC00
CCCCFF CCCCCC CCCC99 CCCC66 CCCC33 CCCC00
99CCFF 99CCCC 99CC99 99CC66 99CC33 99CC00
66CCFF 66CCCC 66CC99 66CC66 66CC33 66CC00
33CCFF 33CCCC 33CC99 33CC66 33CC33 33CC00
00CCFF 00CCCC 33CC66 33CC33 00CC99 00CC66
00CC33 00CC00 FF99FF FF99CC FF9999 FF9966
FF9933 FF9900 CC99FF CC99CC CC9999 CC9966
CC9933 CC9900 9999FF 9999CC 999999 999966
999933 999900 6699FF 6699CC 669999 669966
669933 669900 3399FF 3399CC 339999 339966
339933 339900 0099FF 0099CC 009999 009966
009933 009900 FF66FF FF66CC FF6699 FF6666
FF6633 FF6600 CC66FF CC66CC CC6699 CC6666
CC6633 CC6600 9966FF 9966CC 996699 996666
996633 996600 6666FF 6666CC 666699 666666
666633 666600 3366FF 3366CC 336699 336666
336633 336600 0066FF 0066CC 006699 006666
006633 006600 FF33FF FF33CC FF3399 FF3366
FF3333 FF3300 CC33FF CC33CC CC3399 CC3366
CC3333 CC3300 9933FF 9933CC 993399 993366
993333 993300 6633FF 6633CC 663399 663366
663333 663300 3333FF 3333CC 333399 333366
333333 333300 0033FF FF3333 0033CC 003399
003366 003333 003300 FF00FF FF00CC FF0099
FF0066 FF0033 FF0000 CC00FF CC00CC CC0099
CC0066 CC0033 CC0000 9900FF 9900CC 990099
990066 990033 990000 6600FF 6600CC 660099
660066 660033 660000 3300FF 3300CC 330099
330066 330033 330000 0000FF 0000CC 000099
000066 000033 00FF00 00EE00 00DD00 00CC00
00BB00 00AA00 009900 008800 007700 006600
005500 004400 003300 002200 001100 0000FF
0000EE 0000DD 0000CC 0000BB 0000AA 000099
000088 000077 000055 000044 000022 000011

6. Color Name

Đây là cú pháp đơn giản nhất để xác định màu trong CSS. Tuy nhiên không khuyến khích bạn sử dụng bởi vì nó không phải là một dạng chuẩn của color và nó cũng không chứa đầy đủ màu.

Ví dụ:

  • black : màu đen
  • red : màu đỏ
  • pink : màu hồng
  • white : màu trắng
  • yellow : màu vàng

7. Lời kết

Qua bài này mình đã giới thiệu đầy đủ các định dạng màu sắc có thể sử dụng trong CSS nói chung và trong CSS3 nói riêng.

Qua bài này ta cũng rút được kinh nghiệm là nếu sử dụng màu background có trong suốt thì nên sử dụng định dạng màu RGBA hoặc HSLA. Thứ hai nữa là không nên sử dụng màu theo tên tiếng anh bởi vì nó khó quản lý và ko đúng chuẩn.

Bài trước Bài tiếp

Cùng chuyên mục:

Tạo Trang web E-commerce từ HTML & CSS

Tạo Trang web E-commerce từ HTML & CSS

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Giới thiệu

Giới thiệu Liên hệ Chính sách Điều khoản

Thủ thuật

Máy tính Game Điện thoại Ứng dụng

Link hay

Học PHP Học Javascript Học Python Học Java

Liên kết

Tiếng Anh Văn học Toán
Copyright © 2021. Phát triển bởi Freetuts Team.
Top