CSS3: linear-gradient thẳng góc

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

Gradient trong CSS3 sẽ cho phép bạn hiển thị quá trình chuyển đổi giữa hai hoặc nhiều màu sắc khác nhau một cách mượt mà.

Trước đây để làm được điều này bạn phải sử dụng ảnh, tuy nhiên điều này sẽ tốn thời gian download cũng như tốn băng thông và độ mượt màu sắc không cao. Giờ đây bạn sẽ có thêm công cụ là gradient trong CSS3 và bạn sẽ thấy được khả năng của nó sau khi tìm hiểu xong phần kiến thức về Linear GradientRadial Gradient.

Trình duyệt hỗ trợ

Hàm

Trình duyệt hỗ trợ

linear-gradient()

IE10+

FF16+

Chrome26+

Safari5.2+

Opera12.1+

radial-gradient()

IE10+

FF16+

Chrome26+

Safari5.2+

Opera12.1+

repeating-linear-gradient()

IE10+

FF16+

Chrome26+

Safari5.2+

Opera12.1+

repeating-radial-gradient()

IE10+

FF16+

Chrome26+

Safari5.2+

Opera12.1+

Để tạo linear gradient bạn cần chọn hướng và sử dụng ít nhất hai màu, nếu bạn không chọn hướng cho gradient thì hướng mặc định là hướng xuống dưới.

Cú pháp tổng quát của linear gradient

background: linear-gradient(hướngmàu1màu2, ..., màun);

, trong đó có 4 hướng thẳng góc là trên-dưới (đây là hướng mặc định), dưới-trên, trái-phải và phải-trái.

Linear Gradient theo hướng trên-dưới

Đây là hướng mặc định của linear gradient, vì vậy cú pháp sẽ là:

background: linear-gradient(màu1màu2, ..., màun);

Hoặc:

background: linear-gradient(to bottom, màu1màu2, ..., màun);

Ví dụ dưới đây sẽ tạo linear gradient theo hướng xuống dưới, trong đó màu bắt đầu là màu 'red', màu kết thúc là màu 'blue':

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#grad1{

height:200px;

background: -webkit-linear-gradient(red, blue); /* Safari */

background: -o-linear-gradient(red, blue); /* Opera */

background: -moz-linear-gradient(red, blue); /* Firefox */

background: linear-gradient(red, blue); /* hoặc: background: linear-gradient(to bottom, red, blue); */

}

</style>

</head>

<body>

<p>Linear Gradient theo hướng xuống dưới, bắt đầu là màu 'red', kết thúc là màu 'blue'</p>

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

</body>

</html>

Linear Gradient theo hướng dưới-trên (lên trên)

Cú pháp:

background: linear-gradient(to top, màu1màu2, ..., màun);

Ví dụ 2:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#grad1{

height:200px;

background: linear-gradient(to top, red, blue);

}

</style>

</head>

<body>

<p>Linear Gradient theo hướng lên trên, bắt đầu là màu 'red', kết thúc là màu 'blue'</p>

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

</body>

</html>

Linear Gradient theo hướng trái-phải

Cú pháp:

background: linear-gradient(to right, màu1màu2, ..., màun);

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#grad1{

height:200px;

background: linear-gradient(to right, red, blue);

}

</style>

</head>

<body>

<p>Linear Gradient theo hướng sang phải, bắt đầu là màu 'red', kết thúc là màu 'blue'</p>

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

</body>

</html>

Linear Gradient theo hướng phải-trái (hướng sang trái)

Cú pháp:

background: linear-gradient(to left, màu1màu2, ..., màun);

Ví dụ:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#grad1{

height:200px;

background: linear-gradient(to left, red, blue);

}

</style>

</head>

<body>

<p>Linear Gradient theo hướng sang trái, bắt đầu là màu 'red', kết thúc là màu 'blue'</p>

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

</body>

</html>

» Tiếp: linear-gradient chéo góc
« Trước: Sửa kích thước ảnh nền
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 !!!