CSS3 gradients phép bạn hiển thị quá trình chuyển đổi trơn tru giữa hai hoặc nhiều màu sắc nhất định.
Trước đó, bạn phải sử dụng hình ảnh cho những hiệu ứng này. 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 gradients nhìn tốt hơn khi zoom, vì gradient được tạo ra bởi trình duyệt.
Trước đó, bạn phải sử dụng hình ảnh cho những hiệu ứng này. 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 gradients nhìn tốt hơn khi zoom, vì gradient được tạo ra bởi trình duyệt.
Tôi sẽ chỉ cho các bạn cách để tạo ra CSS3 Radial Gradients
Để tạo một Gradient bạn cũng phải xác định ít nhất hai điểm dừng màu
Ví dụ : <!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 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>
Sau khi bạn đã có đoạn mã trên thì sẽ được như hình ảnh sau :
CSS3 là sự lựa chọn hoàn hảo cho chúng ta, đưa tôi và bạn đến sự phát triển thiết kế website chuyên nghiệp :http://tocdothietkewebsite.tumblr.com/ .
0 nhận xét: