CSS3: radial-gradient()

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Radial Gradient hay còn gọi là gradient hướng tâm là kỹ thuật tạo các lớp màu sắc theo hình dạng tròn hoặc hình dạng elip.

Để tạo gradient hướng tâm bạn cần sử dụng ít nhất hai màu, sau đó bạn cần xác định tọa tâm gồm hai tọa độ x (hoành độ) và y (tung độ) (nếu bạn không xác định x và y thì mặc định tâm của radial gradient nằm ở chính giữa của hình áp dụng gradient), hình dạng và kích thước của gradient. Có hai hình dạng gradient hướng tâm là gradient dạng tròn (circle) và dạng elip (ellipse), trong đó mặc định gradient hướng tâm có dạng elip và kích thước mặc định là farthest-corner.

Cú pháp của gradient hướng tâm:

background: radial-gradient(x y, hình_dạng kích_thước, màu1, màu2, ..., màun);

Tạo gradient hướng tâm với tỉ lệ các màu sắc đều nhau (mặc định)

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<style>

#rad{

height:200px;

width:300px;

background:radial-gradient(red, green, blue);

}

h1{

color:green;

}

</style>

</head>

<body>

<h1>Radial Gradient</h1>

<div id="rad"></div>

</body>

</html>

Gradient hướng tâm với sự khác nhau về tỷ lệ màu sắc

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<style>

#rad{

height:200px;

width:300px;

background:radial-gradient(red 25%, green 55%, blue 65%);

}

h1{

color:green;

}

</style>

</head>

<body>

<h1>Radial Gradient</h1>

<div id="rad"></div>

</body>

</html>

Thiết lập hình dạng (shape) cho gradient hướng tâm

Hình dạng của gradient hướng tâm được thiết lập qua tham số hình_dạng. Gradient hướng tâm có hai hình dạng là hình tròn và hình elip, trong đó mặc định là hình elip.

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#rad,#rad1{

height:200px;

width:300px;

color:white;

margin-top:10px;

}

#rad{

background: radial-gradient(red, green, blue);

}

#rad1{

background: radial-gradient(circle, red, green, blue);

}

h1{

color:green;

}

</style>

</head>

<body>

<h1>Radial Gradient</h1>

<div id="rad">Hình Elip (mặc định)</div>

<div id="rad1">Hình Tròn</div>

</body>

</html>

Thiết lập kích thước cho gradient hướng tâm

Kích thước của gradient hướng tâm được thiết lập qua tham số kích_thước. Tham số kích_thước có bốn giá trị như sau:

Ø  closest-side

Ø  farthest-side

Ø  closest-corner

Ø  farthest-corner

Lưu ý: Tại thời điểm tôi viết bài này (12/03/2014) các trình duyệt đều chưa hỗ trợ tham số  kích_thước theo cú pháp chuẩn, vì vậy khi áp dụng kích thước cho gradient hướng tâm bạn cần thiết lập các tiền tố tương ứng cho từng loại trình duyệt (-webkit-, -o-, -moz-, -ms-) trước hàm radial-gradient().

Ví dụ 1 dưới đây sẽ cho bạn thấy được ý nghĩa của từng giá trị của tham số kích_thước.

Ví dụ 1:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#grad1,#grad2,#grad3,#grad4{

height:150px;

width:150px;

}

#grad1{

background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

}

#grad2{

background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);

background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);

background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);

background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);

}

#grad3{

background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black);

background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black);

background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black);

background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black);

}

#grad4{

background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black);

background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black);

background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black);

background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black);

}

</style>

</head>

<body>

<p><strong>closest-side:</strong></p>

<div id="grad1"></div>

<p><strong>farthest-side:</strong></p>

<div id="grad2"></div>

<p><strong>closest-corner:</strong></p>

<div id="grad3"></div>

<p><strong>farthest-corner (kích thước mặc định):</strong></p>

<div id="grad4"></div>

</body>

</html>

Ví dụ 2: Ví dụ này sẽ sử dụng tất cả các tham số đối với cú pháp của gradient hướng tâm.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#full{

height:350px;

width:350px;

background: -webkit-radial-gradient(160px 190px, circle closest-side,red,orange,yellow,green,blue,indigo,violet);

background: -o-radial-gradient(60% 55%, circle closest-side,red,orange,yellow,green,blue,indigo,violet);

background: -moz-radial-gradient(60% 55%, circle closest-side,red,orange,yellow,green,blue,indigo,violet);

background: radial-gradient(60% 55%, circle closest-side,red,orange,yellow,green,blue,indigo,violet);

}

h1{

color:green;

}

</style>

</head>

<body>

<h1>Cú pháp đầy đủ của radial gradient</h1>

<div id="full"></div>

</body>

</html>

 

» Tiếp: repeating-radial-gradient()
« Trước: repeating-linear-gradient()
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!