Gradient [độ dốc] là khái niệm rất gần với khái niệm đạo hàm mà chúng ta đã học thời cấp 3, nó biểu diễn cho tốc độ thay đổi của hàm. Gradient là một vectơ trong khi đạo hàm là giá trị vô hướng [hiểu nôm na là các giá trị số]. Véc tơ này chỉ ra hướng mà tại đó giá trị của hàm thay đổi nhiều nhất và trở thành véc tơ 0 khi hàm đạt giá trị cực đại hoặc cực tiểu địa phương.
Một cách diễn đạt trực quan, tưởng tượng như ta đang ở trên một quả núi. Tại chân núi, các chỗ trũng của thung lũng và tại đỉnh núi, độ dốc bằng không. Tùy vào hình dạng của quả núi và vị trí ta quan sát, độ dốc sẽ có những giá trị khác nhau. Khi đang ở đỉnh núi thì đi về hướng nào cũng là “đường xuống núi” cả.
Quay trở lại khái niệm đạo hàm mà ta học thời cấp 3. Đại lượng này cho chúng ta tốc độ thay đổi của hàm dựa trên một biến số duy nhất, thường được đặt là x. Ví dụ, dF/dx cho chúng ta biết hàm F thay đổi bao nhiêu khi x thay đổi 1 đơn vị. Đối với một hàm có nhiều biến, chẳng hạn như x và y, nó sẽ có nhiều đạo hàm: các giá trị dF/dx và dF/dy cho ta biết giá trị của hàm sẽ thay đổi thế nào nếu ta thay đổi một biến số [với giả định các biến số khác không thay đổi].
Chúng ta có thể biểu diễn các tỷ lệ này trong một vectơ nhiều thành phần, với một thành phần là một đạo hàm. Do đó, một hàm có 3 biến sẽ có một gradient với 3 thành phần:
- F [x] có một biến và một đạo hàm duy nhất: dF / dx
- F [x, y, z] có ba biến và ba đạo hàm: [dF / dx, dF / dy, dF / dz]
Giống như đạo hàm thông thường, gradient chỉ ra hướng thay đổi mạnh nhất của hàm. Do đó nó có thể được sử dụng thể tìm ra các cực đại và cực tiểu địa phương. Trong một hàm đơn biến, để thay đổi giá trị của hàm, chúng ta chỉ có hai hướng “tiến” và “lùi” dựa trên sự thay đổi trên trục x. Đối với hàm đa biến, mọi việc không đơn giản như vậy. Với hàm hai biến, chúng ta có thể tưởng tượng đó là vô số các hướng trong một mặt phẳng, với hàm ba biến, đó có thể là bất kỳ hướng nào trong không gian 3 chiều. Với hàm 100 biến [như đầu vào của mạng nơ ron sử dụng word embedding 100 chiều], nó vượt ra khỏi sức tưởng tượng của chúng ta. Mặc dù vậy, gradient là công cụ toán học tuyệt vời để ta có thể khảo sát sự biến thiên của những hàm này.
Gradient được ký hiệu bằng chữ delta [Δ] ngược và được gọi là “del”. Với ví dụ trên, ta có:
Thành phần của gradient là đạo hàm riêng đối với x, y và z. Đối với một hàm một biến gradient chính là đạo hàm của hàm này.
Ứng dụng phổ biến của gradient là tìm kiếm các giá trị cực đại và cực tiểu của hàm. Đây là nhiệm vụ quan trọng để tối ưu các trọng số trong mạng Deep learning.
Hi vọng thông qua bài viết này các bạn đã hiểu hơn về Gradient. Đây là khái niệm quan trọng nếu như bạn muốn hiểu các sâu sắc các khía cạnh kỹ thuật của Deep learning, từ đó có thể thiết kế được các mô hình tốt hơn.
Hãy theo dõi trituenhantao.io để nhận được thông báo ngay khi có bài viết mới nhé!
- Issue: *
- Your Name: *
- Your Email: *
- Details: *
Chào các bạn!
Bài viết hôm nay mình xin phép đi sâu vào vấn đề tìm hiểu CSS gradient. Cụm từ gradient này chắc cũng không lạ lẫm gì với các bạn nữa. Khi sử dụng gradient, bạn sẽ thấy được sự mượt mà khi giao thoa của 2 hoặc nhiều màu sắc. Lấy ví dụ như này:
CSS gradient có 2 kiểu hiển thị:
- Linear Gradients [goes down/up/left/right/diagonally]: Hiểu đơn giản là trải dài gradient. Hình ví dụ bên trên nhé.
- Radial Gradients: Gradient tập trung về 1 điểm trung tâm. Có thể hiểu như là radius ấy, nhìn sẽ như thế này:
Bây giờ chúng ta đi tìm hiểu chi tiết vào từng kiểu nhé.
1. Linear Gradients
Như mình đã nói bên trên, để tạo được gradient, bạn phải có ít nhất là 2 màu trở nên, tức là phải xác định được ít nhất 2 điểm đầu và cuối của lớp gradient này. Cấu trúc như sau:
background-image: linear-gradient[direction, color1, color2, ...];
linear-gradient có 4 hướng như sau:
- Từ trên xuống dưới [linear-gradient[to bottom, color1, color2,..]]
- Từ dưới lên trên [linear-gradient[to top, color1, color2,..]]
- Từ trái qua phải [linear-gradient[to right, color1, color2,..]]
- Từ phải qua trái [linear-gradient[to left, color1, color2,..]]
Ví dụ cho các bạn dễ hiểu nhé:
Top to Bottom
Bottom to Top
Left to Right
Right to Left
.gradient {
height: 200px;
line-height: 200px;
width: 300px;
font-size: 30px;
text-align: center;
display: inline-block;
}
#grad1 {
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient[red, yellow];
}
#grad2 {
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient[to top, red , yellow];
}
#grad3 {
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient[to right, red , yellow];
}
#grad4 {
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient[to left, red , yellow];
}
Giải thích 1 chút là tại sao chúng ta lại gọi thuộc tính background-color: red; là để hiển thị background-color cho những trình duyệt không hỗ trợ CSS3 hoặc không hỗ trợ gradient.
Ngoài 4 kiểu cơ bản này, gradient còn có thêm 1 kiểu gọi kép nữa.
#grad1 {
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient[to bottom right, red, yellow];
}
Angles
1 vấn đề khác, nếu như các bạn muốn thay đổi hướng đi của gradient, bạn hãy sử dụng Angles. Mình sẽ define cụ thể với 4 hướng cơ bản bên trên nhé:
- Top to Bottom:
background-image: linear-gradient[180deg, red, yellow];
- Left to Right:
background-image: linear-gradient[90deg, red, yellow];
- Bottom to Top:
background-image: linear-gradient[0deg, red, yellow];
- Right to Left:
background-image: linear-gradient[-90deg, red, yellow];
Hình demo thì các bạn xem tạm bên trên nhé
Mutiple color stops
Mutiple color stops nôm na là điểm dừng của một màu trong một đống màu mà chúng ta đã cho và từ đó nó sẽ bắt đầu chuyển hóa thành màu khác bằng việc đặt % [tức khoảng muốn kết thúc vào cuối màu đó, như thế này:
background: linear-gradient[color %stop, color %stop, color %stop,...];
Lấy ví dụ: Đây là trường hợp các màu không set % hiển thị, tức là chúng sẽ được chia đều % cho nhau:
Còn dưới đây là trường hợp set % cho từng màu.
background:linear-gradient[to right,red 60%, yellow 70%, blue 90%];
Đã thấy rõ sự chênh lệch ở đây rồi nhé.
Transparency
Các bạn chắc cũng không lạ gì với transparent nữa rồi nhỉ. Hiểu nôm na, transparent là chỉ số trong suốt của màu sắc. Transparent càng giảm dần về 0 thì độ trong suốt càng cao, cái này chắc không cần giải thích nhiều nữa rồi nhỉ.
Với gradient, tất nhiên nó cũng support transparent. Khi thêm transparent, chắc chắn là chúng ta cần sử dụng rgba[] để define độ trong suốt cho các color stops. Ví dụ cho trực quan nhé:
#grad {
background-image: linear-gradient[to right, rgba[255, 0, 0, 0], rgba[255, 0, 0, 1]];
}
Repeating a linear-gradient
Hiểu đơn giản là gradient được lặp đi lặp lại cho tới khi hết không gian thì thôi.
#grad {
background-image: repeating-linear-gradient[red, yellow 10%, green 20%];
}
Okie, xấu muốn mù con mắt luôn.
Và chúng ta thử kết hợp với Angles bên trên xem sao nhé.
- Repeat gradient 45 độ, bắt đầu là red và kết thúc là green.
#grad {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient[45deg,red,yellow 7%,green 10%];
}
- Repeat gradient 190 độ, bắt đầu là red và kết thúc là green.
#grad {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient[190deg,red,yellow 7%,green 10%];
}
- Repeat gradient 90 độ, bắt đầu là red và kết thúc là green.
#grad {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: repeating-linear-gradient[90deg,red,yellow 7%,green 10%];
}
Quả thực cũng không đẹp đẽ gì cho cam. Nhưng thôi cứ để tạm.
Gradient còn 1 kiểu hiển thị nữa là Radial Gradients nhưng mà bài này dài quá rồi, thôi để bài sau mình sẽ giới thiệu về Radial Gradients nhé.
Link tham khảo: //www.w3schools.com/css/css3_gradients.asp