Thứ Năm, 24 tháng 12, 2015

CSS3 5

12/24/2015 07:44:00 SA    No comments
Untitled Document

Bài 05: Học CSS3 - Định dạng màu sắc
 0 
 Google +0 

  0
Đăng bởi: TheHalfHeart - Vào ngày: 24-10-2015 - Chuyên mục: CSS - View: 189
CSS3 hỗ trợ nhận diện color bằng tên màu, mã hexadecimal và mã RGB. 
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.
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);
Vi dụ: XEM DEMO


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#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ụ: XEM DEMO


1
2
3
4
5
6

#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ụ: XEM DEMO


1
2
3
4
5
6

#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ụ: XEM DEMO


1
2
3
4
5
6

#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.

0 nhận xét:

Đăng nhận xét