Thứ Hai, 30 tháng 12, 2013
CSS3 Gradients
Gradient CSS3 cho phép bạn hiển thị quá trình chuyển đổi suôn sẻ giữa hai hoặc nhiều màu sắc quy định.
Trước đó, bạn phải sử dụng hình ảnh cho các hiệu ứng. Tuy nhiên, bằng cách sử dụng gradient CSS3 bạn có thể giảm thời gian tải về và sử dụng băng thông. Ngoài ra, các yếu tố với độ dốc nhìn tốt hơn khi thu nhỏ, bởi vì gradient được tạo ra bởi trình duyệt.
CSS3 định nghĩa hai loại gradient:
- Tuyến tính Gradients (đi xuống / lên / trái / phải / đường chéo)
- Radial Gradient (được xác định bởi trung tâm của họ)
Hỗ trợ trình duyệt
| Chức năng | Hỗ trợ trình duyệt | ||||
|---|---|---|---|---|---|
| tuyến tính gradient () | |||||
| xuyên tâm gradient () | |||||
| lặp đi lặp lại tuyến tính gradient () | |||||
| lặp đi lặp lại xuyên tâm-gradient () | |||||
Internet Explorer 10 +, Firefox 16 +, Chrome 26 +, và Opera 12.1 + hỗ trợ bốn chức năng gradient.
Safari 5.1 + yêu cầu các tiền tố-webkit-.
Chrome 10 đến 25 yêu cầu các tiền tố-webkit-.
Opera 11,1-12,0 yêu cầu tiền tố-o-.
Firefox 3,6-15 yêu cầu tiền tố-moz-.
Internet Explorer 9 và phiên bản trước đó không hỗ trợ gradients.
CSS3 Gradients tuyến tính
Để tạo ra một gradient tuyến tính, bạn phải xác định ít nhất hai điểm dừng màu. Điểm dừng màu là những màu sắc mà bạn muốn để làm cho quá trình chuyển đổi trơn tru giữa. Bạn cũng có thể thiết lập một điểm khởi đầu và một hướng (hoặc góc) cùng với các hiệu ứng chuyển màu.
Ví dụ về Linear Gradient:
Cú pháp
background: linear-gradient(direction, color-stop1, color-stop2, ...);
Linear Gradient - Trên xuống dưới (đây là mặc định)
Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu ở đầu trang. Nó bắt đầu đỏ, chuyển sang màu xanh:
Ví dụ
Một gradient tuyến tính từ trên xuống dưới:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(red, blue); /* For Safari */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to blue:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(red, blue); /* For Safari */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to blue:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Linear Gradient - Từ trái sang phải
Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu đỏ, chuyển sang màu xanh:
Ví dụ
Một gradient tuyến tính từ trái sang phải:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, red , blue); /* For Safari */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts red, transitioning to blue:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, red , blue); /* For Safari */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts red, transitioning to blue:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Linear Gradient - Diagonal
Bạn có thể tạo ra một gradient theo đường chéo bằng cách xác định cả hai vị trí bắt đầu ngang và dọc.
Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu ở phía trên bên trái (và đi vào góc dưới bên phải). Nó bắt đầu đỏ, chuyển sang màu xanh:
Ví dụ
Một gradient tuyến tính bắt đầu ở phía trên bên trái (và đi vào góc dưới bên phải):
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left top, red , blue); /* For Safari */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to blue:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left top, red , blue); /* For Safari */
background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red , blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to blue:</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Sử dụng Angles
Nếu bạn muốn kiểm soát nhiều hơn sự chỉ đạo của gradient, bạn có thể xác định một góc, thay vì hướng được xác định trước (xuống dưới, lên trên, sang phải, sang trái, sang phải dưới cùng, vv.)
Cú pháp
background: linear-gradient(angle, color-stop1, color-stop2);
Các góc được quy định như một góc giữa một đường ngang và đường dốc, đi ngược chiều kim đồng hồ. Nói cách khác, 0deg tạo ra một đáy để gradient hàng đầu, trong khi 90 độ tạo ra một trái để dốc bên phải.
Ví dụ sau đây cho thấy làm thế nào để sử dụng các góc trên gradient tuyến tính:
Ví dụ
Một gradient tuyến tính với một góc đặc biệt:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:100px;
background: -webkit-linear-gradient(0deg, red, blue); /* For Safari */
background: -o-linear-gradient(0deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, red, blue); /* Standard syntax (must be last) */
}
#grad2
{
height:100px;
background: -webkit-linear-gradient(90deg, red, blue); /* For Safari */
background: -o-linear-gradient(90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, red, blue); /* Standard syntax (must be last) */
}
#grad3
{
height:100px;
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax (must be last) */
}
#grad4
{
height:100px;
background: -webkit-linear-gradient(-90deg, red, blue); /* For Safari */
background: -o-linear-gradient(-90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradients - Using Different Angles</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:100px;
background: -webkit-linear-gradient(0deg, red, blue); /* For Safari */
background: -o-linear-gradient(0deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(0deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, red, blue); /* Standard syntax (must be last) */
}
#grad2
{
height:100px;
background: -webkit-linear-gradient(90deg, red, blue); /* For Safari */
background: -o-linear-gradient(90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(90deg, red, blue); /* Standard syntax (must be last) */
}
#grad3
{
height:100px;
background: -webkit-linear-gradient(180deg, red, blue); /* For Safari */
background: -o-linear-gradient(180deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, blue); /* Standard syntax (must be last) */
}
#grad4
{
height:100px;
background: -webkit-linear-gradient(-90deg, red, blue); /* For Safari */
background: -o-linear-gradient(-90deg, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(-90deg, red, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradients - Using Different Angles</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Sử dụng nhiều màu Dừng
Ví dụ sau đây cho thấy làm thế nào để thiết lập nhiều điểm dừng màu:
Ví dụ
Một gradient tuyến tính từ trên xuống dưới với nhiều màu sắc dừng lại:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(red, green, blue); /* For Safari */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax (must be last) */
}
#grad2
{
height:200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
#grad3
{
height:200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to 15 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>3 Color Stops (evenly spaced)</h3>
<div id="grad1"></div>
<h3>7 Color Stops (evenly spaced)</h3>
<div id="grad2"></div>
<h3>3 Color Stops (not evenly spaced)</h3>
<div id="grad3"></div>
<p><strong>Note:</strong> Color stops are automatically spaced evenly when no percents are specified.</p>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(red, green, blue); /* For Safari */
background: -o-linear-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green, blue); /* Standard syntax (must be last) */
}
#grad2
{
height:200px;
background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Safari */
background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
#grad3
{
height:200px;
background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* For Safari */
background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* For Firefox 3.6 to 15 */
background: linear-gradient(red 10%, green 85%, blue 90%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>3 Color Stops (evenly spaced)</h3>
<div id="grad1"></div>
<h3>7 Color Stops (evenly spaced)</h3>
<div id="grad2"></div>
<h3>3 Color Stops (not evenly spaced)</h3>
<div id="grad3"></div>
<p><strong>Note:</strong> Color stops are automatically spaced evenly when no percents are specified.</p>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Ví dụ sau đây cho thấy làm thế nào để tạo ra một gradient tuyến tính với màu sắc của cầu vồng và một số văn bản:
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Gradient Background
</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Safari */
background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* For Fx 3.6 to 15 */
background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Gradient Background
</div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Sử dụng minh bạch
Gradient CSS3 cũng hỗ trợ minh bạch, có thể được sử dụng để tạo ra hiệu ứng mờ dần.
Thêm minh bạch, chúng ta sử dụng RGBA () để xác định các điểm dừng màu. Tham số cuối cùng trong RGBA () có thể là một giá trị từ 0 đến 1, và nó định nghĩa minh bạch của các màu sắc: 0 chỉ đầy đủ minh bạch, 1 cho thấy đầy đủ màu sắc (không trong suốt).
Ví dụ sau đây cho thấy một gradient tuyến tính bắt đầu từ bên trái. Nó bắt đầu hoàn toàn minh bạch, đầy đủ chuyển sang màu đỏ:
Ví dụ
Một gradient tuyến tính từ trái sang phải, với tính minh bạch:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Transparency</h3>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari */
background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Linear Gradient - Transparency</h3>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Lặp đi lặp lại một tuyến tính gradient
Các tuyến tính lặp đi lặp lại gradient () chức năng được sử dụng để lặp lại gradient tuyến tính:
Ví dụ
Một gradient tuyến tính lặp đi lặp lại:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Safari */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Firefox 3.6 to 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Repeating Linear Gradient</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:200px;
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Safari */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* For Firefox 3.6 to 15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Repeating Linear Gradient</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
CSS3 Gradients Radial
Một gradient xuyên tâm được xác định bởi trung tâm của nó.
Để tạo ra một gradient xuyên tâm bạn cũng phải xác định ít nhất hai điểm dừng màu. Bạn cũng có thể chỉ định trung tâm của gradient, hình (hình tròn hoặc hình elip) cũng như kích thước của nó. Theo mặc định, trung tâm là trung tâm, hình dạng là hình elip, và kích thước là xa-góc.
Ví dụ của Radial Gradient:
Cú pháp
background: radial-gradient(center, shape size, start-color, ..., last-color);
Radial Gradient - đều nhau Màu Dừng (đây là mặc định)
Ví dụ
Một Radial Gradient với màu sắc đều nhau dừng lại:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Radial Gradient - thức khác nhau khoảng cách Màu Dừng
Ví dụ
Một Radial Gradient với màu sắc khác nhau khoảng cách đều nhau dừng lại:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6 to 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* For Firefox 3.6 to 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Thiết lập Shape
Các tham số hình dạng xác định hình dạng. Nó có thể mất giá trị vòng tròn hoặc hình elip. Giá trị mặc định là hình elip.
Ví dụ
Một gradient xuyên tâm với hình dạng của một vòng tròn:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red, yellow, green); /* For Safari */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}
#grad2
{
height:150px;
width:200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Shapes</h3>
<p><strong>Ellipse (this is default):</strong></p>
<div id="grad1"></div>
<p><strong>Circle:</strong></p>
<div id="grad2"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-radial-gradient(red, yellow, green); /* For Safari */
background: -o-radial-gradient(red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(red, yellow, green); /* Standard syntax (must be last) */
}
#grad2
{
height:150px;
width:200px;
background: -webkit-radial-gradient(circle, red, yellow, green); /* For Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* For Fx 3.6 to 15 */
background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Shapes</h3>
<p><strong>Ellipse (this is default):</strong></p>
<div id="grad1"></div>
<p><strong>Circle:</strong></p>
<div id="grad2"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Sử dụng Kích thước khóa khác nhau
Các thông số kích thước xác định kích thước của gradient. Nó có thể mất bốn giá trị:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Ví dụ
Một gradient xuyên tâm với từ khoá kích thước khác nhau:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad2
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad3
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad4
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradients - Use of different size keywords</h3>
<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 (this is default):</strong></p>
<div id="grad4"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad2
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad3
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Standard syntax (must be last) */
}
#grad4
{
height:150px;
width:150px;
background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari */
background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradients - Use of different size keywords</h3>
<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 (this is default):</strong></p>
<div id="grad4"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Lặp đi lặp lại một gradient xuyên tâm
Các lặp đi lặp lại xuyên tâm-gradient () chức năng được sử dụng để lặp lại gradient xuyên tâm:
Ví dụ
Một gradient xuyên lặp đi lặp lại:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Firefox 3.6 to 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Repeating Radial Gradient</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
<html>
<head>
<style>
#grad1
{
height:150px;
width:200px;
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Safari */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Opera 11.1 to 12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* For Firefox 3.6 to 15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Repeating Radial Gradient</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét