CSS3 gradient cho phép bạn hiện thị biến đổi liên tục giữa hai hoặc nhiều màu. CSS3 có hai kiểu chuyển đổi màu Linear và Radial
Tạo ra linear gradient bạn phải định nghĩa tối thiểu điểm dừng màu. Điểm dừng màu là màu nằm giữa khoảng màu cần biến đổi liên tục. Bạn cũng cần thiết lập một điểm bắt đầu và hướng hoặc góc qua đó màu biến đổi.
Ví dụ sau, màu xanh và trắng tạo ra gradient biến đổi từ trên xuống dưới.
.exam1 {
width: 300px;
height: 100px;
margin: 4px;
color: #FFF;
background: linear-gradient[DeepSkyBlue, Black];
}
Ví dụ gradient
Ví dụ gradient
Có thể thêm nhiều điểm
màu, mỗi màu cách nhau bởi dấu phảy ,
Ví dụ: background: linear-gradient[blue, yellow, green, pink, white];
Ví dụ gradient blue, yellow, green, pink, white
Các điểm dừng màu có thể chỉ ra không đều cho từng màu khoảng cách tính từ gốc của hướng [theo phần trăm, px, em]
Ví dụ: background:linear-gradient[blue 20%, yellow 30%, green 85%];
Ví dụ gradient blue 50%, yellow 75%, green 100%
Hướng Linear gradient
Để
chỉ ra hướng bạn cần chỉ ra điểm bắt đầu của gradient với các giá trị: left right top bottom
Ví dụ tô từ trái qua phải background: linear-gradient[left, blue, green, white];
Chrome: background: linear-gradient[left, blue, green, white];
Ví dụ gradient left
Ví dụ tô từ dưới lên background: linear-gradient[bottom, blue, green, white];
Chrome: background: linear-gradient[bottom, blue, green, white];
Ví dụ gradient bottom
left, right, top, bottom dùng để xác định hướng gradient. Bạn có thể kết hợp vài hướng trong một ví dụ [bottom right biến đổi từ dưới lên đồng thời từ phải sang trái]
Góc xác định hướng gradient
Ví dụ dùng left, right, top, bottom kết hợp để tạo ra các hướng như bottom left tương đương 45 độ
Ví dụ tô từ dưới lên background: linear-gradient[bottom left, blue, green, white];
Chrome: background: linear-gradient[bottom left, blue, green, white];
Ví dụ gradient bottom left
Ngoài ra có thể chỉ thắng ra góc chuyển đổi ví dụ 100 độ: background:linear-gradient[100deg, blue, green, white];
Ví dụ gradient 100deg
repeating-linear-gradient
Tạo ra các gradient lặp lại bằng hàm: repeating-linear-gradient[]
Ví dụ: background:-moz-repeating-linear-gradient[blue, green 20px];
Ví dụ gradient 100deg
Linear Gradient
linear-gradient [gradient tuyến tính] là loại gradient phổ biến nhất mà chúng ta thấy trong thiết kế web là . Nó được gọi là "tuyến tính" vì flow của màu sắc sẽ từ trái sang phải, từ trên xuống dưới hoặc ở bất kỳ góc nào tùy thuộc vào hướng mà mình chọn.
Syntax
linear-gradient[] sẽ tạo nên các dải màu nên thường sẽ được sử dụng trong thuộc tính background [hay cụ thể hơn là background-image] trong CSS.
linear-gradient[
[ | to ]? ,
]
= [left | right] || [top | bottom]
Một cách để nhớ và hình dung được cách hoạt động của phương thức này
Create a background image that is a linear gradient that moves [to this direction or at this angle] and starts with [one color] and ends with [another color].
Usage
Mọi người có thể thấy mình không định nghĩa phần [ | to ] nên mặc định CSS sẽ hiểu là trải dải màu từ trên xuống to bottom với màu ban đầu là màu đỏ [red] sau đó chuyển đổi dần sang màu cam
[orange]. Ngoài cách định nghĩa cơ bản như trên còn có 1 số cách khác cho phép mình kiểm soát chiều cũng như tạo nhiều dải màu khác nhau cho màu nền đa dạng hơn.
/* A gradient tilted 45 degrees,
starting blue and finishing red */
linear-gradient[45deg, blue, red];
/* A gradient going from the bottom right to the top left corner,
starting blue and finishing red */
linear-gradient[to left top, blue, red];
/* Color stop: A gradient going from the bottom to top,
starting blue, turning green at 40% of its length,
and finishing red */
linear-gradient[0deg, blue, green 40%, red];
/* Color hint: A gradient going from the left to right,
starting red, getting to the midpoint color
10% of the way across the length of the gradient,
taking the rest of the 90% of the length to change to blue */
linear-gradient[.25turn, red, 10%, blue];
/* Multi-position color stop: A gradient tilted 45 degrees,
with a red bottom-left half and a blue top-right half,
with a hard line where the gradient changes from red to blue */
linear-gradient[45deg, red 0 50%, blue 50% 100%];
/* Multi-color: A gradient going from left to right,
starting red, change to orange, to yellow, then finally to green */
linear-gradient[to right, red, #f06d06, rgb[255, 255, 0], green];
Radial Gradient
Radial gradient [gradient xuyên tâm] khác với linear gradient ở chỗ nó bắt đầu tại một điểm duy nhất và phát rộng ra bên ngoài. Các lớp thường được sử dụng để mô phỏng một nguồn sáng. Điều đó làm cho chúng hữu ích để làm cho sự chuyển giao giữa các màu được tự nhiên hơn.
Mặc định màu đầu tiên bắt đầu ở vị trí trung tâm của phần tử và sau đó mờ dần sang màu kết thúc về hướng về phía rìa của phần tử. Sự mờ dần xảy ra ở một tỷ lệ bằng nhau bất kể phương hướng.
Syntax
Tương tự như linear-gradient, radial-gradient cũng được sử dụng trong thuộc tính background [hay cụ thể
hơn là background-image]
radial-gradient[
[ [ || ] [ at ]? , |
at ,
]?
[ , ]+
]
Cho dễ gợi nhớ
Paint a radial gradient in [some shape] at [some size] that is located in [these positions]. Oh, and make sure it starts with this [color] and stops at this [color].
Usage
background-image: radial-gradient[yellow, #f06d06];
Bằng việc
không khai báo các giá trị shape, size, position hoặc color-stop, tất cả đều mặc định cho các giá trị đặt gradient ở chính giữa của phần tử và chuyển đổi đồng đều giữa các giá trị màu được khai báo.
Ngoài ra có thể thay vị trí điểm trung tâm
background-image: radial-gradient[circle at top right, yellow, #f06d06];
Conic Gradient
Conic gradient [gradient hình nón] tương tự như một radial gradient. Cả hai đều là hình tròn và sử dụng tâm của phần tử làm điểm nguồn cho các điểm màu. Tuy nhiên, khác với cái dải màu của radial gradient xuất phát từ tâm vòng tròn, conic gradient sắp xếp dải màu xung quanh vòng tròn. Gọi là "hình nón" vì nhìn từ trên cao xuống xu hướng trông giống hình dạng của một chiếc nón.
Syntax
conic-gradient[
[ from ]? [ at ]?,
]
Make a conic-gradient that is located at [some point] that starts with [one color] at some angle and ends with [another color] at [some angle]
background-image: conic-gradient[#fff, #000];
Vị trí của gradient bắt đầu ở chính giữa của phần tử [50% 50%] và được phân bố đồng đều giữa các giá trị màu trắng và đen.
Lợi dụng sự đơn giản này để tạo color palette trong các tool color picker
background: conic-gradient[red, yellow, lime, aqua, blue, magenta, red];
Hay tạo 1 cái pie chart chỉ với 1 dòng css
References
//css-tricks.com/snippets/css/css-linear-gradient/
//developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
//css-tricks.com/snippets/css/css-radial-gradient/
//developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient
//css-tricks.com/snippets/css/css-conic-gradient/
//developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient